分析苗条组件内部的markdown

Question

如果这是一个幼稚的问题，请原谅。我想在Svelte组件中解析markdown，类似

<script>
--- import some markdownLibrary ---
export let text; // text is a markdown param
</script>
markdownLibrary.render({text})

我无法使用markdown或标记为require不可用。

我觉得我错过了大局。做这件事的"苗条"方式是什么？任何指针都会有所帮助。

Answer 1

在Svelte中使用markdown很简单，但您必须记住，许多markdown库都希望找到node/requirejs等，因此您必须正确配置bundler以适应这一点。

要在Svelte中简单地使用markdown，请选择一个开箱即用支持现代JavaScript的库：

<script>
import snarkdown from 'snarkdown'
let md = `
# Hello
## How are you?
This text is _bold_
`
</script>
<div>
{@html snarkdown(md)}
</div>

Answer 2

接受的答案的问题在于它依赖于不安全的@html。

有一个苗条的组件可以在不使用@html的情况下渲染降价

https://www.npmjs.com/package/svelte-markdown

yarn add svelte-markdown

<script>
import SvelteMarkdown from 'svelte-markdown'
const source = `
# This is a header
This is a paragraph.
* This is a list
* With two items
1. And a sublist
2. That is ordered
* With another
* Sublist inside
| And this is | A table |
|-------------|---------|
| With two    | columns |`
</script>
<SvelteMarkdown {source} />

Answer 3

我使用标记。我通过分配一个苗条的人可以看到的变量来标记这个系统。

<script>
let _marked = marked
let md = `
# Hello
## How are you?
This text is _bold_
`
</script>
<div>
{@html _marked(md)}
</div>

Answer 4

Magidoc有一个svelte库，可以将markdown渲染到组件中。