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.current, 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} />

{
  "type": "element",
  "tagName": "h1",
  "properties": {},
  "children": [
    {
      "type": "text",
      "value": "Hello World",
      "position": {
        "start": {
          "line": 1,
          "column": 3,
          "offset": 2
        },
        "end": {
          "line": 1,
          "column": 14,
          "offset": 13
        }
      }
    }
  ],
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 1,
      "column": 14,
      "offset": 13
    }
  }
}