rehype-raw 项目教程

rehype-raw 项目教程

rehype-rawplugin to parse the tree again项目地址:https://gitcode.com/gh_mirrors/re/rehype-raw

1、项目介绍

rehype-raw 是一个用于重新解析文档的 unified (rehype) 插件。它允许在处理过程中重新解析 HTML 字符串，保持原始节点的位置信息。这个插件建立在 hast-util-raw 之上，专注于通过抽象内部细节来简化内容转换。

2、项目快速启动

安装

该包仅支持 ESM。在 Node.js (版本 16+) 中，使用 npm 安装：

npm install rehype-raw

在 Deno 中，使用 esm.sh：

import rehypeRaw from 'https://esm.sh/rehype-raw@7'

在浏览器中，使用 esm.sh：

<script type="module">
  import rehypeRaw from 'https://esm.sh/rehype-raw@7?bundle'
</script>

使用示例

假设我们有以下 markdown 文件 example.md：

<div class="note">
  A mix of *markdown* and <em>HTML</em>
</div>

我们的模块 example.js 如下：

import rehypeDocument from 'rehype-document'
import rehypeFormat from 'rehype-format'
import rehypeRaw from 'rehype-raw'
import rehypeStringify from 'rehype-stringify'
import { read, write } from 'to-vfile'
import { unified } from 'unified'

main()

async function main() {
  const file = await unified()
    .use(rehypeDocument, { title: 'Profile' })
    .use(rehypeRaw)
    .use(rehypeFormat)
    .use(rehypeStringify)
    .process(await read('example.md'))

  await write(file)
}

3、应用案例和最佳实践

应用案例

rehype-raw 常用于需要在 Markdown 文档中嵌入 HTML 代码的场景。例如，在编写技术文档时，可能需要在 Markdown 中插入复杂的 HTML 结构，如表格或特殊布局。

最佳实践

• 安全性：使用 allowDangerousHtml 选项时需谨慎，确保了解其安全风险。
• 性能：避免在大型文档中频繁使用 rehype-raw，因为它会重新解析整个文档，可能导致性能下降。

4、典型生态项目

rehype-raw 是 unified 生态系统的一部分，常与其他 rehype 插件一起使用，如：

• rehype-format：用于格式化 HTML 输出。
• rehype-document：用于生成完整的 HTML 文档。
• rehype-stringify：用于将 hast 树转换为 HTML 字符串。

这些插件共同提供了强大的工具集，用于处理和转换 HTML 内容。

rehype-rawplugin to parse the tree again项目地址:https://gitcode.com/gh_mirrors/re/rehype-raw