Svelte in markdown
This feature allows you to write
<style>, <script>, <script context="module">, #if, #each, #await, @html, @const, <svelte:xxx> in .md files
Basic
Here's a basic example with #if, #each, #await, @html, @const
Input
<script>
const items = ['foo', 'bar', 'zoo']
let boolVal = false
const promisePass = () => new Promise(resolve => {
setTimeout(() => {
resolve('Promise Passed!')
}, 2000)
})
const promiseFail = () => new Promise((_, reject) => {
setTimeout(() => {
reject('Promise Failed!')
}, 2000)
})
$: promise = boolVal ? promisePass() : promiseFail()
</script>
<ul>
{#each items as item, i}
{@const str = `${i + 1}: ${item}`}
<li>
{str}
</li>
{/each}
</ul>
<button on:click="{() => boolVal = !boolVal}">
Toggle
</button>
{#if boolVal}
<h3 class="text-green">
Pass
</h3>
{:else}
<h3 class="text-red">
Fail
</h3>
{/if}
{#await promise}
<h3 class="text-orange">
Loading
</h3>
{:then res}
<h3 class="text-green">
{res}
</h3>
{:catch err}
<h3 class="text-red">
{err}
</h3>
{/await}
{@html "<h1>Content render with @html</h1>"}md
Output
- 1: foo
- 2: bar
- 3: zoo
Fail
Loading
Content render with @html
Syntax Restrictions
Always use quotes in markdown files.
-
+
<button on:click={() => count++}></button>
<button on:click="{() => count++}"></button> svelte
A Counter
Input
> A counter
<script>
let count = 0
</script>
<button on:click="{() => count++}">
You've clicked {count} times
</button>md
Output
A counter
Import svelte in md
Counter.svelte
// @noErrors
<script>
let count = 0
</script>
<button on:click={() => count++}>
You've clicked {count} times
</button>
svelte
Input
<script>
import Counter from './Counter.svelte'
</script>
<Counter />md
Output
On this page