解析瘦组件内的降价

Question

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

<script>
  --- import some markdownLibrary ---
  export let text; // text is a markdown param
</script>

markdownLibrary.render({text})

我不能使用markdown-it或标记为require不可用。

我觉得我在这里错过了更大的图景。这样做的“苗条”方式是什么？任何指针都会有所帮助。

Answer 1

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

要在 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是不安全的。

有一个 svelte 组件可以渲染 markdown 而无需使用@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

我用的是标记的。我通过分配一个 svelte 可以看到并标记的变量来玩弄系统。

<script>
  let _marked = marked

  let md = `
    # Hello

    ## How are you?

    This text is _bold_
  `
</script>

<div>
{@html _marked(md)}
</div>