Markdown Showcase: every supported component

This page previews every markdown feature and component the guide system supports. Each section demonstrates exactly one feature, so you can see at a glance how it renders. The headings name the feature, not the topic.

1. Headings

The frontmatter provides the H1. In the body we use headings starting at H2.

H3: subsection

H4: deeper level

H5: even deeper

H6: deepest level

2. Paragraphs and text styling

A normal paragraph just flows. A blank line starts a new paragraph.

In running text we use italic, bold, bold italic and strikethrough. Highlighting has no dedicated Markdown character, so we fall back to the HTML tag marked. The same applies to underlined, H₂O and x² via their respective HTML tags.

3. Inline code and keyboard shortcuts

Inline code such as apt update or nginx -t stays on a single line. We render keyboard shortcuts with Ctrl+C for Linux and ⌘+K for macOS.

4. Code blocks in different languages

Bash with title

apt update
apt install -y nginx
systemctl reload nginx

YAML with title

services:
  web:
    image: nginx:1.27-alpine
    ports:
      - "80:80"
    environment:
      NGINX_HOST: emeraldhost.de
      NGINX_PORT: "80"

JSON with title

{
  "name": "showcase",
  "version": 3,
  "enabled": true,
  "owner": null,
  "endpoints": {
    "primary": "https://api.example.com",
    "fallback": "https://api.fallback.example.com"
  }
}

PHP with title

<?php

namespace App\Services;

final class Foo
{
    public function greet(string $name): string
    {
        return "Hello, {$name}";
    }
}

JavaScript with title

import express from 'express';

const app = express();

app.get('/health', (req, res) => {
    res.json({ status: 'ok', uptime: process.uptime() });
});

app.listen(3000, () => console.log('Listening on :3000'));

Nginx with title

server {
    listen 80;
    server_name emeraldhost.de;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
    }
}

Plain text without language and without title

Connected to sftp.emeraldhost.de
File uploaded: my-plugin.jar (482 KB)
Session closed.

5. Tables

Narrow key/value table

Wider table with alignment

6. Task lists

• Server image selected
• Region set to Frankfurt
• SSH key uploaded

Regular prose may sit between the task groups to show the list resumes cleanly.

• Review firewall rules
• Configure backup cron
• Install monitoring agent

7. Lists

Unordered list with nesting

• Gameserver
  • Minecraft (Java)
  • Minecraft (Bedrock)
  • Aloft
• Rootserver
• TeamSpeak

Ordered list

1. Place the order in the dashboard
2. Wait for provisioning to complete
3. Test the SSH connection

Ordered list with a nested unordered list

1. Perform the initial configuration
   • Set the hostname
   • Choose a timezone
   • Upgrade packages
2. Install the application
3. Enable monitoring

8. Blockquotes

Setting up backups only after the first data loss is too late. Plan for recovery, not just for storage.

9. GitHub alerts

10. Internal links

Learn more under our SFTP guide. If you need to document network issues, Create a PCAP file is a good starting point.

11. External links

The official nginx documentation lives at https://nginx.org/en/docs/ or as a named link to nginx.org. Both variants should render identically in the frontend.

12. Footnotes

We use an inline reference¹ and show the definition below. A second footnote² shows what a second definition looks like.

13. Attribute block with anchor

My section

This heading has a fixed anchor and can be linked directly via #custom-anchor. The inline <a name="…"></a> form is GitHub's officially documented pattern; use it, because the alternative attribute-block form (### My section {#custom-anchor}) renders correctly on our site but shows up as literal text on GitHub.

14. Images

Images follow standard Markdown syntax ![alt](url). Images from the tutorial's images/ folder are shown on the website, and external URLs work just as well.

15. Horizontal rule

This paragraph sits above the divider.

After the divider the content continues here. The hr line should be clearly visible and separate sections optically.

16. Details and summary

node --max-old-space-size=4096 serve.js

17. Video

There are two routes, because github.com does not play a video that lives in the repository. Pick the route per video, based on where it has to play.

17a. Repo-committed video (our site renders, GitHub shows a link)

Drop the file into the guide's videos/ folder and reference it with the standard markdown image syntax. Our site plays the video; on github.com a plain link to the file appears instead.

Use this route when the video belongs to the article source: versioned, changeable in branches and reviewable in pull requests.

17b. UI-uploaded video (both surfaces render)

Drag any .mp4/.webm/.mov (≤ 10 MB free / 100 MB paid) into a GitHub Issue/PR comment draft. GitHub uploads to its user-images.githubusercontent.com CDN and pastes back a ready <video> tag with the generated URL. Copy that block into the markdown verbatim. Both renderers play it.

<video controls muted playsinline src="https://user-images.githubusercontent.com/USER/ID-uuid.mp4"></video>

Use this route when the preview on GitHub has to show the video itself and you accept that the file lives in GitHub's user-content store rather than in the repository.

Direct <video> for custom attributes

Whichever URL source you use, if you need raw control (multi-codec fallback via <source>, custom poster, autoplay flags), write the <video> tag directly. The src/poster/source src attributes accept both repo-relative videos//images/ paths AND absolute user-content URLs.

18. YouTube embed

A plain YouTube URL on its own line turns into an embedded player. No third-party tracking cookies are set before the user interacts with the player.

Inline links like Watch the trailer stay as ordinary links, only standalone URLs get the player treatment. Supported URL shapes: youtube.com/watch?v=ID, youtu.be/ID, youtube.com/embed/ID, youtube.com/shorts/ID.

Note: GitHub does not render the embed, iframes are removed there. On github.com you'll see the URL as a clickable link; on our site you get the full player.