svelte-exmarkdown

Access to the AST

You can access the AST in the your custom component by using the getAstNode function.

It makes powerful to create custom components.

<!-- DumpAst.svelte -->
<script lang="ts">
	import { getAstNode } from 'svelte-exmarkdown';

	const astContext = getAstNode();
</script>

<!-- Dump current node --><pre>{JSON.stringify($astContext, null, 2)}</pre>
<script lang="ts">
	import type { Plugin } from 'svelte-exmarkdown';
	import Markdown from 'svelte-exmarkdown';
	import DumpAst from './DumpAst.svelte';

	let md = $state('# Hello World');
	const plugins: Plugin[] = [{ renderer: { h1: DumpAst } }];
</script>

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