Code fence viewers transform source into rich output

A dotlit-inspired extension: code blocks with special metadata are rendered by viewers instead of as plain code.

CSV Tables

JSON Data

{
  "name": "Garden",
  "type": "digital-garden",
  "features": [
    "wikilinks",
    "backlinks",
    "viewers"
  ],
  "inspired_by": [
    "dotlit",
    "obsidian"
  ]
}

Mermaid Diagrams

graph TD
    A[Markdown Source] --> B[Parser]
    B --> C{Has Viewer?}
    C -->|Yes| D[Viewer Component]
    C -->|No| E[Default Code Block]
    D --> F[Rich HTML Output]
    E --> F

SVG Graphics

Inline Markdown

Custom Viewers

Custom viewers live in src/viewers/ and are automatically loaded.

Timeline Viewer

TOC Viewer

Transclusion

Pull content from other files using < path or < [[slug]]:

Slug-based transclusion

Section transclusion

Pull only a specific section with < [[slug#section]]:

Virtual pages

Use [[today]], [[yesterday]], [[this-week]], [[this-month]], or [[this-year]] as shorthand for log pages:

• Link to today's log: today
• Transclude this week: < [[this-week]]

Raw transclusion

Add !raw to show transcluded content as code instead of rendered:

Donald Knuth's insight: programs should be written primarily for humans to read, with execution as a secondary concern. Source files become essays that happen to compile.

The key inversion—write prose that contains code, not code that contains comments. Explanation drives structure.

Modern echoes: Jupyter notebooks, Org-mode babel, [[dotlit]].

See also: [[knowledge-work-should-accrete]]

DSL Syntax

The code fence metadata DSL:

• lang - first position, determines viewer
• filename - second position, for output files
• #tag - adds CSS class tag-xyz
• !directive - controls rendering (!inline, !collapse)
• attr=value - arbitrary attributes (viewer=custom)
• < path - file transclusion (read from file)
• < [[slug]] - slug transclusion (read note body)
• < [[slug#section]] - section transclusion
• > lang - output format

Example: ```csv data.csv #example !inline `

See literate-programming for the philosophy behind executable documents.