Markdown Sample

A complete reference showing every supported element. Use this page to verify rendering or as a copy-paste starting point when authoring new content.

Contents

Headings

Use # through #### for four levels of hierarchy:

H2 — Section heading

H3 — Subsection heading

H4 — Detail heading

Note — H1 is reserved for the page title (the very first line of the file). Use H2 and H3 for sections and subsections throughout the page.

Inline formatting

Style Syntax Result
Bold **bold** bold
Italic _italic_ italic
Bold + italic **_both_** both
Strikethrough ~~struck~~ struck
Inline code `code` | code

Mixed: This sentence has bold, italic, struck, and inline code all in one line.

Paragraphs and line breaks

A blank line between two blocks of text creates a new paragraph. This is the most common way to separate ideas in a page.

A second paragraph starts here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

To force a line break within a paragraph without starting a new one, add two trailing spaces before pressing Enter — like the break above.

Lists

Unordered

  • Item one
  • Item two
    • Nested item A
    • Nested item B
    • Deeply nested item
  • Item three

Ordered

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

Mixed (ordered + unordered)

  1. Prepare the environment
    • Install PHP 7.4+
    • Configure your web server
  2. Drop your public/ folder in place
  3. Open a browser and visit the root URL

Blockquotes and callouts

A plain blockquote (no label):

This is a plain blockquote. It has no labelled type — useful for quoting external sources or adding general context.

Callout types

Diplodocus uses the **Label** — body pattern inside a blockquote:

Note — Informational context. Use for background or extra detail the reader might want but doesn't strictly need.

Tip — A suggestion or best practice. Helpful but optional.

Warning — Something the reader should pay attention to; won't break things immediately but could cause problems if ignored.

Danger — A destructive action, security risk, or something that will break things if ignored. Do not skip.

Example — A concrete illustration of the concept described above.

Multi-paragraph callout

Note — The first paragraph of a multi-paragraph callout.

The second paragraph continues in the same block. Keep every line prefixed with > to stay inside the same callout.

# You can nest code blocks inside callouts too
php cli.php lint public/getting-started/

Code

Inline code

Use php cli.php lint to check your pages. Set default_theme to "dark" in config.php to enable dark mode.

Bash

#!/usr/bin/env bash
for file in public/getting-started/*.md; do
    echo "Linting: $file"
    php cli.php lint "$file"
done

PHP

<?php
declare(strict_types=1);

function slugify(string $heading): string {
    return strtolower(preg_replace('/\s+/', '-', trim($heading)));
}

JavaScript

document.querySelectorAll('[data-copy-target]').forEach(btn => {
    btn.addEventListener('click', () => {
        navigator.clipboard.writeText(btn.dataset.copyTarget);
    });
});

JSON

{
  "app_name": "Diplodocus",
  "default_theme": "light",
  "excluded_dirs": ["src", "lib", "assets"]
}

Diff

- 'default_theme' => 'dark',
+ 'default_theme' => 'light',
- 'app_name' => 'Documentation',
+ 'app_name' => 'Diplodocus',

Tables

Basic

Column A Column B Column C
One Two Three
Four Five Six

Alignment

Left aligned Centre aligned Right aligned
Text Text 1,234
More text More text 56,789
Final row Final row 0.99

With rich content (emoji, inline code, bold)

Feature Status Notes
Sidebar ✅ Done Auto-built from folder structure
TOC ✅ Done Uses ## and ### only
Search ⚠️ In progress Client-side filter for now
Dark mode ✅ Done data-theme="dark" on <html>
PDF export 🔴 Planned Target: v2

Images

An inline image from this space's attachments/ folder:

Diplodocus hero banner

Images inside table cells:

Preview Caption
Hero The Diplodocus welcome page hero image

Tip — Name attachment files using the page-number prefix convention: 13a-description.png for the first image on page 13. See Attachments & Images for the full guide.

Internal — same space

Anchor — this page

Anchor — another page

External

Task lists

  • Write the markdown sample page
  • Add a mermaid diagram section
  • Use the existing hero image as an attachment reference
  • Replace placeholder images in attachments/ with real screenshots
  • Publish to production

Horizontal rules

Three or more hyphens on their own line produce a thematic break:

Use them to separate major sections within a long page — like the breaks throughout this page.

Diagrams

Diplodocus renders fenced ```mermaid blocks using Mermaid.js. No installation required.

Flowchart — request lifecycle

flowchart TD
    A[Browser request] --> B{Router}
    B -->|"/"| C[Home dashboard]
    B -->|"/{project}/"| D[Space landing]
    B -->|"/{project}/{page}"| E[Page view]
    E --> F[ContentRenderer]
    F --> G[Parsedown]
    G --> H[HTML string]
    H --> I[TemplateEngine]
    I --> J[HTTP response]

Sequence diagram — page render

sequenceDiagram
    participant Browser
    participant Router
    participant ContentRenderer
    participant Parsedown

    Browser->>Router: GET /getting-started/13-markdown-sample
    Router->>ContentRenderer: render(page)
    ContentRenderer->>Parsedown: toHtml(markdown)
    Parsedown-->>ContentRenderer: HTML string
    ContentRenderer-->>Router: rendered content
    Router-->>Browser: HTTP 200

Entity-relationship — content model

erDiagram
    SPACE {
        string slug
        string title
    }
    PAGE {
        string slug
        string title
        string content
    }
    ATTACHMENT {
        string filename
        string mime_type
    }
    SPACE ||--o{ PAGE : contains
    PAGE ||--o{ ATTACHMENT : references

Next