Markdown Guide

Collection of examples that demonstrate how to produce HTML from Markdown files.

1. Headings

example.md

# Level 1 heading

## Level 2 heading

### Level 3 heading

#### Level 4 heading

##### Level 5 heading

###### Level 6 heading

Level 1 heading

Level 2 heading

Level 3 heading

Level 4 heading

Level 5 heading

Level 6 heading

example.md

Display heading 1 {.display-1}

Display heading 2 {.display-2}

Display heading 3 {.display-3}

Display heading 4 {.display-4}

Display heading 1

Display heading 2

Display heading 3

Display heading 4

2. Paragraphs

example.md

I really enjoy writing in Markdown.

I think I will use it to format
all of my documents from now on.

I really enjoy writing in Markdown.

I think I will use it to format all of my documents from now on.

example.md

I really enjoy writing in Markdown.

I think I will use it to format \
all of my documents from now on.

I really enjoy writing in Markdown.

I think I will use it to format
all of my documents from now on.

example.md

I am centered. {.text-center}

I am centered.

example.md

"Only those who keep learning stay young." {.text-right}

JULIAN ZINI {.text-right}

"Only those who keep learning stay young."

JULIAN ZINI

3. Emphasis

example.md

This is **bold text**.

This is bold text.

example.md

This is _italic text_.

This is italic text.

example.md

This text is **_really important_**.

This text is really important.

example.md

This is ~~struck through~~ text.

This is struck through text.

example.md

This is an `inline code snippet`.

This is an inline code snippet.

4. Blockquotes

example.md

> Dorothy followed her through many beautiful rooms of the castle.

Dorothy followed her through many beautiful rooms of the castle.

example.md

> Dorothy followed her through many beautiful rooms of the castle.
>
> The witch ordered her to clean the pots and kettles, sweep the floor,
> and keep the fire fed with wood.

Dorothy followed her through many beautiful rooms of the castle.

The witch ordered her to clean the pots and kettles, sweep the floor, and keep the fire fed with wood.

example.md

> Dorothy followed her through many beautiful rooms of the castle.
>
> > The witch ordered her to clean the pots and kettles, sweep the floor,
> > and keep the fire fed with wood.

Dorothy followed her through many beautiful rooms of the castle.

The witch ordered her to clean the pots and kettles, sweep the floor, and keep the fire fed with wood.

example.md

> ### The quarterly results look great!
>
> - Revenue was off the charts.
> - Profits were **_higher_** than ever.
>
> _Everything_ is going **_according_** to the **plan**.

The quarterly results look great!

• Revenue was off the charts.
• Profits were higher than ever.

Everything is going according to the plan.

example.md

> This is a `message`.

> This is a `success message`.
> {.text-success}

> This is an `info message`.
> {.text-info}

> This is a `warning message`.
> {.text-warning}

> This is a `danger message`.
> {.text-danger}

This is a message.

This is a success message.

This is an info message.

This is a warning message.

This is a danger message.

5. Lists

example.md

1. First item
2. Second item
3. Third item

1. First item
2. Second item
3. Third item

example.md

- First item
- Second item
- Third item

• First item
• Second item
• Third item

example.md

1. First item
2. Second item
3. Third item
   - Subitem
   - Subitem
4. Fourth item

1. First item
2. Second item
3. Third item
   • Subitem
   • Subitem
4. Fourth item

example.md

- First item
- Second item
- Third item
  1. Subitem
  2. Subitem
- Fourth item

• First item
• Second item
• Third item
  1. Subitem
  2. Subitem
• Fourth item

example.md

- This is the first bullet.
- This is the second bullet.

  This paragraph belongs to the second bullet.

- And this is the third bullet.

• This is the first bullet.

• This is the second bullet.

  This paragraph belongs to the second bullet.

• And this is the third bullet.

example.md

- This is the first bullet.
- This is the second bullet.

  > A blockquote looks great inside the second bullet.

- And this is the third bullet.

• This is the first bullet.

• This is the second bullet.

  A blockquote looks great inside the second bullet.

• And this is the third bullet.

example.md

1.  Open the file.
2.  Find the following code block:

    ```
    <html>
      <head>
        <title>Test</title>
      </head>
    ```

3.  Update the title.

1. Open the file.

2. Find the following code block:

   <html>
     <head>
       <title>Test</title>
     </head>
   

3. Update the title.

example.md

1.  Open the file that contains the Linux mascot.
2.  Admire how awesome it looks.

    ![Tux](https://alexquispe.github.io/static/tux.png)

3.  Close the file.

1. Open the file that contains the Linux mascot.

2. Admire how awesome it looks.

   

3. Close the file.

6. Code

example.md

Run the command `cat /etc/os-release` to see
which operating system is installed.

Run the command cat /etc/os-release to see which operating system is installed.

example.md

```
app
  ├─ logs
  │     ├─ info.log
  │     ├─ warn.log
  │     └─ error.log
  ├─ logger.js
  └─ index.js
```

app
  ├─ logs
  │     ├─ info.log
  │     ├─ warn.log
  │     └─ error.log
  ├─ logger.js
  └─ index.js

example.md

```js
setTimeout(function () {
  console.log("You will see this after 1 second");
}, 1000);
```

setTimeout(function () {
  console.log("You will see this after 1 second");
}, 1000);

example.md

```js {.line-numbers data-title="vue-example.js" data-line="8-12,16"}
import Vue from "vue";
import VueI18n from "vue-i18n";

import App from "./App.vue";

Vue.use(VueI18n);

const messages = {
  en: { message: { hello: "Hello, {name}!" } },
  de: { message: { hello: "Guten Tag, {name}!" } },
};
const i18n = new VueI18n({ locale: "en", messages });

new Vue({
  render: (h) => h(App),
  i18n,
}).$mount("#app");
```

vue-example.js

import Vue from "vue";
import VueI18n from "vue-i18n";

import App from "./App.vue";

Vue.use(VueI18n);

const messages = {
  en: { message: { hello: "Hello, {name}!" } },
  de: { message: { hello: "Guten Tag, {name}!" } },
};
const i18n = new VueI18n({ locale: "en", messages });

new Vue({
  render: (h) => h(App),
  i18n,
}).$mount("#app");

example.md

The following command prints the operating system version:

```bash {.cmd}
cat /etc/os-release
```

```{.cmd-output}
PRETTY_NAME="Debian GNU/Linux 10 (buster)"
NAME="Debian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"
...
```

The following command prints the operating system version:

cat /etc/os-release

PRETTY_NAME="Debian GNU/Linux 10 (buster)"
NAME="Debian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"
...

7. Horizontal Rules

example.md

Try a blank line before...

---

...and after the horizontal rule.

Try a blank line before...

...and after the horizontal rule.

8. Links

example.md

My favorite search engine is
[Duck Duck Go](https://duckduckgo.com).

My favorite search engine is Duck Duck Go.

example.md

My favorite search engine is
[Duck Duck Go](https://duckduckgo.com "The best search engine").

My favorite search engine is Duck Duck Go.

example.md

<https://www.markdownguide.org>

<fake@example.com>

https://www.markdownguide.org

fake@example.com

example.md

The code is licensed under **[MIT](https://oss.ninja/mit)**.

You can find more information in the
_[Official Markdown Guide](https://www.markdownguide.org)_.

The code is licensed under MIT.

You can find more information in the Official Markdown Guide.

example.md

_“In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole,
filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole
with nothing in it to sit down on or to eat: it was a [hobbit-hole][1], and that
means comfort.”_ {.text-justify}

_― J.R.R. Tolkien, The Hobbit, or There and Back Again_ {.text-right}

[1]: https://en.wikipedia.org/wiki/Hobbit "Hobbit lifestyle"

“In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.”

― J.R.R. Tolkien, The Hobbit, or There and Back Again

9. Images

example.md

![Tux](https://alexquispe.github.io/static/tux.png "Tux, the Linux mascot")

example.md

[![Tux](https://alexquispe.github.io/static/tux.png "Tux, the Linux mascot")](https://alexquispe.github.io/static/tux.png)

example.md

![Tux](https://alexquispe.github.io/static/linux.png){.w-25} {.text-center}

10. Tables

example.md

| Syntax | Description |
| ------ | ----------- |
| Header | Title       |
| Cell   | Text        |

example.md

| Syntax | Description |  Test Text |
| :----- | :---------: | ---------: |
| Header |    Title    | This is ok |
| Cell   |    Text     |   And more |

example.md

| Option   | Description                          |
| -------- | ------------------------------------ |
| `--name` | Container name.                      |
| `-e`     | Defines environment variables.       |
| `-d`     | Runs the container in detached mode. |
| `-p`     | Publishes a port. `host:container`   |
| `-it`    | Opens an interactive bash shell.     |

References

• Markdown Guide - Basic Syntax