svelte-exmarkdown

The library is built on top of the unified ecosystem. The rendering process follows this pipeline:

1. Markdown String is parsed by remark-parse into an mdast (Markdown Abstract Syntax Tree).
2. remarkPlugins process the mdast.
3. remark-rehype converts the mdast into a hast (Hypertext Abstract Syntax Tree).
4. rehypePlugins process the hast.
5. hast-component-mapping maps the hast nodes to specific SvelteComponents for final rendering.

Because it uses unified, you can use any standard remark or rehype plugins.

You can control which Markdown elements are permitted to render using the allowlist and denylist props.

• denylist: A list of element names that should be explicitly excluded from rendering.
• allowlist: A list of element names that are permitted to render; any element not in this list will be skipped.

You can customize how the markdown is rendered by providing snippets. This allows you to override default rendering behavior for specific elements. Additionally, you can apply custom class names and styles to the rendered output.

<ExMarkdown>
  <svelte:fragment slot="snippet">
    <!-- Custom snippet implementation here -->
  </svelte:fragment>
</ExMarkdown>

The Transparent component allows you to render content without adding an extra HTML wrapper element to the DOM. This is particularly useful when you need to disable specific Markdown syntax or when you want to maintain a specific DOM structure that doesn't allow for additional nesting.

:transparent

You can use the Shiki syntax highlighter within svelte-exmarkdown by using specific shorthand directives.

By default, Shiki is used asynchronously. If your environment requires synchronous execution, use the -sync variant.

:shiki

Or for synchronous usage:

:shiki-sync

To prevent a specific Markdown element from being rendered in the DOM, pass null to the renderer prop of the component. This is useful when you want to intercept the rendering process or completely suppress certain elements.

<ExMarkdownRenderer {markdown} renderer={{ someElement: null }} />

You can install svelte-exmarkdown using npm, yarn, or pnpm depending on your preferred package manager.

npm install svelte-exmarkdown
# yarn add svelte-exmarkdown
# pnpm add svelte-exmarkdown

To render mathematical formulas in your markdown content using svelte-exmarkdown, you need to integrate the remark-math and rehype-katex plugins. remark-math handles the parsing of math syntax, while rehype-katex converts that syntax into HTML using KaTeX. Alternatively, you can use rehype-mathjax as a substitute for rehype-katex if you prefer MathJax rendering.

# You will need to install these plugins
npm install remark-math rehype-katex
# Or alternatively
npm install remark-math rehype-mathjax

By default, svelte-exmarkdown does not allow raw HTML in markdown input to prevent security vulnerabilities. If you trust your input source and need to render raw HTML, you can enable this functionality by using the rehype-raw plugin in your configuration.

// Example configuration concept
// Note: Actual implementation depends on how you pass plugins to svelte-exmarkdown
import rehypeRaw from 'rehype-raw';

// Use rehypeRaw in your plugin array to allow raw HTML

To add syntax highlighting to your markdown content in svelte-exmarkdown, you can use the rehype-highlight plugin. This is implemented as a plugin showcase feature within the library.

:code-highlight

Use the Markdown component to render markdown content dynamically. It accepts an md prop containing the markdown string. This component is designed for dynamic rendering scenarios where the markdown content might change at runtime (e.g., via a textarea binding).

<script>
	import Markdown from 'svelte-exmarkdown';
	let md = $state('# Hello world!');
</script>

<textarea bind:value={md}></textarea>
<Markdown {md} />