bandolier-website/admin/bando/demos/Markdown.svelte

<script>
  import Markdown from "$/client/components/Markdown.svelte";
  import Spinner from "$/client/components/Spinner.svelte";

  let md = "";
  let test_md = "/test.md";

  const load_md = async () => {
    let res = await fetch(test_md);
    md = res.status == 200 ? await res.text() : `Error getting /test.md: ${res.status}`;
  }

  let md_promise = load_md();
</script>

{#await md_promise}
  <Spinner />
{:then}
<callout>
<Markdown content={ md } />
</callout>

<hr>

<p>
  Because Svelte does a fairly correct JavaScript parse of the <code>content=&lcub;&rcub;</code>
  you can use the ` (back-tick) syntax to write your markdown directly.
</p>

<callout>
<Markdown content={`
Write Me Right
===

You can write the markdown directly in the source too using the JavaScript
template syntax.
`}/>
</callout>
{/await}

<p>Originally I had this much more complicated using the Svelte slots, but it turns out
  to be very complicated and also doesn't work with <code>rendered</code> pages at all.
  This style works with rendered pages, which is probably the more common way you would
  use Markdown.
</p>

<h2>Security Warning</h2>

<p>There is <b>NO</b> HTML sanitization on this output, so do <b>NOT</b> render
  user inupt without adding some form of sanitization like with <a href="https://github.com/cure53/DOMPurify">dompurify</a>. Consult the <a href="https://github.com/developit/snarkdown">snardown</a> documentation for more information.
</p>