# Rendering > Read without the noise. Leaftext renders your Markdown the way GitHub does — code, diagrams, math, callouts, footnotes, emoji, your own images — and opens your structured files too: 84000-style TEI translations through a reader that knows the format, any other XML through a generic one, JSON or YAML as readable pages, and saved emails as the message they carry. Leaftext picks a pipeline from the file extension. Markdown (`.md`, `.markdown`, `.mdown`) is parsed in Rust with `pulldown-cmark`, run through a GitHub-like rendering pipeline, sanitized, and handed to the WebView. `.xml` takes a parallel path — parsed with `roxmltree`, then routed by what the file contains: a TEI document goes to the [TEI renderer](#tei-xml-84000-translations), anything else to the [generic XML renderer](#any-xml). `.json`, `.yaml`, and `.yml` go to the [data renderer](#data-files-json-and-yaml), which reads the same shapes the generic XML renderer does. `.eml`, `.mht`, and `.mhtml` go to the [email renderer](#email-eml). All of them produce the same HTML shell. Every Markdown feature below is shown with a live example, rendered by the same engine that draws your documents; the XML, data, and email sections are described rather than demonstrated, since a Markdown page cannot embed a live document of another format. ## Summary | Category | Supported | | --- | --- | | Core Markdown | Headings, paragraphs, lists, links, images, blockquotes, rules, inline code | | GFM | Tables, task lists, strikethrough, autolinks | | Extras | Syntax highlighting, Mermaid, math, alerts, footnotes, emoji | | Leaf extensions | [Buttons](#buttons-leaf-extension) — a link wrapped in braces | | Local content | [Images](#images) by relative, absolute, or `file://` path | | Safety | Sanitized HTML allowlist | | [XML](#any-xml) | Any `.xml` file: sections, label/value fields, record tables, links | | [TEI XML](#tei-xml-84000-translations) | 84000 Buddhist-translation format; headings, paragraphs, verse, footnotes | | [JSON and YAML](#data-files-json-and-yaml) | Any `.json`, `.yaml`, or `.yml` file, read by the same shape rules as XML | | [Email](#email-eml) | Any `.eml`, `.mht`, or `.mhtml` file: headers, the message body, inline images, attachments | | [Encodings](#file-encodings) | UTF-8, UTF-16 and UTF-32 by their byte order mark; saved back as they were read | ## Pipeline ```mermaid flowchart LR A[Markdown file] --> B[pulldown-cmark] B --> C[GitHub-style extras] C --> D[ammonia sanitizer] D --> E[Rendered document in Leaftext] F[XML file] --> G[roxmltree DOM] G --> H{TEI?} H -->|yes| I[TEI renderer] H -->|no| J[Generic XML renderer] I --> E J --> E K[JSON or YAML file] --> L[Ordered value tree] L --> M[Data renderer] M --> E N[Email file] --> O[mail-parser MIME tree] O --> P[Email renderer] P --> D ``` ## Headings All six ATX heading levels render: # H1 heading ## H2 heading ### H3 heading #### H4 heading ##### H5 heading ###### H6 heading Every heading gets a slug `id`, so `#slug` links and the [outline](02-navigation.md#outline) resolve against it. Blocks carrying an explicit author-supplied `id` keep theirs — see [Inline HTML](#inline-html). ## Text formatting - *Italic* and _italic_ - **Bold** and __bold__ - ***Bold italic*** - ~~Strikethrough~~ (GFM) - `inline code` - Inline footnote reference[^demo] A trailing backslash forces a hard line break,\ so this sentence continues on the next line. ## Lists Unordered, with nesting: - Leaves - Simple - Compound - Stems - Roots Ordered lists nest into a classic outline (I, A, 1, a, i): 1. Trees 1. Broadleaf 1. Deciduous 1. Maple 1. Sugar maple 2. Red maple 3. Silver maple 2. Oak 2. Evergreen 1. Holly 2. Needleleaf 1. Pine 2. Shrubs 3. Ground cover ## Blockquotes and alerts A blockquote, nested: > "Read deeply, not widely." > > > A leaf within a leaf. GitHub-style alerts render with theme-aware colors (all five): > [!NOTE] > Leaftext renders Markdown — it never edits it. > [!TIP] > Search every leaf in your library with a keystroke. > [!IMPORTANT] > Pages render entirely on your machine. No network. > [!WARNING] > A reader, not an editor. > [!CAUTION] > A stray `---` mid-page is a horizontal rule, not frontmatter. Standard blockquotes also use a hanging indent for each authored line, so when a long quoted line wraps in the reader the continuation stays inset and you can distinguish a soft wrap from a Markdown hard line break. ## Code Language-tagged fenced code blocks get syntax coloring, a language badge, and a Copy button. Hover a block to reveal the button. A line too long for the column scrolls sideways inside the block; the badge and the Copy button stay put while it does, and the block itself keeps the reading column's left edge. ```rust /// Extract the leading frontmatter block, if any. pub fn extract_frontmatter(text: &str) -> Option { let text = text.strip_prefix('\u{feff}').unwrap_or(text); let mut lines = text.lines(); if lines.next()?.trim_end() != "---" { return None; } let mut body = String::new(); for line in lines { if line.trim_end() == "---" { return Some(FrontmatterBlock { body }); } body.push_str(line); body.push('\n'); } None } ``` A plain fence renders as monospace with no colors: ``` no language, no highlighting ``` Supported language tags include `ts`, `tsx`, `js`, `jsx`, `json`, `html`, `css`, `scss`, `md`, `bash`, `zsh`, `yaml`, `toml`, `xml`, `ini`, `rust`, `python`, `sql`, `diff`, `dotenv`, `dockerfile`, `graphql`, and plain text. ## Tables GFM tables with a header row and a body: | Feature | Syntax | Supported | | ------------- | -------------- | --------- | | Tables | `\| a \| b \|` | ✅ | | Strikethrough | `~~text~~` | ✅ | | Task lists | `- [ ] item` | ✅ | | Autolinks | bare URLs | ✅ | A table cell whose entire content is a task-list marker — `[ ]` or `[x]` — renders as a checkbox, so a table can carry a status column: | Step | Done | | --------------- | ----- | | Render a page | [x] | | Search files | [x] | | Edit the source | [ ] | ## Task lists - [x] Render a page - [x] Search the library - [ ] Reformat the source on save (out of scope — edits are saved verbatim) ## Links and autolinks - Inline link: [the Leaftext repo](https://github.com/ryanallen/leaftext) - Reference link: [CommonMark][cm] - Relative link to a sibling page: [Navigation](02-navigation.md) - In-page link back to the [top](#rendering) - Bare URL autolink: https://github.com/ryanallen/leaftext - www autolink: www.example.com - Email autolink: hello@example.com [cm]: https://commonmark.org ## Buttons (Leaf extension) This one is a Leaftext addition, not standard Markdown. Wrap an ordinary inline link in braces and it renders as a button styled like the app's action controls, linking wherever the link points. The more braces, the more prominent the button: | Style | Syntax | Looks like | | --- | --- | --- | | Ghost | `{[Label](url)}` | No fill or outline until hover | | Outline | `{{[Label](url)}}` | Outline, fills on hover | | Filled | `{{{[Label](url)}}}` | Filled | {[Ghost](https://github.com/ryanallen/leaftext)} {{[Outline](https://github.com/ryanallen/leaftext)}} {{{[Filled](https://github.com/ryanallen/leaftext)}}} Each is just a normal `[label](url)` link with braces around the whole thing. The wrapper is braces only — brackets are link syntax, so `[[Label](url)]` is a plain link between two square brackets, not a button. The braces must balance: `{{…}` is prose and stays as written. The label may hold inline formatting, and the button follows a link like any other (external URLs open in your browser, relative `.md` paths open in the reader). Written inside code the wrapper stays literal, so this page can show the syntax without turning it into a button. ## Images Image paths are resolved against the open file: relative paths (including `../` at any depth), absolute paths, and `file://` URLs all load. The title shows on hover: ![Leaftext](../../imgs/leaftext.png "Leaftext — refine your mind") Allowed image types include SVG, PNG, JPEG, GIF, APNG, AVIF, BMP, ICO, and WebP. Every local picture is measured as the page is built — its size comes out of its own header — so the space it needs is held before it decodes and the words around it never jump. A picture Leaftext cannot find keeps its place too, marked with one glyph in the page's ink, with its alt text on hover. The same mark shows on both platforms. Images always show the file that is on disk. Overwriting one refreshes it in the open document straight away ([Reload](02-navigation.md#reload)), and every rerender re-reads them, so a replaced picture never lingers as a cached copy. A missing one that later appears is found by that same refresh. ## Math Inline math uses `$…$`: the mass–energy equivalence is $E = mc^2$. Display math uses `$$…$$`: $$ \int_{a}^{b} f(x)\,dx = F(b) - F(a) $$ ## Mermaid diagrams `mermaid` fences are rendered with the bundled Mermaid runtime, fully offline. If Mermaid fails, Leaftext leaves the source visible instead of a blank block. A page of many diagrams draws them a few at a time, nearest what you are reading first, so the window stays yours while the rest of the page fills in. Diagrams take your theme's colors and body font — boxes the theme's muted surface, subgraphs its sunken one, arrows its muted ink, and a Gantt chart the theme's own active, done and critical colors. Switch theme and every diagram on the page is redrawn to match. The twelve-color scale a mindmap or pie chart cycles through is your theme's primary hue turned around the wheel, as described in [Themes → Diagrams](06-themes.md#diagrams). Three details worth knowing. Clicking a diagram on an unlocked page swaps it for the Mermaid behind it, so a diagram is editable in place like any other block ([Editing](07-editing.md)). Hovering one also shows a small button in its corner, which opens it in [the flowchart editor](07-editing.md#the-flowchart-editor) — a canvas beside the Mermaid text, for drawing a flowchart rather than typing it. And a `---` front-matter block inside a `mermaid` fence is stripped before the diagram is drawn, so `title:` and `config:` written that way have no effect — use a `%%{init: { ... }}%%` line instead. ```mermaid flowchart TD A[Open file] --> B{Frontmatter?} B -- yes --> C[Parse fields] B -- no --> D[Index body only] C --> E[Filter library by field] D --> E ``` ```mermaid sequenceDiagram participant UI participant Reader UI->>Reader: getFolder { path } Reader-->>UI: leafSetLibraryFolder(listing) ``` ## Emoji Leaftext renders GitHub shortcodes: - `:rocket:` → :rocket: - `:tada:` → :tada: - `:warning:` → :warning: - `:white_check_mark:` → :white_check_mark: - `:shipit:` → :shipit: ## GitHub references Inside a Git repo, issue and PR references link to the repo; @mentions are highlighted: - Issue or PR: #1, GH-2 - Cross-repo issue: ryanallen/leaftext#3 - Mention: @ryanallen - Team mention: @ryanallen/maintainers Bare commit hashes are **not** linked. GitHub turns any run of 7 or 40 hex characters into a commit link, so a color like `f0f0f0f` becomes a link to a commit that probably does not exist. Hex is too ordinary to claim. Write the link yourself when you want one. ## Footnotes Footnotes collect at the foot of the page, each with a back-link.[^one] Reference one twice[^one] or add more.[^two] [^demo]: Referenced from the *Text formatting* section. [^one]: Click the back-arrow to jump back. [^two]: With `inline code` and a [link](https://commonmark.org). ## Frontmatter A leading `--- … ---` block becomes a metadata table at the top of the page: ```yaml --- title: Launch Notes # key: value scalar status: draft # strings, booleans, numbers, dates → text audience: [readers, testers] # inline array → one row per item tags: # block list → one row per item - markdown - demo created: 2026-06-14 pinned: true --- ``` …renders as this table (list values expand to one row each):
titleLaunch Notes
statusdraft
audiencereaders
audiencetesters
tagsmarkdown
tagsdemo
created2026-06-14
pinnedtrue
- Only the **leading** block counts; a later `---` is a horizontal rule. - Malformed frontmatter still renders — just without the table. ## Collapsible sections `
` / `` fold content away. Add `open` to start expanded.
Open by default — click to collapse Folded content holds full Markdown: **formatting**, Ctrl, and a list. - A leaf - A page
Closed by default — click to expand Tucked away until you open it.
## Inline HTML Leaftext sanitizes raw HTML with `ammonia`: a curated set of **safe** tags is allowed; the rest is stripped, keeping the inner text. Beyond plain Markdown: inserted, struck, and highlighted text. Water is H2O and 210 = 1024. Press Ctrl + F to search. An HTML abbreviation shows its title on hover. Definition list:
Leaf
A page, rendered for reading.
Frontmatter
Metadata at the top of a page.
`align` on `
`, `

`, and headings (`

`–`

`) controls horizontal alignment:
Centered block

Right-aligned paragraph

Centered heading

Accepted values: `left`, `center`, `right`, `justify`. Note: `align` is stripped from `
` — it is not in the allowlist for that tag. An `id` on a `
`, `

`, ``, or a heading (`

`–`

`) creates a named anchor with a stable, author-controlled address for deep-linking (the sanitizer keeps `id` only on those tags):

Foreword

Link to it from anywhere on the same page: `[Foreword](#foreword)`. Headings are addressable this way without any markup of your own — each gets a slug `id` from its text. `
` forces a line break inside a paragraph without starting a new block: Line one.
Same paragraph, next line. Markdown italic can wrap an HTML heading — useful for centering and italicising a title together: *

Words of My Perfect Teacher

* Stripped for safety: `