Markdown is a way of formatting text and inserting images. It can be used within Habitica in all of the Chat features found in the Social tab, and also in the titles and notes of Tasks, Rewards, and Checklists.
The images inserted with Markdown can be hosted on any web site. (Emoji can also be used to insert small images without using Markdown, but the selection of images is limited.)
Note that in the mobile apps, the formatting produced by Markdown (as shown in the table below) may not display as expected.
As shown in the table below, headers of different levels can be created by preceding the text with one or more # (hash marks). The smallest header uses six hash marks. The hash marks must be at the start of a line and there must be a space between them and the text of the header; otherwise, the hash marks will remain visible and the text will not be enlarged. In chat, use headers only when essential because they take up a lot of space.
|You see||You enter||Notes|
|Header 1||# Header 1||See the notes above about headers.|
|Header 2||## Header 2|
|Header 3||### Header 3|
|Italicized text||*Italicized text*|
|_ can be used in place of *|
|Bold text||**Bold text**|
|Italic & bold text||***Italic & bold text***|
# Not a Header
\# Not a Header
|If you wish to type a symbol used in Markdown as is, place a backslash before each symbol.|
|`code`||For international users that don't have the ` (backtick) character on the keyboard, you can insert it by typing "96" while pressing ALT.|
Multi line blockquote
|> Multi line blockquote||Use this to quote the part of another message that you are referring to.|
|Use this to quote multiple responses within a message that you are referring to.|
|After "This is standard text", Enter or Shift-Enter twice to start a new paragraph. Insert four spaces before "This is a highlighted paragraph."||Use this to highlight a paragraph.|
| On a new line, enter three backticks (```).
On subsequent lines, just enter the code. Long paragraphs will wrap automatically. Enter or Shift-Enter creates a line break. Enter or Shift-Enter twice adds a blank line.
End the code block with another line of three backticks (```).
Unlike the previous highlighted text method, this does not require four spaces at the start of every paragraph.
|Markdown code blocks display as unformatted text and are typically used for displaying software code.
For international users that don't have the ` (backtick) character on the keyboard, you can insert it by typing "96" while pressing ALT.
|One line of text|
Another one under it
|Enter or Shift-Enter twice in a chat window to produce this. Alternatively, type two spaces after the first line and press Enter or Shift-Enter once.||Type text, make a blank line, type text. -OR- Type text, type two spaces, go to next line, type text. Note that in the mobile apps, the former will give you a blank line between the two lines of text.|
|One line of text|
Another one under it with an empty line separating them
|Enter or Shift-Enter twice, (or   or  ), Enter or Shift-Enter twice again in a chat window to produce this. Before submitting, your text should look like this:
||Type text, make a blank line, type the non breaking space marker, make a blank line, type text.|
|Manually Pad Text||  in front of words to be able to have multiple spaces between words.||This is good for centering or tabbing task headings.|
|• Bullet Points||On a new line type + or * or - followed by a space.||For international users that don't have the + (plus) character on the keyboard, you can insert it by typing "43" while pressing ALT.|
|Horizontal Line||Enter or Shift-Enter twice, ---, and Enter or Shift-Enter twice again in a chat window to produce this. Alternatively, Enter or Shift-Enter once, three underscores (___), and Enter or Shift-Enter again.||Type text, make a blank line, type three dashes, make a blank line, type text. -OR- Type text, go to next line, type three underscores, go to next line, type text. Note that horizontal lines created via either method do not show up on the mobile apps.|
|Table Of Text|
First Header Second Header
First Header | Second Header
|Great for auto aligning text with header.|
|Hypertext link||[Hypertext link](URLofYourWebsiteHere)|
|Note that there is no space between the square and rounded brackets. On Habitica addresses, ensure that you don't include "www.".|
|![alt text](URLofYourImageHere "optional mouseover title")||Alt text doesn't display, but it must be present. Enter full url of your image (which will be resized).|
|:smiley:||The Emoji cheat sheet has hundreds of emojis, but if the code doesn't work, you can use your character viewer (mac windows) to insert one.|
Markdown Workarounds Edit
Markdown can be extremely helpful but at times the built-in shortcuts can cause problems. The following table contains known issues and suggests solutions.
|You see||You wanted||Solution||Notes|
|1. Item One
1. Item Two
1. Item Three
|1. Item One
2. Item Two
3. Item Three
|1\. Item One
2\. Item Two
3\. Item Three
|Markdown interprets a line beginning with a numeral followed by a period as a numbered list item. If Markdown resets numbering when it is not supposed to, inserting a backslash between the number and the period solves the problem.|
Markdown Tricks Edit
The following table includes some tricks that are usable wherever Markdown can be interpreted.
|You see||You enter||Notes|
|𝕱𝖆𝖓𝖈𝖞 𝖙𝖊𝖝𝖙 𝖋𝖔𝖓𝖙||Use https://lingojam.com/FancyTextGenerator to generate the text, then copy & paste.||There are several types of fancy text generated, including emoji inclusive and upside down text. Text generated will not be searchable as it uses unicode symbols.|
Progress bars can be incorporated in Habitica to display the relative progress for each Habit, Daily, Task (or even each checklist item), or Reward as well as the rest of Habitica where Markdown is supported.
Check out the project page for more usage examples.
|Mathematical formulas and graphics (LaTeX)||![alt text](URLofYourImageHere "optional mouseover title")
Replace 'URLofYourImageHere' with an image link generated as follows:
|This uses the regular Markdown image syntax to insert mathematical formulas and graphics.
Alt text doesn't display, but it must be present. Enter full URL of your image (which will be resized).
|Maps (using OSM)|
|Insert maps using OpenStreetMap and staticMapLite. Visit the latter for more examples.
If you copy coordinates directly from your address bar, remember to replace the forward slash (/) between the coordinates with a comma (,). Also note that while lower zoom levels work, they may not display clearly on Habitica.
The size parameter specifies the width and height of a rectangle centered at your current position which will be cropped to produce the final image.