Markdown Demo

PathMX content starts as ordinary markdown. The core renderer is Bun.markdown with GitHub-flavored features enabled, then PathMX adds source metadata, block splitting, canonical links, custom tags, and build-time transforms.

This file is a working sampler. View the source beside the rendered page to see how each example is authored.

PathMX uses blank-surrounded --- lines as block dividers. For a rendered horizontal rule, use another markdown rule form such as ***.

Document Metadata

The file begins with YAML frontmatter:

---
title: Markdown Demo
description: A compact tour of PathMX markdown, Bun.markdown GFM rendering, and a few PathMX extensions.
---

PathMX also supports compact topmatter at the start of individual blocks:

title: Block Title
description: Block-level metadata

## The block content starts after the blank line

Headings

PathMX recognizes ATX headings for navigation and block titles. Use a blank line before and after headings so they are picked up cleanly.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Duplicate heading text receives unique generated ids.

Duplicate

Paragraphs And Inline Text

A paragraph is one or more lines of text. Because PathMX enables hard soft breaks, this line break stays visible in rendered output.

Use bold, italic, bold italic, ~~strikethrough~~, inline code, and highlighted text.

Literal markdown can be escaped: *not emphasized*, [not a link], and `not code`.

Thematic breaks render with ***:

The line above is an actual markdown horizontal rule.

Lists

Unordered lists:

Apples
Oranges
- Blood orange
- Cara cara
Pears

Ordered lists:

Draft the source
Preview the page
Publish the build

Mixed nesting:

Install PathMX
- Run the CLI
- Open the player
Create content
- Link related sources
- Add metadata when it helps

Task Lists

GFM task lists are enabled.

Unchecked task
Completed task
Also completed
[~] PathMX parser status: pending
[-] PathMX parser status: skipped

Tasks can contain rich inline content:

Review bold notes, code, links, math $a^{2} + b^{2} = c^{2}$ , and highlighted labels.

Blockquotes

Markdown is plain text with structure.

Quotes can contain lists.

Quotes can contain inline code.

Nested quotes work too.

Links

PathMX rewrites local source links to canonical routes and marks external links for a new tab.

PathMX action prefixes add link intent:

Datatype Demo

Datatype turns compact text expressions into small inline charts. PathMX authors can keep the source readable while adding quick visual signals directly in prose, lists, and tables.

Inline Signals

Course confidence is trending up {l:18,24,35,44,51,67,76,82}, but the latest quiz still has a few uneven spots {b:35,80,55,92,68}.

The completion slice for this module is {p:72}.

Learning Snapshot

Signal	Datatype	Note
Weekly participation	{l:32,40,38,56,68,74,81}	Slow start, steady finish
Lab completion	{b:92,86,88,94,90}	Consistently high
Current mastery	{p:64}	Room for review before assessment

Authoring Source

The charts above are authored as ordinary markdown text:

Course confidence is trending up {l:18,24,35,44,51,67,76,82}
Lab completion {b:92,86,88,94,90}
Current mastery {p:64}

Because the syntax stays text-first, the source remains legible to people, search tools, and agents.

Images

Inline image:

Reference image:

Images can also be linked:

Tables

GFM tables are enabled.

Feature	Syntax	Notes
Tables	`table syntax`	Alignment is supported
Tasks	`- [ ]`	Rendered as checkboxes
Autolinks	`<https://example.com>`	Direct URL support
Math	$x^2$	Rendered by the PathMX math plugin

Inline formatting inside table cells also works: bold, code, links, and {p:72}.

Code

Fenced code blocks render with language classes:

type SourceStatus = "draft" | "preview" | "published"

const publishable = (status: SourceStatus) => status !== "draft"

Diff-style fences:

- const renderer = "custom"
+ const renderer = "Bun.markdown"

Four-space indented code blocks are disabled in PathMX's Bun markdown options, so prefer fenced code blocks.

```python
print("Use fences for code")
```

Autolinks And Raw HTML

Autolinks:

Raw HTML passes through markdown rendering:

Details element

This content is authored as raw HTML inside markdown.

HTML comments are useful in source and do not render:

Math

Inline math is written with dollar signs: $E = m c^{2}$ .

Display math uses double dollar signs:

\sum_{i = 1}^{n} i = \frac{n (n + 1)}{2}

Currency is not treated as math: $19.99 remains ordinary text.

Mermaid

Mermaid code fences are rendered to diagrams at build time.

Datatype Inline Charts

The datatype plugin turns compact text expressions into inline visual signals.

Sparkline: {l:18,24,35,44,51,67,76,82}

Bars: {b:35,80,55,92,68}

Pie: {p:72}

They stay readable in source:

Sparkline: {l:18,24,35,44,51,67,76,82}
Bars: {b:35,80,55,92,68}
Pie: {p:72}

Custom Tags

Custom tags are authored in .tags.md files and imported with reference links near the top of this file. The examples below come from pathmx.tags.md and layout.tags.md.

This message is a custom tag. Its children can still contain markdown, inline code, and external links.

Left Box

The box tag yields markdown children into a template.

Right Box

The hstack tag controls layout with template props.

Block Topmatter Example

This block starts with implicit topmatter. PathMX removes those key-value lines from the rendered block and stores them as block metadata.

Footnotes

PathMX includes a small footnote transform. A reference like this one^[syntax] is converted into a linked note section.

The same note can be referenced again^[syntax].

Footnotes support inline markdown such as bold, code, and external links. ↩︎