> Source URL: /markdown.demo
[@message]: ./tags/pathmx.tags.md
[@layout]: ./tags/layout.tags.md
[@why]: ./guides/why.guide.md
[@demo-image]: https://placehold.co/960x360/1f2937/f9fafb.png?text=PathMX+Markdown

# 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.

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

---

# Document Metadata

The file begins with YAML frontmatter:

```yaml
---
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:

```md
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

## 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:

1. Draft the source
2. Preview the page
3. Publish the build

Mixed nesting:

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

---

# Task Lists

GFM task lists are enabled.

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

Tasks can contain rich inline content:

- [ ] Review **bold notes**, `code`, [links](./demos/task-lists.demo.md),
      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.

- [Internal source link](./demos/task-lists.demo.md)
- [Internal link with hash](./index.path.md#examples-and-demos)
- [Internal link with query params](./CCSCNE/talk.slides.md?play=1#slide-2)
- [External link](https://example.com)
- [Email link](mailto:hello@example.com)
- [Reference-style link][@why]
- [Shortcut reference][@why]

PathMX action prefixes add link intent:

- [button:: Button-style internal link](./demos/task-lists.demo.md)
- [download:: Download the PathMX paper](./files/pathmx-paper.pdf)

[embed:: Embed the datatype demo](./demos/datatype.demo.md)

---

# Images

Inline image:

![PathMX markdown placeholder](https://placehold.co/960x360/111827/f9fafb.png?text=Inline+Image)

Reference image:

![Reference image][@demo-image]

Images can also be linked:

[![Linked image](https://placehold.co/720x240/0f766e/ffffff.png?text=Linked+Image)](https://pathmx.dev)

---

# 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](./index.path.md), and {p:72}.

---

# Code

Fenced code blocks render with language classes:

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

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

Diff-style fences:

```diff
- 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.

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

---

# Autolinks And Raw HTML

Autolinks:

- <https://pathmx.dev>
- <hello@example.com>

Raw HTML passes through markdown rendering:

<details>
  <summary>Details element</summary>
  <p>This content is authored as raw HTML inside markdown.</p>
</details>

HTML comments are useful in source and do not render:

<!-- This comment is intentionally invisible in the rendered page. -->

---

# Math

Inline math is written with dollar signs: $E = mc^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.

```mermaid
graph TD
  A[Markdown source] --> B[Bun.markdown]
  B --> C[PathMX plugins]
  C --> D[HTML artifacts]
```

---

# 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:

```md
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`.

<message>
This message is a custom tag. Its children can still contain **markdown**,
`inline code`, and [external links](https://example.com).
</message>

<hstack gap="6">
  <box class="flex-1 p-4 border rounded-lg">

## Left Box

The `box` tag yields markdown children into a template.

  </box>
  <box class="flex-1 p-4 border rounded-lg">

## Right Box

The `hstack` tag controls layout with template props.

  </box>
</hstack>

---

title: Block Topmatter Example
description: This metadata belongs to this PathMX block, not to the whole document.

# 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].

[^syntax]: Footnotes support inline markdown such as **bold**, `code`, and [external links](https://example.com).


---

## Backlinks

The following sources link to this document:

- [Markdown Demo](/index.path.llm.md)