<script>
	import Markdown from 'svelte-exmarkdown';
	import { gfmPlugin } from 'svelte-exmarkdown/gfm';
  import Code from './markdown/Code.svelte';
  import Link from './markdown/Link.svelte';
  import Section from './markdown/Section.svelte';

  const highlightPlugin = {
    renderer: {
      code: Code
    }
  };
  const sectionPlugin = {
    renderer: {
      h2: Section
    }
  };
  const linkPlugin = {
    renderer: {
      a: Link
    }
  };

  export let content = '';
</script>

<style>
  div {
    word-break: break-word;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    line-height: 1.3;
  }
</style>

<div>
  <Markdown md={content} plugins={[gfmPlugin, highlightPlugin, sectionPlugin, linkPlugin]}/>
</div>