Habitica Wiki
Register
Advertisement
Habitica Wiki

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*

_Italicized text_

_ can be used in place of *
Bold text **Bold text**
Strikethrough text ~~Strikethrough text~~
Italic & bold text ***Italic & bold text***
_Not Italicized_# Not a Header

**Not Bold**

\_Not Italicized\_

\# Not a Header

\*\*Not Bold\*\*

If you wish to type a symbol used in Markdown as is, place a backslash before each symbol.
Code
`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.

Nested

Blockquote

> Nested

>> Blockquote

Use this to quote multiple responses within a message that you are referring to.
HighlightedParagraph
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.
Multi paragraph code block
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.

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. 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
Content Cell  Content Cell
Content Cell  Content Cell

First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell

Great for auto aligning text with header.
Hypertext link [Hypertext link](URLofYourWebsiteHere)

For example:
[Habitica](https://habitica.com)

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).
Emoji-smiley
: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

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

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 28
![progress](http://progressed.io/bar/28 "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.

Progress bars Sample

Check out the project page for more usage examples.

![progress](http://progressed.io/bar/59?title=completed "progress")
![progress](http://progressed.io/bar/7?scale=10&title=mark&suffix=X "progress")
Mathematical formulas and graphics (LaTeX)
Embedding Latex as Image

Sample (click to enlarge)

![alt text](URLofYourImageHere "optional mouseover title")

Replace 'URLofYourImageHere' with an image link generated as follows:

  1. Input your math string in QuickLaTeX (TikZ is also supported) and select any preferred options. If you are not familiar with the LaTeX syntax, try an online visual editor such as HostMath to create a string you can copy into QuickLaTex's input box.
  2. Click on the Render button. The site generates an image that is cached on the server, and provides a link to the image.
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)
OpenStreetMaps Sample

Sample (click to enlarge)

  1. Find your desired position on OpenStreetMap.org and approximately center it on your screen.
  2. Replace the map coordinates and zoom level in the above Markdown example with the values in your browser's address bar. For example, the link in the Markdown example/thumbnail on the left was originally(where 19 is the zoom level, and the other two numbers are the coordinates).
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.

See also

Advertisement