Markdown Syntax Guide

Here’s a comprehensive overview of markdown formatting options available in your posts.

Text Formatting

Bold text is created with double asterisks Italic text uses single asterisks Strikethrough uses double tildes

Lists

Unordered list:

• Item 1
• Item 2
  • Nested item
  • Another nested item
• Item 3

Ordered list:

1. First item
2. Second item
   1. Nested numbered item
   2. Another nested item
3. Third item

Code Blocks

Inline code: const greeting = "Hello World"

Code block with syntax highlighting:

function calculateSum({ a, b }: { a: number, b: number }): number {
    return a + b
}

Blockquotes

This is a blockquote It can span multiple lines

And can be nested

Tables

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Links and Images

Link to external site

Task Lists

• Completed task
• Incomplete task
• Another completed task

Extended Syntax

Definition Lists

Some Markdown processors allow you to create definition lists of terms and their corresponding definitions. To create a definition list, type the term on the first line. On the next line, type a colon followed by a space and the definition.

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

The HTML looks like this:

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

The rendered output looks like this:

First Term

This is the definition of the first term.

Second Term

This is one definition of the second term.

This is another definition of the second term.

Emoji

There are two ways to add emoji to Markdown files: copy and paste the emoji into your Markdown-formatted text, or type emoji shortcodes.

Copying and Pasting Emoji

In most cases, you can simply copy an emoji from a source like Emojipedia and paste it into your document. Many Markdown applications will automatically display the emoji in the Markdown-formatted text. The HTML and PDF files you export from your Markdown application should display the emoji.

Tip: If you're using a static site generator, make sure you encode HTML pages as UTF-8.

Using Emoji Shortcodes

Some Markdown applications allow you to insert emoji by typing emoji shortcodes. These begin and end with a colon and include the name of an emoji.

Gone camping! :tent: Be back soon.

That is so funny! :joy:

The rendered output looks like this:

Gone camping! ⛺ Be back soon.

That is so funny! 😂

Note: You can use this list of emoji shortcodes, but keep in mind that emoji shortcodes vary from application to application. Refer to your Markdown application's documentation for more information.

Footnotes

Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the content of the footnote at the bottom of the page.

To create a footnote reference, add a caret and an identifier inside brackets ([^1]). Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.

Add the footnote using another caret and number inside brackets with a colon and text ([^1]: My footnote.). You don’t have to put footnotes at the end of the document. You can put them anywhere except inside other elements like lists, block quotes, and tables.

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

The rendered output looks like this:

Here’s a simple footnote,¹ and here’s a longer one.²

Heading IDs

Many Markdown processors support custom IDs for headings — some Markdown processors automatically add them. Adding custom IDs allows you to link directly to headings and modify them with CSS. To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading.

### My Great Heading {#custom-id}

The HTML looks like this:

<h3 id="custom-id">My Great Heading</h3>

Linking to Heading IDs

You can link to headings with custom IDs in the file by creating a standard link with a number sign (#) followed by the custom heading ID. These are commonly referred to as anchor links.

Markdown	HTML	Rendered Output
[Heading IDs](#heading-ids)	<a href="#heading-ids">Heading IDs</a>	Heading IDs

Other websites can link to the heading by adding the custom heading ID to the full URL of the webpage (e.g, [Heading IDs](https://www.markdownguide.org/extended-syntax#heading-ids)).

Highlights

This isn’t common, but some Markdown processors allow you to highlight text. The result looks like this. To highlight words, use two equal signs (==) before and after the words.

I need to highlight these ==very important words==.

The rendered output looks like this:

I need to highlight these very important words.

Alternatively, if your Markdown application supports HTML, you can use the mark HTML tag.

I need to highlight these <mark>very important words</mark>.

Strikethrough

You can strikethrough words by putting a horizontal line through the center of them. The result looks like this. This feature allows you to indicate that certain words are a mistake not meant for inclusion in the document. To strikethrough words, use two tilde symbols (~~) before and after the words.

~~The world is flat.~~ We now know that the world is round.

The rendered output looks like this:

The world is flat. We now know that the world is round.

Subscript

This isn’t common, but some Markdown processors allow you to use subscript to position one or more characters slightly below the normal line of type. To create a subscript, use one tilde symbol (~) before and after the characters.

H~2~O

The rendered output looks like this:

H₂O

Tip: Be sure to test this in your Markdown application before using it. Some Markdown applications use one tilde symbol before and after words not for subscript, but for strikethrough.

Alternatively, if your Markdown application supports HTML, you can use the sub HTML tag.

H<sub>2</sub>O

Superscript

This isn’t common, but some Markdown processors allow you to use superscript to position one or more characters slightly above the normal line of type. To create a superscript, use one caret symbol (^) before and after the characters.

X^2^

The rendered output looks like this:

X²

Alternatively, if your Markdown application supports HTML, you can use the sup HTML tag.

X<sup>2</sup>

Tables

To add a table, use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column. For compatibility, you should also add a pipe on either end of the row.

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

The rendered output looks like this:

Syntax	Description
Header	Title
Paragraph	Text

Cell widths can vary, as shown below. The rendered output will look the same.

| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

Tip: Creating tables with hyphens and pipes can be tedious. To speed up the process, try using the Markdown Tables Generator or AnyWayData Markdown Export. Build a table using the graphical interface, and then copy the generated Markdown-formatted text into your file.

Alignment

You can align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens within the header row.

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

The rendered output looks like this:

Syntax	Description	Test Text
Header	Title	Here’s this
Paragraph	Text	And more

Formatting Text in Tables

You can format the text within tables. For example, you can add links, code (words or phrases in backticks (`) only, not code blocks), and emphasis.

You can’t use headings, blockquotes, lists, horizontal rules, images, or most HTML tags.

Tip: You can use HTML to create line breaks and add lists within table cells.

Escaping Pipe Characters in Tables

You can display a pipe (|) character in a table by using its HTML character code (|).

Credits: https://www.markdownguide.org/

1. This is the first footnote. ↩

2. Here’s one with multiple paragraphs and code.

   Indent paragraphs to include them in the footnote.

   { my code }

   Add as many paragraphs as you like. ↩

Comments