Markdown Cheat Sheet¶

References¶

The Markdown Guide

Basic syntax

Extended syntax

Basic Syntax¶

These are the elements outlined in John Gruber’s original design document. All Markdown applications support these elements.

Headings¶

# h1 heading
## h2 heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

h1 heading¶

h2 heading¶

h3 Heading¶

h4 Heading¶

h5 Heading¶

h6 Heading¶

Bold¶

**bold text**

bold text

Italic¶

*italicized text*

italicized text

Blockquote¶

Put a greater-than symbol (>) before a line to be styled as a blockquote.

This is the first paragraph of a blockquote section. Praesent lacinia imperdiet erat, eget feugiat mi feugiat ut. Proin iaculis, massa eu lacinia tempor, dui lacus pellentesque dui, ut dapibus tellus purus at augue. Nam sagittis lobortis justo vel porta. Proin vel vulputate quam. Vivamus at vestibulum est. Phasellus a arcu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam elit mauris, pharetra vitae libero sit amet, efficitur rhoncus mauris.

To force a linebreak within a blockquote add a blank line followed by > <text> on a new line.

Ordered List¶

-> Reference

1. First item starts with a numeral + period.
2. Second item starts with a numeral + period on a new line.
3. Third item starts with a numeral + period on a new line.

1. First item starts with a numeral + period.
2. Second item starts with a numeral + period on a new line.
3. Third item starts with a numeral + period on a new line.

Unordered List¶

-> Reference

- First item 1.0 starts with a dash.
    - Subitem 1.1 starts with 4 spaces plus a dash on a new line.
         - Subitem 1.1.1 starts with 8 spaces plus a dash on a new line.
    - Subitem 2 starts with 4 spaces plus a dash on a new line.
    - Subitem 3 starts with 4 spaces plus a dash on a new line.
- Second item starts with a dash on a new line. 
- Third item starts with a dash on a new line. 

• First item 1.0 starts with a dash.
  • Subitem 1.1 starts with 4 spaces plus a dash on a new line.
    • Subitem 1.1.1 starts with 8 spaces plus a dash on a new line.
  • Subitem 2 starts with 4 spaces plus a dash on a new line.
  • Subitem 3 starts with 4 spaces plus a dash on a new line.
• Second item starts with a dash on a new line.
• Third item starts with a dash on a new line.

Code / monospace¶

Embedded in a line: `This is a code section in monospace typeface.`

Embedded in a line: This is a code section in monospace typeface.

Horizontal Rule¶

---

Link¶

[Markdown Guide](https://www.markdownguide.org)

Markdown Guide

Image¶


Extended Syntax¶

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Embedded HTML Examples¶

D’s Ghost Test Site: ghost.langley.stream

Table¶

To add a table in markup, use three or more hyphens (---) to create each column’s header, and 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 |

HTML Result:

Fenced Code Block¶

Begin and end the code block with three backslashes on a separate line.

```

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

```

Fenced Code Block Key Features¶

- Line Numbers¶

Add linenums=”1” inside the backticks

```html linenums=”1”

1
2
3
4
5

<div>
    <h3>This is a sample line of html</h3>
    <p>And here we have a paragraph.</p>
    <p>And another paragraph.</p>
</div>

- Highlighting Specific Lines¶

Add the hl_lines attribute inside the backticks:

```html hl_lines=”2 3”.

<div>
    <h3>This is a sample line of html</h3>
    <p>And here we have a paragraph.</p>
    <p>And another paragraph.</p>
</div>

- Code Blocks with Titles¶

Add a title attribute to create a file header above the block:

```html linenums=”1” title=”My Sample HTML”

1
2
3
4
5

<div>
    <h3>This is a sample line of html</h3>
    <p>And here we have a paragraph.</p>
    <p>And another paragraph.</p>
</div>

Heading ID¶

Create a custom heading identifier (e.g. “custom-id”) by adding ‘{#custom-id}’ to the header text:

My Great Heading {#custom-id}¶

Please see [My Great Heading](#custom-id) for further details.

The toc extension is used by MkDocs to generate an ID for every header in your Markdown documents. You can use that ID to link to a section within a target document by using an anchor link. The generated HTML will correctly transform the path portion of the link, and leave the anchor portion intact.

Note that IDs are created from the text of a header. All text is converted to lowercase and any disallowed characters, including white-space, are converted to dashes. Consecutive dashes are then reduced to a single dash.

HTML Result:

My Great Heading¶

Please see My Great Heading for further details.

Description List¶

(a.k.a. Definition List)

A CSS Description List is a semantic layout structure used to display pairs of data, such as a glossary, metadata tabs, or product specifications. It consists of three main elements:

<dl>: The wrapper Description List container.

<dt>: The Description Term (the label or key).

<dd>: The Description Details (the value, definition, or description).

Example markdown code:

HTML

: HyperText Markup Language for documents designed to be displayed in a web browser.

CSS

: Cascading Style Sheet language used to design and format HTML presentation.

HTML Result:

HTML

HyperText Markup Language for documents designed to be displayed in a web browser.

CSS

Cascading Style Sheet language used to design and format HTML presentation.

This is the HTML source code produced by above description list markdown code:¶

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language for documents designed to be displayed in a web browser.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet language used to design and format HTML presentation.</dd>
</dl>

This is the css applied to the above description list:¶

See: /root/docker/mkdocs/mkdocs-data/stylesheets/extra.css

dl {
  display: grid;
  grid-template-columns: max-content 1fr; /* Left column fits text, right column takes remaining space */
  gap: 10px 20px; /* Vertical and horizontal spacing */
  padding-left: 20px;
}

dt {
  color: teal;
  font-weight: bold;
  grid-column-start: 1; /* Always places the term in the first column */
}

dd {
  color: #922727;
  margin: 0; /* Overrides default browser indentation */
  grid-column-start: 2; /* Always places descriptions in the second column */
}

Footnote¶

Here’s a sentence with a short footnote. [^1]

[^1]: This is footnote 1.

Here’s a sentence with a multi-line footnote. [^2]

[^2]: This is footnote 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Here’s a sentence with a short footnote. <sup>1</sup>

Here’s a sentence with a multi-line footnote. <sup>2</sup>

Strikethrough¶

~~The world is flat.~~

The world is flat.

Task List¶

-> Reference

• Lorem ipsum dolor sit amet, consectetur adipiscing elit
• Vestibulum convallis sit amet nisi a tincidunt
  • In hac habitasse platea dictumst
  • In scelerisque nibh non dolor mollis congue sed et metus
  • Praesent sed risus massa
• Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

Emoji¶

That is so funny!

(See also Copying and Pasting Emoji)

Highlight¶

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

I need to highlight these very important words.

Subscript¶

H~2~O

H<sub>2</sub>O

Superscript¶

X<sup>2<sup>

X<sup>2</sup>

Tooltips¶

[hover over me](https://example.com/ “I’m a tooltip!”)

hover over me