# Code Formatting > Format code blocks in @humanspeak/svelte-markdown with an async marked-code-format walkTokens extension or an inline Svelte 5 code snippet override. **Source:** [https://markdown.svelte.page/examples/code-formatting](https://markdown.svelte.page/examples/code-formatting) **Markdown mirror:** [https://markdown.svelte.page/examples/code-formatting.md](https://markdown.svelte.page/examples/code-formatting.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: 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. **Metadata:** tag: `EXTENSION` | technique: `extension` ### Notes - `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. ### Source #### PrettierExtension.svelte Source file: [src/lib/examples/code-formatting/demos/PrettierExtension.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/code-formatting/demos/PrettierExtension.svelte) ```svelte

{#if ready} {:else}

Loading formatter…

{/if}

``` ## FIG-002: 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. **Metadata:** tag: `SNIPPET` | technique: `inline snippet` ### Notes - `{#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. ### Source #### SnippetRendered.svelte Source file: [src/lib/examples/code-formatting/demos/SnippetRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/code-formatting/demos/SnippetRendered.svelte) ```svelte

{#snippet code(props: { lang: string; text: string })}

{#if props.lang}

{props.lang}

{/if}

{props.text}

{/snippet}

```