Rougher Stuff

@rougher-stuff/markdown

Write the intent.
Draw the emphasis.

Extend familiar Markdown with highlights, semantic roles, annotated sections, and connected notes—without turning the document into presentation code.

Try it live
A MARKDOWN DIALECT FOR HUMAN SIGNAL

:highlight[the useful part]

:warning[breaking change]

:::box{padding=8}

syntax → AST → DOM → drawing

01 / Live document

Markdown in. Human signal out.

Edit the source. The parser creates first-class annotation nodes, then the existing Rough Notation runtime measures and draws the result.

SOURCE.MD READY
RENDERED DOCUMENT
Normalized AST roughAnnotation

02 / One grammar

Visual when you mean it.
Semantic when you don't.

Appearance directives are explicit. Semantic directives defer color and shape to the active theme.

01 / Appearance :underline[important]{color=#bd4c31}

Choose the primitive, then tune only the attributes the document needs.

02 / Semantics :warning[Deprecated API]

Keep meaning in the source and let a reusable theme choose the treatment.

03 / Sections :::mark{type=box}
## Whole section
:::

Measure a complete Markdown block instead of flattening it into inline text.

04 / Relations :ref[target]{id=api}
:::callout{for=api}

Connect explanatory content to its target with stable document identifiers.

03 / Progressive by design

The document works before the drawing does.

Safe semantic HTML is the baseline. Geometry and hand-drawn SVG arrive as progressive enhancement after layout.

Read the package docs
  1. 01MarkdownCommonMark + GFM directives
  2. 02mdastnormalized annotation nodes
  3. 03HTMLsafe semantic fallback
  4. 04Rough DOMmeasured marks and callouts

Start with one mark

Let the source carry intent.
Let the renderer carry style.

pnpm add @rougher-stuff/markdown @rougher-stuff/roughjs