Basic Markdown Syntax

2021-02-04 1876 words 9 minutes

Sample of basic markdown syntax

Headings

1
2
3
4
5
6
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
### Heading Custom ID {#custom-id}

1
2
3
4
5
6
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
<h3 id="custom-id">Heading Custom ID</h3>

Comments

1
2
3
<!--
This is a comment
-->

Horizontal Rules

1
2
3
---
___
***

1
2
3
<hr>
<hr>
<hr>

Rendered

Paragraph

1
2
3
4
5
6
7
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
soluta officiis concludaturque ei qui, vide sensibus vim ad.

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
soluta officiis concludaturque ei qui, vide sensibus vim ad.

1
2
3
4
5
6
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>

Rendered

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Inline HTML

1
2
3
4
5
6
7
Paragraph in Markdown.

<div class="class">
    This is <b>HTML</b>
</div>

Paragraph in Markdown.

1
2
3
4
5
<p>Paragraph in Markdown.</p>
<div class="class">
    This is <b>HTML</b>
</div>
<p>Paragraph in Markdown.</p>

Rendered

Paragraph in Markdown.

This is HTML

Paragraph in Markdown.

Emphasis

Bold

1
2
**rendered as bold text**
__rendered as bold text__

1
<strong>rendered as bold text</strong>

Rendered

rendered as bold text

Italics

1
2
*rendered as italicized text*
_rendered as italicized text_

1
<em>rendered as italicized text</em>

Rendered

rendered as italicized text

Strikethrough

1
~~Strike through this text.~~

1
<del>Strike through this text.</del>

Rendered

~~Strike through this text.~~

Combination

1
2
3
4
***bold and italics***
~~**strikethrough and bold**~~
~~*strikethrough and italics*~~
~~***bold, italics and strikethrough***~~

1
2
3
4
<em><strong>bold and italics</strong></em>
<del><strong>strikethrough and bold</strong></del>
<del><em>strikethrough and italics</em></del>
<del><em><strong>bold, italics and strikethrough</strong></em></del>

Rendered

bold and italics

~~strikethrough and bold~~

~~strikethrough and italics~~

~~bold, italics and strikethrough~~

Blockquotes

1
2
3
4
5
6
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<blockquote>
    <p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
</blockquote>

<blockquote>
    <p>Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
    Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.</p>
    <blockquote>
        <p>Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
        odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.</p>
    </blockquote>
</blockquote>

Rendered

Fusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Lists

Unordered

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
* Lorem ipsum dolor sit amet
* Consectetur adipiscing elit
* Integer molestie lorem at massa
* Facilisis in pretium nisl aliquet
* Nulla volutpat aliquam velit
    * Phasellus iaculis neque
    * Purus sodales ultricies
    * Vestibulum laoreet porttitor sem
    * Ac tristique libero volutpat at
* Faucibus porta lacus fringilla vel
* Aenean sit amet erat nunc
* Eget porttitor lorem

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ul>

Rendered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ordered

1
2
3
4
5
6
7
8
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
    1. Facilisis in pretium nisl aliquet
    1. Nulla volutpat aliquam velit
    1. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
1. Eget porttitor lorem

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa
        <ol>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
            <li>Faucibus porta lacus fringilla vel</li>
        </ol>
    </li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
</ol>

Rendered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
1. Facilisis in pretium nisl aliquet
2. Nulla volutpat aliquam velit
3. Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Task Lists

1
2
3
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

1
2
3
4
5
<ul>
    <li><input type="checkbox" disabled checked> Write the press release</li>
    <li><input type="checkbox" disabled> Update the website</li>
    <li><input type="checkbox" disabled> Contact the media</li>
</ul>

Rendered

Write the press release
Update the website
Contact the media

Code

Inline Code

1
In this example, `<section></section>` should be wrapped as **code**.

1
<p>In this example, <code>&lt;section&gt;&lt;/section&gt;</code> should be wrapped as <strong>code</strong>.</p>

Rendered

In this example, <section></section> should be wrapped as code.

Indented Code

1
2
3
4
    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

1
2
3
4
5
6
7
8
<pre>
    <code>
        // Some comments
        line 1 of code
        line 2 of code
        line 3 of code
    </code>
</pre>

Rendered

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block Fenced Code

1
2
3
```
Sample text here...
```

1
2
3
<pre>
  <code>Sample text here...</code>
</pre>

Rendered

1
Sample text here...

Syntax Highlighting

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
```js
grunt.initConfig({
    assemble: {
        options: {
            assets: 'docs/assets',
            data: 'src/data/*.{json,yml}',
            helpers: 'src/custom-helpers.js',
            partials: ['src/partials/**/*.{hbs,md}']
        },
        pages: {
            options: {
                layout: 'default.hbs'
            },
            files: {
                './': ['src/templates/pages/index.hbs']
            }
        }
    }
};
```

Rendered

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
grunt.initConfig({
    assemble: {
        options: {
            assets: 'docs/assets',
            data: 'src/data/*.{json,yml}',
            helpers: 'src/custom-helpers.js',
            partials: ['src/partials/**/*.{hbs,md}']
        },
        pages: {
            options: {
                layout: 'default.hbs'
            },
            files: {
                './': ['src/templates/pages/index.hbs']
            }
        }
    }
};

Tables

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

| Option | Description |
|:------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<table>
    <thead>
        <tr>
            <th>Option</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
            <td>path to data files to supply the data that will be passed into templates.</td>
        </tr>
        <tr>
            <td>engine</td>
            <td>engine to be used for processing templates. Handlebars is the default.</td>
        </tr>
        <tr>
            <td>ext</td>
            <td>extension to be used for dest files.</td>
        </tr>
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th style="text-align:center">Option</th>
            <th style="text-align:right">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center">data</td>
            <td style="text-align:right">path to data files to supply the data that will be passed into templates.</td>
        </tr>
        <tr>
            <td style="text-align:center">engine</td>
            <td style="text-align:right">engine to be used for processing templates. Handlebars is the default.</td>
        </tr>
        <tr>
            <td style="text-align:center">ext</td>
            <td style="text-align:right">extension to be used for dest files.</td>
        </tr>
    </tbody>
</table>

Rendered

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Links

1
2
3
4
<https://blog.bl4ckbird.com>
<bl4ckbird@bl4ckbird.com>
[bl4ckbird](https://blog.bl4ckbird.com)
[bl4ckbird](https://blog.bl4ckbird.com "BLOG!")

1
2
3
4
<a href="https://blog.bl4ckbird.com">https://blog.bl4ckbird.com</a>
<a href="mailto:bl4ckbird@bl4ckbird.com">bl4ckbird@bl4ckbird.com</a>
<a href="https://blog.bl4ckbird.com">bl4ckbird</a>
<a href="https://blog.bl4ckbird.com" title="BLOG!">bl4ckbird</a>

Rendered

https://blog.bl4ckbird.com

bl4ckbird@bl4ckbird.com

bl4ckbird

Named Anchors

1
2
3
* [Chapter 1](#chapter-1)
* [Chapter 2](#chapter-2)
* [Chapter 3](#chapter-3)

1
2
3
4
5
<ul>
    <li><a href="#chapter-1" rel="">Chapter 1</a></li>
    <li><a href="#chapter-2" rel="">Chapter 2</a></li>
    <li><a href="#chapter-3" rel="">Chapter 3</a></li>
</ul>

Rendered

Chapter 1
Chapter 2
Chapter 3

Footnotes

1
2
3
4
5
6
This is a digital footnote[^1].

This is a footnote with "label"[^label]

[^1]: This is a digital footnote
[^label]: This is a footnote with "label"

1
2
3
4
5
6
<p>
    This is a digital footnote<sup id="fnref:1"><a href="#fn:1">1</a></sup>.
</p>
<p>
    This is a footnote with “label”<sup id="fnref:2"><a href="#fn:2">2</a></sup>
    </p>

Rendered

This is a digital footnote¹.

This is a footnote with “label”²

This is a digital footnote ↩︎
This is a footnote with “label” ↩︎

Images

1
2
3
4
5
6
7
![Minion](https://octodex.github.com/images/minion.png)
![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

![Alt text2][id]
Other contents

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"

1
2
3
4
<img src="https://octodex.github.com/images/minion.png" alt="Minion">
<img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Alt text" title="The Stormtroopocat">
<img src="https://octodex.github.com/images/dojocat.jpg" alt="Alt text2" title="The Dojocat">
<p>Other contents</p>

Rendered

Table Of Contents

Basic Markdown Syntax

Headings

Comments

Horizontal Rules

Paragraph

Inline HTML

Emphasis

Bold

Italics

Strikethrough

Combination

Blockquotes

Lists

Unordered

Ordered

Task Lists

Code

Inline Code

Indented Code

Block Fenced Code

Syntax Highlighting

Tables

Links

Named Anchors

Footnotes

Images