在 svelte 组件中解析 markdown

Question

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

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

markdownLibrary.render({text})

我无法使用 markdown-it or marked，因为 require 不可用。

我觉得我错过了这里的大局。 'svelte' 这样做的方法是什么？任何指针都会有所帮助。

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

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

<script>
  let _marked = marked

  let md = `
    # Hello

    ## How are you?

    This text is _bold_
  `
</script>

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

Answer 3

已接受答案的问题是它依赖于 @html，这是不安全的。

有一个 svelte 组件可以在不使用 @html

的情况下呈现 markdown

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} />

在 svelte 组件中解析 markdown

Parse markdown inside a svelte component

markdown

node.js

svelte