You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-website/admin/bando/demos/Markdown.svelte

52 lines
1.4 KiB

<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>