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