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 and files

Specify a language after the opening fence so the site can highlight the syntax. The .line-numbers, data-title, and data-line attributes show line numbers, a file name, and highlights for selected lines.

example.md

Run `node --version` to check the Node.js version.

Run node --version to check the Node.js version.

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(() => {
  console.log("You will see this after 1 second");
}, 1000);
```

setTimeout(() => {
  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

```python {.line-numbers data-title="index.py"}
def greet(name):
    return f"Hello, {name}!"

print(greet("Ada"))
```

index.py

def greet(name):
    return f"Hello, {name}!"

print(greet("Ada"))

example.md

```dockerfile {.line-numbers data-title="Dockerfile"}
FROM node:22-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
CMD ["node", "index.js"]
```

Dockerfile

FROM node:22-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
CMD ["node", "index.js"]

example.md

```html {.line-numbers data-title="index.html" data-line="3-5,7,9"}
<!doctype html>
<html lang="en">
  <head>
    <title>My site</title>
  </head>
  <body>
    <h1>Hello, world</h1>
  </body>
</html>
```

index.html

<!doctype html>
<html lang="en">
  <head>
    <title>My site</title>
  </head>
  <body>
    <h1>Hello, world</h1>
  </body>
</html>

example.md

```json {.line-numbers data-title="package.json" data-line="2-4"}
{
  "name": "my-application",
  "version": "1.0.0",
  "scripts": { "start": "node index.js" }
}
```

package.json

{
  "name": "my-application",
  "version": "1.0.0",
  "scripts": { "start": "node index.js" }
}

example.md

```sql {.line-numbers data-title="schema.sql" data-line="1-4"}
CREATE TABLE tutorial (
  id INTEGER PRIMARY KEY,
  title TEXT NOT NULL
);
```

schema.sql

CREATE TABLE tutorial (
  id INTEGER PRIMARY KEY,
  title TEXT NOT NULL
);

7. Terminal and command output

Keep commands separate from the output they produce. The site supports a regular shell, administrator commands, and interactive Python and PostgreSQL sessions.

example.md

Run this command to check the Node.js version:

```bash {.cmd}
node --version
```

```{.cmd-output}
v22.0.0
```

Run this command to check the Node.js version:

node --version

v22.0.0

example.md

```bash {.cmd-user}
whoami
```

```bash {.cmd-root}
systemctl status nginx
```

whoami

systemctl status nginx

example.md

```python {.cmd-py}
print("Hello from Python")
```

print("Hello from Python")

example.md

```sql {.cmd-pg}
SELECT current_database();
```

```{.cmd-output}
 current_database
------------------
 tutorial
(1 row)
```

SELECT current_database();

 current_database
------------------
 tutorial
(1 row)

example.md

```sql {.cmd-pg-test}
SELECT COUNT(*) FROM tutorial;
```

```{.cmd-output}
 count
-------
     3
(1 row)
```

SELECT COUNT(*) FROM tutorial;

 count
-------
     3
(1 row)

8. Horizontal rules

example.md

Try a blank line before...

---

...and after the horizontal rule.

Try a blank line before...

...and after the horizontal rule.

9. 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

10. 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}

11. 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