Svelte component to render markdown.
MIT License
Bot releases are hidden (Show)
Published by ssssota about 1 year ago
There are major changes in the plugin interface in this release, especially in the component renderers.
If you don't use any plugins, no migration is required.
If you are using the built-in GFM plugin, please make the following changes.
It is now a function and can pass options.
import { gfmPlugin } from 'svelte-exmarkdown/gfm';
...
- <Markdown md="# hello" plugins={[gfmPlugin]} />
+ <Markdown md="# hello" plugins={[gfmPlugin()]} />
You can still use remark/rehype plugins.
renderer
prop)This interface has breaking changes.
This makes customizing the renderer more intuitive than ever.
Previously, I recommended creating a "bridge component" when customizing the renderer.
However, starting with this release, this is no longer necessary.
e.g.
P.svelte
<script></script>
<p {...$$props}><slot /></p>
<style>p { color: red; }</style>
PBridge.svelte
<script lang="ts">
import P from './P.svelte';
import type { HastNode } from 'svelte-exmarkdown/types';
import Children from 'svelte-exmarkdown/renderer/Children.svelte';
export let tagName: string;
export let children: HastNode[] | undefined;
export let properties: Record<string, unknown>;
export let type: unknown = undefined;
export let position: unknown = undefined;
export let __index: unknown = undefined;
// HACK: ignore `unused-export-let`
type && position && __index;
</script>
{#if Array.isArray(children) && children.length !== 0}
<!-- prettier-ignore -->
<P {...properties}><Children {children} /></P>
{:else}
<!-- prettier-ignore -->
<P {...properties} />
{/if}
App.svelte
<script lang="ts">
import Markdown from 'svelte-exmarkdown';
import PBridge from './PBrdige.svelte';
let md = '# Hello';
const plugins = [{ renderer: { p: PBridge } }];
</script>
<Markdown {md} {plugins} />
P.svelte
<script></script>
<p {...$$props}><slot /></p>
<style>p { color: red; }</style>
App.svelte
<script lang="ts">
import Markdown from 'svelte-exmarkdown';
import P from './P.svelte';
let md = '# Hello';
const plugins = [{ renderer: { p: P } }];
</script>
<Markdown {md} {plugins} />
If you are using some properties of bridge component, you can get data by using the getAstNode()
function.
See the documentation for details.
Please feel free to contact us in Discussions if you have any questions, or in Issues if you find a bug!