Skip to content

Markdown

Renders untrusted Markdown (a skill’s SKILL.md) as elements: headings, lists, quotes, code, emphasis and safe links. Never innerHTML.

DataServer-rendered

Examples

A SKILL.md body

Fenced code becomes a CodeBlock; # maps to h2 by default because the page owns the h1.

Fill PDF forms

Use pdftk to fill a form from structured data, then flatten it. See the pdftk manual.

Steps

  1. Export the field names with dump_data_fields.
  2. Write an FDF file.
  3. Fill and flatten:
shellshell
pdftk form.pdf fill_form data.fdf output filled.pdf flatten

Keep the original form; flattening cannot be undone.

Example
<Markdown source={parseSkillMd(content).body} />

Unsafe input

Raw HTML shows as text, javascript: links lose their link, and images show their alt text instead of loading.

<script>alert(1)</script> click) tracker

Example
<Markdown source={'<script>alert(1)</script> [click](javascript:alert(1)) ![tracker](https://t.example/p.png)'} />

Usage

Usage
import { Markdown } from '@switchboard/ui'

<Markdown source={skill.body} headingBase={2} />

Props

Every component also takes mix, for css() and mixins applied after its own style.

Markdown

Markdown props
PropTypeDefaultDescription
source*string–Markdown text. Strip frontmatter first (parseSkillMd does).
headingBase2 | 3 | 42Heading level that # maps to; deeper levels follow, capped at h6.

Also accepts every <div> attribute.

Accessibility

  • Headings start at h2 so the page keeps one h1; pass headingBase={3} when the Markdown sits under an h2.
  • External links open in a new tab, say so to screen readers, and carry rel="noreferrer nofollow".
  • Code blocks are focusable, labelled scroll regions (see CodeBlock).

Guidance

Do

  • Use it for content people upload: skills, notes, descriptions.
  • Strip YAML frontmatter before rendering.

Don’t

  • Use it for the app’s own copy; write components.
  • Expect tables, HTML or images: they render as text.