A Small Demonstration of All The Markdown Features That Are Under The Sun, Without Worrying About If They Are Supported Or Not
Headings
Headings
## Headings
Setext Style
Heading Level 1
Heading Level 2
### Setext Style
Heading Level 1
===============
Heading Level 2
---------------
ATX Style
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
### ATX Style
# Heading Level 1
## Heading Level 2
### Heading Level 3
#### Heading Level 4
##### Heading Level 5
Paragraphs
This is a paragraph. It contains multiple sentences to demonstrate how paragraphs work in Markdown.
This is a paragraph. It contains multiple sentences to demonstrate how paragraphs work in Markdown.
Line Breaks
Soft line break (just press Enter): This is the next line.
Hard line break (use two spaces at the end of the line):
This is the next line.
Soft line break (just press Enter):
This is the next line.
Hard line break (use two spaces at the end of the line):
This is the next line.
Emphasis
Italics using single asterisks.
Italics using single underscores.
Bold using double asterisks.
Bold using double underscores.
Bold and Italics using triple asterisks.
Bold and Italics using triple underscores.
*Italics* using single asterisks.
_Italics_ using single underscores.
Bold using double asterisks.
Bold using double underscores.
Bold and Italics using triple asterisks.
Bold and Italics using triple underscores.
Blockquotes
This is a blockquote.
Nested blockquote.
> This is a blockquote.
>
> > Nested blockquote.
Lists
Ordered List
- First item
- Second item
- Third item
Unordered List
- First item
- Second item
- Third item
Nested List
- Parent item
- Child item
- Grandchild item
- Child item
Task List
- [x] Completed task
- [ ] Incomplete task
### Ordered List
- First item
- Second item
- Third item
Unordered List
- First item
- Second item
- Third item
Nested List
- Parent item
- Child item
- Grandchild item
Task List
- [x] Completed task
- [ ] Incomplete task
Code
Inline Code
Use inline code for short snippets.
Indented Code Block
def hello_world():
print("Hello, world!")
Fenced Code Block
def hello_world():
print("Hello, world!")
### Inline Code
Use inline code for short snippets.
Indented Code Block
def hello_world():
print("Hello, world!")
Fenced Code Block
```python
def hello_world():
print("Hello, world!")
```
Horizontal Rules
---
Links
### Inline Links
Reference-Style Links
Autolinks
<https://www.example.com>
Images
Inline Image
Reference-Style Image
### Inline Image
Reference-Style Image
HTML
This is bold and this is italic.
This is <b>bold</b> and this is <i>italic</i>.
Strikethrough
This text is strikethrough.
~~This text is strikethrough.~~
Tables
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 | Data | Data |
| Row 2 | Data | Data |
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1 | Data | Data |
| Row 2 | Data | Data |
Footnotes
This is a footnote referenceThis is the footnote text..
Markdown Source:
This is a footnote reference[^1].
[ ^1]: This is the footnote text. (Do not put a space after the opening bracketh)
Definition Lists
Term
: Definition
Term
: Definition
Abbreviations
The HTML abbreviation is HTML. It stands for HyperText Markup Language.
*[HTML]: HyperText Markup Language
The HTML abbreviation is HTML. It stands for *HyperText Markup Language*.
*[HTML]: HyperText Markup Language
Superscript and Subscript
E = mc2
H2O
E = mc<sup>2</sup>
H<sub>2</sub>O
Highlight Text
==Highlighted text==
==Highlighted text==
Insertion and Deletion
{++Inserted text++}
{--Deleted text--}
{++Inserted text++}
{--Deleted text--}
Comments
<!-- This is a comment -->
Emoji
:smile: :+1: :heart:
:smile: :+1: :heart:
Table of Contents
[TOC]
[TOC]
Heading IDs
Custom Heading {#custom-id}
### Custom Heading {#custom-id}
Raw HTML Blocks
<div style="color: red;">This is red text.</div>
Embedded Media
Video
Audio
### Video
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
Mathematical Notation
Inline Math
$E = mc^2$
Block Math
$$ \int_a^b f(x) dx = F(b) - F(a) $$
### Inline Math
$E = mc^2$
Block Math
$$
\int_a^b f(x) dx = F(b) - F(a)
$$
Diagrams
```mermaid
---
width: 65vw
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
will render to
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
Smart Typography
"Curly quotes"
-- En-dash
--- Em-dash
"Curly quotes"
-- En-dash
--- Em-dash
Custom Containers
[!NOTE] This is a note.
[!WARNING] This is a warning.
> [!NOTE]
> This is a note.
> [!WARNING]
> This is a warning.
Collapsible Sections
Click to expand
Hidden content here.
<details>
<summary>Click to expand</summary>
Hidden content here.
</details>
Keyboard Input
Press Ctrl + C to copy.
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
Line Block
| Roses are red
| Violets are blue
| Roses are red
| Violets are blue
Citation
This is a citation [@doe2025].
This is a citation [@doe2025].
Page Break
\pagebreak
\pagebreak
Escaping Characters
*Not italicized*
\*Not italicized\*
Tabbed Content
You can create tabbed sections to show multiple versions of content, like code in different languages or rendered output vs source code.
Syntax:
To create tabs, use the following markdown syntax:
:::tabs
::tab{title="Python"}
```python
def greet(name):
return f"Hello, {name}!"
print(greet("World"))
```
::tab{title="JavaScript"}
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("World"));
```
::tab{title="Output"}
```
Hello, World!
```
:::
Example:
def greet(name):
return f"Hello, {name}!"
print(greet("World"))
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("World"));
Hello, World!