logo svelte /markdown v1.6.0
FIG-001/ EXTENSION

prettier walktokens.

Add prettier to any code fence and the marked-code-format extension auto-formats it through Prettier — async walkTokens callback, no custom renderer needed.

  • marked-code-format registers an async walkTokens callback that runs Prettier on every code fence with the prettier info-string marker.
  • Prettier loads lazily — only when a fence opts in. No bundle cost when you're not using it.
  • Best when you ingest raw, unformatted code (e.g. agent output) and want consistent code-block presentation.
↩ all examples
technique · extension mode · live running source
Loading formatter…
category · extension
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ SNIPPET

snippet override.

Use an inline {#snippet code} to control the code block markup — language badge in the corner, brut chrome around the body. Receives { lang, text } props.

  • {#snippet code({ lang, text })} receives the parsed language + body. Wrap it in any chrome you want — language badge, copy button, line numbers.
  • Pairs nicely with the extension above: format with marked-code-format, then present with the snippet.
↩ all examples
technique · inline snippet mode · live running source

Code Block Styling

Customize code block rendering without an extension — just an inline {#snippet code} block.

JavaScript

js
function fibonacci(n) {
    if (n <= 1) return n
    return fibonacci(n - 1) + fibonacci(n - 2)
}

const result = fibonacci(10)
console.log(result)

CSS

css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

TypeScript

ts
interface User {
    name: string
    age: number
    email?: string
}

const greet = (user: User): string =>
    `Hello, ${user.name}! You are ${user.age} years old.`

Bash

bash
pnpm add @humanspeak/svelte-markdown

Tip: The snippet gets { lang, text } so the language label can drive per-language styling.

category · snippet
sheet · sheet 02 / 02
⟳ to re-run

Code Formatting