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

<script>
  let count = 0
</script>

<button on:click={() => count++}>
  You've clicked {count} times
</button>

<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 />
<script>
  import Counter from './Counter.svelte'
</script>
<Counter />
md

Output

Suggest changes to this page
Last update at: 2023/09/02 00:10:56