Why this exists

This placeholder gathers every blog feature in one spot so you can sanity-check rendering, runnable code, and layout¹. It pairs inline math like $e^{i\pi} + 1 = 0$ with margin notes, images, and an interactive ECharts chart for quick visual QA.

Runnable snippets across languages

Code blocks are run at build time to verify their accuracy, allowing for tests and checks. Results are rendered into the page as well. Code that doesn’t compile, run, or pass tests will cause the build of the site to fail.

JavaScript runs in a sandbox during the build, so you can surface small reproducible examples without shipping extra scripts.

const readings = [3, 4, 6, 8];
const average = readings.reduce((sum, n) => sum + n, 0) / readings.length;
console.log("mean reading", average.toFixed(2));

Python is supported too.

from statistics import mean, median

samples = [1, 3, 5, 7, 9]
print(f"mean={mean(samples):.1f}, median={median(samples)}")
assert 1 == 1

Haskell snippets compile and run during the build. Keep them self-contained:

fib :: Int -> Int
fib n
  | n <= 1 = n
  | otherwise = fib (n - 1) + fib (n - 2)

main :: IO ()
main = putStrLn $ "fib 8 = " ++ show (fib 8)

Common Lisp works, too—use SBCL-compatible scripts:

(DEFUN ROLLING-SUM (XS)
  (LET ((SUM 0))
    (MAPCAR (LAMBDA (X) (INCF SUM X) SUM) XS)))

(FORMAT T "Rolling sums: ~{~a~^, ~}~%" (ROLLING-SUM '(1 2 3 4 5)))

Footnotes

Footnotes are rendered automatically at the end of the article.² Reusing the same footnote is allowed for concise references.² You can mix margin notes and footnotes without conflicts.

You can call out detours with footnotes³ while keeping the main narrative clean.

Math

Block math renders via KaTeX:

Images (local + remote)

ECharts sample chart

Below is a minimal ECharts chart rendered via the helper component. Resize the window to confirm responsiveness.

Markdown preview (rendered samples)

Headings, emphasis, links

Bold, italics, and inline code all work as expected. Link styles: Marginem home.

Descender check: links with hanging letters should let the descenders breathe through the underline rather than being struck through. Compare jumping pygmy quails forge gravy with a plain run of text containing the same g, j, p, q, and y shapes. Hover the link to confirm the underline gives way cleanly to the highlight, and that typography pairings — Garamond, Bodoni, Joypixels keep their tails intact.

Lists

• Unordered list item one
• Item two with a nested list:
  • Nested child A
  • Nested child B
• Item three

1. Ordered step
2. Another step
3. Final step

• Checklist item done
• Checklist item todo

Blockquote

“Simplicity is prerequisite for reliability.” — Edsger Dijkstra⁴

Code fence (static)

git status --short

ASCII art (preformatted)

A homage to the classic three-masted galleon — the quintessential subject of the early monospace-art tradition (think Joan G. Stark, alt.ascii-art, the late-90s text-mode BBS scene), and a useful stress test for the <pre> style: long lines, leading whitespace, density variation, and a wide aspect ratio.

]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[
|[]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[]|
]||[                                        ]||[
|[]|                                        |[]|
]||[                                        ]||[
|[]|           ,                            |[]|
]||[         .'|`.                          ]||[
|[]|      .-'  |  \                         |[]|
]||[  _.-`  __;.-'|                         ]||[
|[]| '---''`  |   '  /~-.,            _     |[]|
]||[          '   | ;   / `'._       / /`\  ]||[
|[]|         ;   . /  .'   ,  `-._  /.' \|  |[]|
]||[         |   |/ .'      \     7L'  / '  ]||[
|[]|         |   L.'         `.    \  /     |[]|
]||[        .   F.___          \    \'      ]||[
|[]|        |  /|    `'--.....__`.   \      |[]|
]||[        | / |       /`      `'`.  \     ]||[
|[]|        |'  |     .'  \       / '. \    |[]|
]||[        /  .     /     \     '    `'    ]||[
|[]|        \  |    /      `.   /           |[]|
]||[         \ |  .'        \  /mx          ]||[
|[]|          \|.'           \/             |[]|
]||[           '--'''''------'              ]||[
|[]|                                        |[]|
]||[                                        ]||[
|[]|                                        |[]|
]||[       __                               ]||[
|[]|     .'  `. ,  '   _, _     _  _  .     |[]|
]||[     |    | |/`| /` | _`| |/ |/ | |     ]||[
|[]|     '.__.' |  | `-.|(_.| |  |  / |     |[]|
]||[                 ._.'                   ]||[
|[]|                                        |[]|
]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[
|[]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[]||[]|

Table

Horizontal rule

Use this section as a live visual check for Markdown rendering alongside the runnable snippets and components above.