Markdown Examples (Visual Reference)¶

This page provides live examples of how Markdown syntax renders in the Arctyk Docs site.

Use it as a quick reference when writing or reviewing documentation.

Quick Links

Headings
Inline Formatting
Lists
Blockquotes
Code Blocks
Nested Code Fences
Escaping Markdown Characters
Tables
Tables with Escaped Markdown
Admonitions
Collapsible Admonitions
HTML Entities
Combining Markdown Elements

Headings¶

Example Markdown¶

# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading

Output¶

H1 Heading¶

H2 Heading¶

H3 Heading¶

H4 Heading¶

Inline Formatting¶

Example Markdown¶

**Bold**  
_Italic_  
`Inline code`  
~~Strikethrough~~  
[Link text](https://arctyk.io)

Output¶

Bold
Italic
Inline code
~~Strikethrough~~
Link text

Lists¶

Example Markdown¶

1. First step
2. Second step
   - Sub-step A
   - Sub-step B
3. Third step

Output¶

First step
Second step
Sub-step A
Sub-step B
Third step

Blockquotes¶

Example Markdown¶

> This is a standard blockquote.
>
> It can include **bold text**, _italics_, and even `inline code`.

Output¶

This is a standard blockquote.

It can include bold text, italics, and even inline code.

Code Blocks¶

Example Markdown¶

```bash
docker compose up -d

### Output
```bash
docker compose up -d

Nested Code Fences¶

When showing Markdown examples that already contain code blocks, you must nest backticks properly.
The outer fence must always have more backticks than the inner one.

Example Markdown¶

````markdown
```bash
docker compose up -d
```
````

Output¶

```bash
docker compose up -d
```

Escaping Markdown Characters¶

Example Markdown¶

\*escaped asterisk\*  
\_escaped underscore\_  
\#escaped heading\#  
\|escaped pipe\|  
\`escaped backtick\`

Output¶

*escaped asterisk*
_escaped underscore_
#escaped heading#
|escaped pipe|
`escaped backtick`

Tables¶

Example Markdown¶

| Setting | Description | Example |
|----------|--------------|----------|
| `DEBUG` | Enables debug mode | `False` |
| `DB_PORT` | Database port | `5433` |
| `TIME_ZONE` | Django timezone | `America/Toronto` |

Output¶

Setting	Description	Example
`DEBUG`	Enables debug mode	`False`
`DB_PORT`	Database port	`5433`
`TIME_ZONE`	Django timezone	`America/Toronto`

Tables with Escaped Markdown¶

Example Markdown¶

| Symbol | Escaped Example | Renders As |
|---------|-----------------|------------|
| `*` | `\*bold\*` | \*bold\* |
| `_` | `\_italic\_` | \_italic\_ |
| `#` | `\# heading` | \# heading |
| `` ` `` | `` \`code\` `` | \`code\` |
| `|` | `\| pipe \|` | \| pipe \| |

Output¶

Symbol	Escaped Example	Renders As
`*`	`\bold\`	bold
`_`	`\_italic\_`	_italic_
`#`	`\# heading`	# heading
`	\`code\`	`code`
`\|`	`\\| pipe \\|`	\| pipe \|

Admonitions¶

Example Markdown¶

!!! note
    This is a general note.

!!! tip "Quick Tip"
    Use `docker compose up -d --build` to rebuild containers.

!!! warning "Caution"
    Never commit your `.env` file to Git.

Output¶

Note

This is a general note.

Quick Tip

Use docker compose up -d --build to rebuild containers.

Caution

Never commit your .env file to Git.

Collapsible Admonitions¶

Example Markdown¶

??? info "Show example"
    ```yaml
    version: "3.9"
    services:
      web:
        build: .
    ```

Output¶

Show example

version: "3.9"
services:
  web:
    build: .

HTML Entities¶

Example Markdown¶

| Character | HTML Entity | Output |
|------------|--------------|---------|
| Backtick | `&#96;` | &#96; |
| Less than | `&lt;` | &lt; |
| Greater than | `&gt;` | &gt; |
| Ampersand | `&amp;` | &amp; |

Output¶

Character	HTML Entity	Output
Backtick	```	`
Less than	`<`	<
Greater than	`>`	>
Ampersand	`&`	&

Combining Markdown Elements¶

Example Markdown¶

!!! example "Combining Elements"
    1. Run `docker compose up -d`
    2. Open [localhost:8000](http://localhost:8000)
    3. Verify the containers are running:
        ```bash
        docker ps
        ```

Output¶

Combining Elements

Run docker compose up -d
Open localhost:8000
Verify the containers are running:
```
docker ps
```

Summary¶

Section	Demonstrates
Headings	Heading styles
Inline Formatting	Bold, italics, links
Lists	Ordered and unordered lists
Blockquotes	Indented callouts
Code Blocks	Syntax highlighting
Nested Code Fences	Showing Markdown inside Markdown
Escaping Markdown	Literal formatting characters
Tables	Structured data
Tables with Escaped Markdown	Markdown inside tables
Admonitions	Tips, notes, and warnings
Collapsible Admonitions	Expandable content
HTML Entities	Character references
Combining Markdown Elements	Complex formatting examples