svelte marked shiki示例

pnpm create vite
cd demo
pnpm install tailwindcss @tailwindcss/vite -D
pnpm i @tailwindcss/typography @tailwindcss/forms -D
pnpm i daisyui -D

vite.config.js:

import tailwindcss from "@tailwindcss/vite";
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit(), tailwindcss()]
});

pnpm i marked shiki marked-shiki

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
@plugin "daisyui";

src/lib/MarkdownRenderer.svelte:

<script lang="ts">
  import { onMount } from "svelte";
  import { marked } from "marked";
  import markedShiki from "marked-shiki";
  import { codeToHtml } from "shiki";

  let htmlContent = $state("");
  const { markdown } = $props();

  onMount(async () => {
    htmlContent = await marked
      .use(
        markedShiki({
          async highlight(code, lang) {
            return await codeToHtml(code, { lang, theme: "github-dark" });
          },
          container: `<figure class="highlighted-code">
    <button class="btn-copy">Copy</button>
    %s
    </figure>
    `,
        }),
      )
      .parse(markdown);
  });
</script>

{#if htmlContent}
  <div class="max-w-full prose">
    {@html htmlContent}
  </div>
{:else}
  <div>Loading...</div>
{/if}

App.svelte:

<script>
  import MarkdownRenderer from "./lib/MarkdownRenderer.svelte";

  const content = `
# Hello Shiki!

This is a simple Svelte app that uses Shiki to render Markdown.

Here's some JavaScript code:

\`\`\`javascript
function hello() {
  console.log('Hello Shiki!');
}
\`\`\`
  `;
</script>

<MarkdownRenderer markdown={content} />