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.
Markdown Examples Edit
As shown in the table below, headers of different levels can be created by preceding the text with one or more # (hash marks). Markdown specifies six header levels (H1-H6); 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.|
|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
|Type two spaces after the first line and press Enter or Shift-Enter once to produce this.||Type text, type two spaces, go to next line, type text.|
One line of text
Another one under it with padding separating the two
|Enter or Shift-Enter twice in a chat window to produce this. Before submitting, your text should look like this:|
One line of text
Another one under it with an empty line separating them
|Type text, 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.|
|• Unordered (Bulleted) Lists||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.|
|1. Ordered (Numbered) Lists||On a new line type 1. followed by a space.|
|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.
Only three hyphens are required (---); using more than three will still render correctly, however.
|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 specifies the alternative text shown in place of an image if it cannot be displayed because of a slow connection, an error in the URL, or if someone uses a screen reader. The alt text must be present. Enter the 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.|
|HTML entities are supported in Markdown. To use them, simply type or insert the piece of text ("string"). The string begins with an ampersand (&) and ends with a semicolon (;).|
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|
|![progress](http://www.yarntomato.com/percentbarmaker/button.php?barPosition=28&leftFill=%23FF0000 "progress")||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.
See Percent Bar Maker for more 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 specifies the alternative text shown in place of an image if it cannot be displayed because of a slow connection, an error in the URL, or if someone uses a screen reader. The alt text must be present. Enter the 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.