Feature Playground: runnable code, math, notes, and media

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 Plotly 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)

Plotly sample chart

Below is a minimal Plotly 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.

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

Table

Horizontal rule

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