Examples / Code Formatting

Code Formatting

Live Prettier formatting powered by marked-code-format — an async walkTokens extension. Add the prettier attribute to any code fence to auto-format it.

Install Dependencies

marked-code-format and prettier are not bundled — install them separately: npm install marked-code-format prettier

Async Extension (No Renderers Needed)

marked-code-format uses an async walkTokens callback to format code with Prettier. SvelteMarkdown detects the async: true flag and awaits the transformation before rendering — no custom renderers required.

Editor

852 characters

Preview

Extension Code

<script lang="ts">
  import SvelteMarkdown from '@humanspeak/svelte-markdown'
  import markedCodeFormat from 'marked-code-format'
  // Prettier standalone requires explicit parser plugins
  import prettierBabel from 'prettier/plugins/babel'
  import prettierEstree from 'prettier/plugins/estree'
  import prettierCss from 'prettier/plugins/postcss'
  import prettierTs from 'prettier/plugins/typescript'

  const source = '\`\`\`js prettier\nconst x={a:1,b:2}\n\`\`\`'

  const extensions = [
    markedCodeFormat({
      plugins: [prettierBabel, prettierEstree, prettierCss, prettierTs]
    })
  ]
</script>

<SvelteMarkdown {source} {extensions} />