[实验] marked

请使用 marked 而非 react-markdown 之类的集成库,后者非常大,基本对比

对比markedreact-markdown
star27.2k8.5k
大小72kb348kb

下载量对比详情参考:https://www.npmtrends.com/markdown-it-vs-marked-vs-react-markdownopen in new window

自定义链接生成逻辑请参考 https://github.com/markedjs/marked/issues/655#issuecomment-712380889open in new window,下面是生成的链接包含 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 系列

githubopen in new window

非常灵活的 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-utilopen in new window,用于集中导出处理 markdown 需要的常用模块和功能。

相比于 remarkopen in new window,更推荐 mdast,它们的性能有比较大的差距。

[推荐] level

npmopen in new window

一个 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