xhtmlmd feature sample

This page is written as a tour of the Markdown features supported by xhtmlmd. Each section starts with the Markdown source, then shows the same source rendered.

Headings, paragraphs, and inline formatting

### Project notes {#project-notes .section-title}

This paragraph uses *emphasis*, **strong emphasis**, `inline code`,
~~deleted text~~, ==highlighted text==, E=mc^2^, and H~2~O.

Project notes

This paragraph uses emphasis, strong emphasis, inline code, deleted text, highlighted text, E=mc², and H₂O.

Links, images, and autolinks

[fast.ai](https://www.fast.ai/){.external rel="nofollow"} is a normal link
with attributes.

Bare links such as https://example.org/docs are linked automatically.
Angle links work too: <https://example.com/spec>.

![A small placeholder image](https://dummyimage.com/96x48/eeeeee/333333.png&text=demo){.thumbnail width="96" height="48"}

fast.ai is a normal link with attributes.

Bare links such as https://example.org/docs are linked automatically. Angle links work too: https://example.com/spec.

Lists and tasks

- Write the outline
- Check the examples
  - Keep them short
  - Keep them readable

1. Parse the Markdown
2. Render XHTML
3. Add a stylesheet

- [x] Tables
- [x] Footnotes
- [ ] Final polish

• Write the outline
• Check the examples
  • Keep them short
  • Keep them readable

1. Parse the Markdown
2. Render XHTML
3. Add a stylesheet

• Tables
• Footnotes
• Final polish

Block quotes and rules

> A block quote can contain normal inline Markdown.
>
> - It can also contain lists.
> - This is useful for callouts and quoted notes.

A block quote can contain normal inline Markdown.

• It can also contain lists.
• This is useful for callouts and quoted notes.

Tables

| Feature | Status | Notes |
|:--------|:------:|------:|
| Tables | ready | aligned columns |
| Math | ready | brackets mode |
| HTML | ready | raw or markdown-enabled |

Code

Inline code uses backticks, as in `Options::default()`.

``` rust {#example-code .numberLines startFrom="10"}
fn main() {
    println!("hello from xhtmlmd");
}
```

    let indented_code = true;

Inline code uses backticks, as in Options::default().

fn main() {
    println!("hello from xhtmlmd");
}

let indented_code = true;

Math in brackets mode

Inline math uses TeX parentheses: \(a^2 + b^2 = c^2\).

Display math uses TeX brackets:

\[
\int_0^1 x^2\,dx = \frac{1}{3}
\]

Inline math uses TeX parentheses: a^2 + b^2 = c^2.

Display math uses TeX brackets:

Attributes and spans

This paragraph gets attributes from the following block IAL.
{: #important-note .lead data-kind="sample"}

{:reusable: .note data-role="demo"}
This paragraph uses a named attribute list.
{: reusable #named-attribute-example}

Bracketed spans work too: [small but important]{.small .important}.
Code spans can have attributes: `render()`{.api-call}.

This paragraph gets attributes from the following block IAL.

This paragraph uses a named attribute list.

Bracketed spans work too: small but important. Code spans can have attributes: render().

Definition lists

xhtmlmd
: A Markdown parser that renders XHTML fragments.

brackets math
: Math mode that recognizes `\(...\)` and `\[...\]`.

fenced div
: A Pandoc-style block container opened with colons.

xhtmlmd

A Markdown parser that renders XHTML fragments.

brackets math

Math mode that recognizes \(...\) and \[...\].

fenced div

A Pandoc-style block container opened with colons.

Footnotes

A short note can point to a footnote.[^sample-note]

[^sample-note]: Footnotes can contain *inline Markdown* and links such as
    <https://example.org/>.

A short note can point to a footnote.¹

Abbreviations

The HTML5 standard changed the web.

*[HTML5]: HyperText Markup Language, version 5

The HTML5 standard changed the web.

Fenced divs

::: {#tip-box .callout .tip kind="tip"}
### A fenced div

Fenced divs are useful for notes, cards, columns, and other styled sections.
They can contain normal **Markdown**.
:::

Raw HTML

<section class="raw-panel">
<h3>Raw HTML section</h3>

<p>Raw HTML can stay open across blank lines until its matching close tag.</p>
</section>

Markdown inside HTML

<div markdown="1" class="markdown-panel">

### Markdown parsed inside HTML

- **Bold list item**
- `Code span`
- Inline math: \(x + y\)

</div>