嵌入codepen。

[HealerLZH]

我正在使用编辑器用于文章编辑。希望在内容中嵌入codepen示例。请问可以做到吗，应该怎么做。

[imzbf]

我不太熟悉它提供示例的方式，不过，如果它有提供html的示例。你应该可以直接复制到你的文章当中

[HealerLZH]

编辑没问题。markdown-it 解析的时候当成了普通文本显示出来。难受

[imzbf]

给个codepen的示例看看呀

[HealerLZH]

我编辑的时候是用的您的编辑器。渲染是用的markdown-it

[HealerLZH]

在您编辑器里面的预览是正常的。然后在nuxt框架中使用的是markdown-it render来渲染md。它将这段ifram当成了普通文本来显示。您组件有nuxt中的使用吗，如果找不到解决办法，我可能会您编辑器配套的渲染组件在nuxt服务端渲染。

[imzbf]

如果在编辑器中可用，那完全可以通过导出的MdPreview组件直接展示文章，表现是和编辑器预览一样的，你不需要再去写一遍markdown-it相关的代码

[HealerLZH]

原因是这样，最初后台是vue2,用的是一个其他的md编辑器，后来后台改vue3原来的那款编辑器没有v3版本，就找到了您这款。 客户端展示那边用的是nuxt2。

<div
      id="markdown-body"
      class="mx-auto md:mb-12"
      v-html="$md.render(article.content || '')"
    ></div>

"@nuxtjs/markdownit他有一个$md.render方法，实现在服务端就将md转换为html,然后将完整的html页面返回到用户浏览器上。由此，页面上的其他内容，以及md的内容都以爬虫可识别的html标签形式传输。这样就达到了seo的效果。

[imzbf]

好吧，你的nuxt是2.x版本确实没办法。

使用markdown-it你可以参考下这里，看会不会是你的环境不能展示html的原因

[HealerLZH]

天哪。就是这个html: true。正常渲染了。

markdownit: {
    preset: 'default',
    linkify: true, // 将类似 URL 的文本自动转换为链接。
    html: true,
    breaks: true, // 转换段落里的 '\n' 到 <br>。
    use: [
      'markdown-it-highlightjs',
      'markdown-it-task-lists',
      [
        'markdown-it-link-attributes',
        {
          attrs: {
            target: '_blank', // md中的链接新页面打开
            rel: 'noopener',
          },
        },
      ],
    ],
  },

非常感谢，对您的能力感到倾佩。

解析渲染方面您的组件应该@nuxtjs/markdownit是一个逻辑，在nuxt3中应该也会有很好的表现。和后面升级到nuxt也会都切换过来。感谢开源