Explore everything that is currently possible with a comprehensive markdown demonstration

Headings

You can use up to up to six levels by writing # at the start of a line. The number of hashtags defines the hierarchy of the heading. The first two headings render with a horizontal separator.

# First level
## Second level
### Third level
#### Fourth level
##### Fifth level
###### Sixth level

Video

📣 Calling all passionate #Swift devs! We invite you to shape the future of code editing. Join us in contributing to a free and #OpenSource project to build a native #CodeEditor that unleashes the power of the Mac and complements Xcode.https://t.co/1gLjzN3tul

— CodeEdit (@CodeEditApp) June 16, 2023

Linking to Headings

In Markdown documents, each heading has its name as the identifier which you can link to via a fragment.

[link to](#linking-to-headings)

Emphasize

Emphasize text with different meanings.

Bold

Use double astersik or double underscore before and after text to denote bold.

**bold**
__bold__

Italic

Use single asterisk or underscore before and after text to denote italic.

*italic*
_italic_

Strikethrough

Use double tildes before and after text to strikethrough.

~~strikethrough~~

Paragraphs

Use a blank line to separate one or more lines of text.

a paragraph

another paragraph

Line Breaks

Use a backslash or two or more spaces at the end of a line, then type return to define a line break.

Note

This works inconsistently in Markdown documents versus comments. In a comment, a soft line break (return) does render a line break.

first line
second line

first line\
second line

Images

Small image

![](https://picsum.photos/300/200)

Normal image

![](https://picsum.photos/1800/1200)

Wide image

<img class="wide" src="https://picsum.photos/2400/1600" />

Full width image

<img class="full-width" src="https://picsum.photos/3200/1600" />

Small image with caption

<figure>
  <img src="https://picsum.photos/300/200" />
  <figcaption class="centered">A descriptive caption about the above image goes here to give the user more context about it.</figcaption>
</figure>

Normal image with caption

<figure>
  <img src="https://picsum.photos/1800/1200" />
  <figcaption>A descriptive caption about the above image goes here to give the user more context about it.</figcaption>
</figure>

Wide image with caption

<figure>
  <img class="wide" src="https://picsum.photos/2400/1600" />
  <figcaption>A descriptive caption about the above image goes here to give the user more context about it.</figcaption>
</figure>

Full width image with caption

<figure>
  <img class="full-width" src="https://picsum.photos/3200/1600" />
  <figcaption>A descriptive caption about the above image goes here to give the user more context about it.</figcaption>
</figure>

Code

Inline Code Block

Use a backtick before and after text to denote as inline code.

`code`

Fenced Code Block

Use three backticks in a separate line before and after code or add at least four spaces to the start of a line.

```
code
```

code

Syntax Highlighting

Add syntax highlighting by specifying a language next to the backticks before a fenced code block.

```javascript
function markdownRocks() {
  return true
}
```

Escaping Backticks

Inline code blocks can be escaped using double backticks. Fenced code blocks using backticks can be escaped using three tildes ~~~ or four backticks ````.

Blockquotes

Add a greater-than sign in front of a paragraph.

To create a blockquote.

> a quoted pragraph
> 
> another quoted paragraph

Or if you want to make the quote wide.

An important quote that we want to call the readers attention to and emphasize in our article from the rest of the content.

This is another quoted paragraph that we want to emphasize.

<blockquote class="wide">
  <p>An important quote that we want to call the readers attention to and emphasize in our article from the rest of the content.</p>
  <p>This is another quoted paragraph that we want to emphasize.</p>
</blockquote>

If you want to make the quote full width.

An important quote that we want to call the readers attention to and emphasize in our article from the rest of the content.

This is another quoted paragraph that we want to emphasize.

<blockquote class="full-width">
  <p>An important quote that we want to call the readers attention to and emphasize in our article from the rest of the content.</p>
  <p>This is another quoted paragraph that we want to emphasize.</p>
</blockquote>

Blockquote Footer

Add a blockquote footer to credit the author.

An important quote that we want to call the readers attention to and emphasize in our article from the rest of the content.

This is another quoted paragraph that we want to emphasize.

<blockquote>
  <p>An important quote that we want to call the readers attention to and emphasize in our article from the rest of the content.</p>
  <p>This is another quoted paragraph that we want to emphasize.</p>
  <footer>Steve Jobs, Apple Computers</footer>
</blockquote>

It even works with width classes.

An important quote that we want to call the readers attention to and emphasize in our article from the rest of the content.

This is another quoted paragraph that we want to emphasize.

<blockquote class="wide">
  <p>An important quote that we want to call the readers attention to and emphasize in our article from the rest of the content.</p>
  <p>This is another quoted paragraph that we want to emphasize.</p>
  <footer>Steve Jobs, Apple Computers</footer>
</blockquote>

Nested Blockquotes

Add two greater-than signs in front of the paragraph you want to nest.

a quoted paragraph

a quoted paragraph inside a quotation

> a quoted paragraph
>> a quoted paragraph inside a quotation

Lists

Numbered List

Add a figure followed by period, then a space and your content for each line item. The figure of the first item defines the sequence, figures of the following lines won't be considered.

1. numbered list item
2. numbered list item
3. numbered list item

1. numbered list item
2. numbered list item
3. numbered list item

Bulleted Lists

Add an asterisk, dash or plus sign followed by period, then a space and your content for each line item.

• bulleted list item
• bulleted list item
• bulleted list item

* bulleted list item
* bulleted list item
* bulleted list item

Task Lists

Add a dash followed by a space, then brackets with a space in between, then another space and your content for each task.

• Unfinished task list item
• Finished task list item

- [ ] Unfinished task list item
- [x] Finished task list item

Nesting Lists

Add two spaces to indent a list item and another two spaces for every next level. You can use up to ten levels. Mixing numbered and bulleted lists is possible.

• first level
  • second level

* first level
  * second level

1. first level
  1. second level

* first level unordered list item
  1. second level ordered list item

Links

Add the text in brackets, then add the path or URL in parentheses.

[this is a link](http://github.com/)

Images

Add an exclamation mark, followed by alt text in brackets, and the path or URL to the image asset in parentheses.

Note

The output automatically wraps the image in a link leading to the image url if no link is specified.

![alt text](http://github.com/image.jpg)

For accessibility reasons, make sure the alt text describes the image content precisely!

Linking images

Add a link to an image by enclosing the Markdown for the image in brackets, and then add the link in parentheses.

[![alt text](http://github.com/image.jpg)](http://github.com/image.jpg)

Footnotes

Add a footnote in square brackets preceded by a caret and an identifier¹. The footnote content can be added by using the before mentioned construct followed by colon and then the content.

Text with a footnote[^1].

[^1]: The footnote can be defined anywhere in the document but will be rendered at the end.

Tables

Create a table by denoting each cell with pipe characters. Use three or more hyphens in the second row to create each column, this is mandatory.

column 1	column 2
cell	cell
cell	cell

| column 1 | column 2 |
| -------- | -------- |
| cell     | cell     |
| cell     | cell     |

Alignment

Add a colon to the left, right, or on both side of the hyphens in the second row to align text of the columns accordingly.

column 1	column 2	column 3
left	center	right
left	center	right

| column 1 | column 2 | column 3 |
| :------- | :------: | -------: |
| left     |  center  |    right |
| left     |  center  |    right |

Formatting Text

You can emphasize text, add links, images and inline code blocks in tables.

Horizontal Rules

Use three or more asterisks, dashes, or underscores alone on a line.

---

---
***
___

Alerts

Alerts emphasize critical information. They are displayed with distinctive colors and icons to indicate the importance of the content.

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Mermaid Diagrams

Code blocks with the syntax highlighting set to mermaid renders dynamical diagrams using the Mermaid syntax.

stateDiagram
    direction LR
    Input --> Blackbox
    Blackbox --> Output
    state Blackbox {
      direction LR
      🪄 
    }

```mermaid
stateDiagram
    direction LR
    Input --> Blackbox
    Blackbox --> Output
    state Blackbox {
      direction LR
      🪄 
    }
```

Footnotes

1. Identifiers can be numbers or words without spaces or tabs. ↩