如何在 SvelteKit 中导入 Markdown 文件？

Question

<script>
    import Markdown from '../components/Markdown.svelte';
    import path from '../../static/assets/docs/overview.md';
</script>

<article class="prose prose-red max-w-none">
    <Markdown markdown={path} />
</article>

这是警告：

files in the public directory are served at the root path.
Instead of /static/assets/docs/overview.md?import, use /assets/docs/overview.md?import.

如果我使用import path from '/assets/docs/overview.md';我会收到以下错误：

9:30:18 PM [vite] Internal server error: Cannot import non-asset file /assets/docs/overview.md which is inside /public.JS/CSS files inside /public are copied as-is on build and can only be referenced via <script src> or <link href> in html.
  Plugin: vite:import-analysis
  File: /Users/me/www/underwriting-ui/src/routes/docs.svelte
      at TransformContext.transform (/Users/me/www/underwriting-ui/node_modules/vite/dist/node/chunks/dep-713b45e1.js:67350:31)
      at async Object.transform (/Users/me/www/underwriting-ui/node_modules/vite/dist/node/chunks/dep-713b45e1.js:42397:30)
      at async doTransform (/Users/me/www/underwriting-ui/node_modules/vite/dist/node/chunks/dep-713b45e1.js:56738:29)

Answer 1

您可以通过后缀将 Markdown 文件（或任何其他文件）作为原始文本导入?raw。例如：

import my_markdown from "$lib/data/my_markdown.md?raw";

与渲染配对使用markdown-it：

<script>
import MarkdownIt from "markdown-it";
import my_markdown from "$lib/data/my_markdown.md?raw";

const md = new MarkdownIt();
</script>

{@html md.render(my_markdown)}

Answer 2

我有同样的场景 - 静态 Markdown 中的文档，我需要在构建时生成 HTML。我最终使用了vite-plugin-markdown。

将其添加到您的vite.config.js

import { Mode, plugin as markdown } from 'vite-plugin-markdown'

const config = {
  plugins: [markdown({ mode: [Mode.HTML, Mode.TOC], ...})], ...
}

然后在你的 svelte 组件中

import { toc, html } from '~/docs/api/auth.md'

我对“toc”特别满意，它输出如下内容：

[{ level: '1', content: 'foo' }, { level: '2', content: 'bar' }, ...]