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.
52 lines
1.4 KiB
52 lines
1.4 KiB
2 years ago
|
<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={}</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>
|