[@layout]: ../docs.layout.md
# Markdown
Ordinary Markdown renders as semantic HTML. Core's standard Plugins also support
tables, highlighted code, MathML, task lists, definition lists, and inline charts.
Use the extended syntax below without installing another package.
```md live
| Operator | Reads as |
| -------- | -------- |
| $\land$ | and |
| $\lor$ | or |
- [x] Read the table
- [ ] Try inline math like $p \Rightarrow q$
Source
: One Markdown file under `paths/`.
```
| Operator | Reads as |
| -------- | -------- |
| $\land$ | and |
| $\lor$ | or |
- [x] Read the table
- [ ] Try inline math like $p \Rightarrow q$
Source
: One Markdown file under `paths/`.
---
## Code examples
Code fences take a language and optional flags:
````md
```js no-copy
console.log("highlighted, without a copy button")
```
````
```js no-copy
console.log("highlighted, without a copy button")
```
Long code blocks preview the first 30 lines. Choose **Show all … lines** to expand
and **Show less** to collapse; copying always includes the complete code.
Use `collapse=false` to keep a fence fully expanded, or `collapse` / `collapse=true`
to explicitly enable the default. Short fences have no toggle.
---
## Reveal code one step at a time
Create a code fence with line groups separated by `|`. This example first focuses
the function, then its invocation when played:
````md
```js [1-3|5]
function greet(name) {
return `Hello, ${name}`
}
greet("Ada")
```
````
```js [1-3|5]
function greet(name) {
return `Hello, ${name}`
}
greet("Ada")
```
Use [Player setup](../learning/player.reference.md#try-a-two-block-lesson) to try
it in your own page. In ordinary reading the full code remains available.
---
## Show an equation or a small chart
Display math uses its own `$$` lines; inline math uses `$…$`:
```md
$$
a^2 + b^2 = c^2
$$
Daily visits {b:20,50,30,80}; weekly trend {l:20,50,30,80}; progress {p:72}.
```
$$
a^2 + b^2 = c^2
$$
Daily visits {b:20,50,30,80}; weekly trend {l:20,50,30,80}; progress {p:72}.
The equation renders as MathML. The charts show four bar heights, a four-point
line, and 72 percent. Chart values use a fixed 0–100 scale; values near zero
render close to the baseline. Keep their meaning in the surrounding text so readers do
not need the graphic alone to understand the values.
---
## Let a custom region own its presentation
Use `data-pmx-prose="off"` on an authored HTML region when you supply its layout
and typography:
```html
```
Its subtree opts out of prose styling and automatic prose-link previews. Links
still navigate; author any custom context or preview behavior deliberately. See
[Themes](../site/themes.reference.md) for theme tokens rather than hard-coded colors.
---
## Contract
| Syntax | Result |
| ---------------------------- | ------------------------------------------------------------------ |
| Pipe table | Scrolls horizontally when narrow; the first column stays in view. |
| ```` ```lang ```` | Syntax highlighting for common languages, with a copy button. |
| ```` ```lang collapse=false ```` | Always show the full code block. |
| ```` ```lang no-copy ```` | No copy button. `no-select` also disables text selection. |
| ```` ```lang [1-3\|5] ```` | Line steps revealed one at a time by the Player. |
| `$…$` and `$$…$$` | Inline and display math rendered to MathML. |
| `- [ ]` and `- [x]` | Task list. Tasks are indexed and available to Completion. |
| `Term` then `: definition` | Definition list. |
| `{b:1,2,3}` `{l:1,2,3}` `{p:72}` | Inline bar, line, and percent charts. |
| `data-pmx-prose="off"` | Attribute on an HTML element that opts its subtree out of prose styling. |
## Notes
- `plain`, `plaintext`, and `text` fences are never highlighted.
- Inline code and fenced code are never parsed for math or charts.
## Related
- [Callouts](./callouts.reference.md) · [Blocks](./blocks.reference.md)
- Examples: [tables](../../examples/tables.demo.md), [code highlight](../../examples/code-highlight.demo.md), [math](../../examples/math.demo.md), [tasks](../../examples/tasks.demo.md), [datatype](../../examples/datatype.demo.md)