在 Markdown 中使用 Svelte
借助这个特性，您可以在 md 文件中使用
<style>，<script>， <script context="module">，#if, #each, #await, @html，@const，<svelte:xxx> 等 svelte 专属语法
基础使用
这是一个使用了 #if，#each，#await，@html，@const 的基础示例
输入
<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>用 @html 渲染的内容</h1>"}md
输出
- 1: foo
- 2: bar
- 3: zoo
Fail
Loading
用 @html 渲染的内容
一个简单的计数器
输入
> 一个计数器
<script>
let count = 0
</script>
<button on:click="{() => count++}">
您点击了 {count} 次
</button>md
输出
一个计数器
语法限制
确保总是使用双引号包裹
-
+
<button on:click={() => count++}></button>
<button on:click="{() => count++}"></button> svelte
在 md 文件中导入 svelte 文件
Counter.svelte
// @noErrors
<script>
let count = 0
</script>
<button on:click={() => count++}>
您点击了 {count} 次
</button>
svelte
Input
<script>
import Counter from './Counter.svelte'
</script>
<Counter />md
Output