[实验] marked
请使用 marked 而非 react-markdown 之类的集成库,后者非常大,基本对比
对比 | marked | react-markdown |
---|---|---|
star | 27.2k | 8.5k |
大小 | 72kb | 348kb |
下载量对比详情参考:https://www.npmtrends.com/markdown-it-vs-marked-vs-react-markdown
自定义链接生成逻辑请参考 https://github.com/markedjs/marked/issues/655#issuecomment-712380889,下面是生成的链接包含 target="_blank"
属性
function linkRenderer() {
const renderer = new marked.Renderer()
const linkRenderer = renderer.link
renderer.link = (href, title, text) => {
const html = linkRenderer.call(renderer, href, title, text)
return html.replace(/^<a /, '<a target="_blank" rel="nofollow" ')
}
return renderer
}
marked(props.children, { renderer: linkRenderer() })
mdast 系列
非常灵活的 markdown 工具包,可以解析和序列化 markdown,相比于其他库默认序列化为 html 的行为,它可以仅解析 markdown 为 ast,然后对 ast 进行修改,并提供了各种各样的工具。
import { fromMarkdown } from 'mdast-util-from-markdown'
import { gfmFromMarkdown, gfmToMarkdown } from 'mdast-util-gfm'
import { toMarkdown } from 'mdast-util-to-markdown'
import { gfm } from 'micromark-extension-gfm'
import { visit } from 'unist-util-visit'
const root = fromMarkdown('## Hello **World**!', {
extensions: [gfm()],
mdastExtensions: [gfmFromMarkdown()],
})
visit(root, (node) => {
console.log(node.type)
})
console.log(
toMarkdown(root, {
extensions: [gfmToMarkdown()],
}),
)
但它的 lib 太过分散,很难找到正确想要的社区 lib,所以自行维护了 @liuli-util/markdown-util,用于集中导出处理 markdown 需要的常用模块和功能。
相比于 remark,更推荐 mdast,它们的性能有比较大的差距。
[推荐] level
一个 kv 键值工具库,支持 nodejs 和浏览器,使用起来非常简单。
import { Level } from 'level'
export const kv = new Level('map-playground-next')
await kv.put('hello', 'world')
console.log(await kv.get('hello')) // world