JAAMD

Markdown syntax

JAAMD extends CommonMark and GitHub Flavored Markdown with the blocks below. Every one of them can be turned off in the plugins option.

Alerts

GitHub-style blockquote alerts, in five variants:

> [!NOTE]
> Useful information the reader should know.

> [!TIP]
> Helpful advice.

> [!IMPORTANT]
> Key information required to succeed.

> [!WARNING]
> Urgent information needing immediate attention.

> [!CAUTION]
> Advises about risks or negative outcomes.

Code tabs

Group several code blocks into a tabbed panel. The text after the language is used as the tab label; it falls back to the language, then to Tab N.

:::code-tabs
```bash npm
npm install
```

```bash pnpm
pnpm install
```
:::

Table of contents

A :::toc block wraps the list you write in a navigation landmark. Nothing is generated: entries, order, wording and depth are whatever the markdown says. The text in brackets is an optional title.

:::toc[On this page]
- [Installation](#installation)
- [Setup](#setup)
    - [Integration options](#integration-options)
:::

It renders as:

<nav class="jaamd-toc" aria-label="On this page">
    <p class="jaamd-toc-title">On this page</p>
    <ul>
        …your list…
    </ul>
</nav>

The title is a <p>: out of getHeadings(), no anchor icon. A - list loses its bullets, 1. keeps the numbers. Entries are plain anchors and navigate with JavaScript disabled; with it, the entry whose section is on screen is marked aria-current="location".

Writing the anchors

Heading ids come from Astro, slugged with github-slugger:

Heading Anchor
## Getting started #getting-started
## Details / accordion #details--accordion (one dash per space, the / dropped between them)
## What's new? #whats-new (punctuation removed, not replaced)
## snake_case #snake_case (underscores survive)
a second ## Setup #setup-1

The client-side fallback follows the same rules, so ids match for markdown that never went through Astro’s pipeline (set:html, HTML from a CMS).

With a sticky header, raise --jaamd-scroll-margin-top (default 80px).

NOTE

:::toc needs the directive syntax, on by default. With features: { toc: false } the block degrades to a plain <div>: list and links intact, unstyled.

Spoilers

Text hidden until the reader activates it, inline or as a block:

:spoiler[The butler did it.]

:::spoiler
A whole paragraph, hidden.
:::

In HTML you write yourself, the class is jaamd-spoiler.