remark-rehype 使用教程
项目介绍
remark-rehype
是一个用于将 Markdown 转换为 HTML 的插件,支持 rehype
。它是 remark
生态系统的一部分,remark
是一个强大的 Markdown 处理器,而 rehype
是一个 HTML 处理器。通过使用 remark-rehype
,开发者可以轻松地将 Markdown 内容转换为 HTML,以便在网页上显示。
项目快速启动
安装
首先,你需要安装 remark-rehype
及其依赖项:
npm install remark-rehype rehype-stringify remark-parse unified
基本使用
以下是一个简单的示例,展示如何使用 remark-rehype
将 Markdown 转换为 HTML:
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeStringify)
.process('# Hello, world!')
console.log(String(file));
运行上述代码将输出:
<h1>Hello, world!</h1>
应用案例和最佳实践
支持 HTML 嵌入
如果你需要在 Markdown 中嵌入 HTML,可以使用 allowDangerousHtml
选项:
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
const file = await unified()
.use(remarkParse)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeStringify, { allowDangerousHtml: true })
.process('<a href="/wiki/Dysnomia_(moon)" onclick="alert(1)">Dysnomia</a>')
console.log(String(file));
输出:
<p><a href="/wiki/Dysnomia_(moon)" onclick="alert(1)">Dysnomia</a></p>
安全处理嵌入的 HTML
为了防止 XSS 攻击,建议使用 rehype-raw
和 rehype-sanitize
:
import rehypeSanitize from 'rehype-sanitize';
import rehypeStringify from 'rehype-stringify';
import rehypeRaw from 'rehype-raw';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';
const file = await unified()
.use(remarkParse)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeSanitize)
.use(rehypeStringify)
.process('<a href="/wiki/Dysnomia_(moon)" onclick="alert(1)">Dysnomia</a>')
console.log(String(file));
输出:
<p><a href="/wiki/Dysnomia_(moon)">Dysnomia</a></p>
典型生态项目
- remark: 一个强大的 Markdown 处理器。
- rehype: 一个 HTML 处理器。
- rehype-raw: 支持解析嵌入的 HTML 节点。
- rehype-sanitize: 用于 sanitize HTML,防止 XSS 攻击。
- rehype-stringify: 将 HTML 树转换为字符串。
通过这些工具的组合使用,开发者可以构建出强大且安全的 Markdown 到 HTML 转换流程。