sveltekit mdsx示例

pnpx sv create选择tailwindcss

mdsx.config.js:

import { defineConfig } from 'mdsx';
import { rehypeCustomHighlight } from '@mdsx/rehype-custom-highlighter';
import { bundledLanguages, bundledThemes, getSingletonHighlighter } from 'shiki';

/** @type {import('@mdsx/rehype-custom-highlighter').HighlightOptions} */
const customHighlightOptions = {
    highlight: async ({ value, lang }) => {
        const highlighter = await getSingletonHighlighter({
            langs: Object.keys(bundledLanguages),
            themes: Object.keys(bundledThemes),
        });
        const html = highlighter.codeToHtml(value, {
            lang: lang,
            theme: 'github-dark',
        });
        return html;
    },
};

export const mdsxConfig = defineConfig({
    extensions: ['.md'],
    rehypePlugins: [[rehypeCustomHighlight, customHighlightOptions]],
});

svelte.config.js:

import adapter from "@sveltejs/adapter-node";
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsx } from 'mdsx';
import { mdsxConfig } from './mdsx.config.js';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [mdsx(mdsxConfig), vitePreprocess()],
	extensions: ['.svelte', '.md'],
	kit: {
		adapter: adapter(),
	},
};

export default config;

src/lib/some-content.md:

# Welcome

This is my first MDSX markdown file. Isn't it great?

## Description

It gets better than this, we promise.

```svelte
<script lang="ts">
    import SomeContent from "$lib/some-content.md";
</script>

<main class="prose">
    <SomeContent />
</main>
```

src/routes/+page.svelte:

<script lang="ts">
    import SomeContent from "$lib/some-content.md";
</script>

<main class="container max-w-full prose">
    <SomeContent />
</main>