搭技术博客嘛，基本都是用 markdown 写文章。那必然需要将 markdown 文件渲染到浏览器里。

我本来想着，这事应该很简单。哪怕我是 react 零基础，但是怎么通用的一件事，应该是三下五除二就能解决。

结果前前后后折腾了好几天，才基本上算是搞定了。

我这个后端仔遇到的最大的误区是：

_markdown 库只处理基础的转换（md->html），不提供主题 _

不管是 react-markdown，markdown-to-jsx 还是最终使用的 markdown-it，都是这样，本质上并不是开箱即用的。

语法高亮

例如 markdown-it 想要添加语法高亮，需要添加下面的代码，并且引用 hljs 库。

const md = markdownit({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value;
      } catch (__) {}
    }

    return ""; // use external default escaping
  },
});

到这还算简单的，官方文档基本都会写。你以为完了吗，你只能得到下图：

这不对啊，虽然有高亮，但是怎么没有背景呢？我这个后端仔第一时间真是理解不能，查了半天才发现，要好看还需要改 css 代码。

.MarkdownPage code {
  --code-bg: color-mix(in srgb, #f5deb3 10%, transparent);

  background: var(--code-bg) !important;
  border-radius: 2px;
  display: inline-block;
  font-family: 'Jetbrains Mono', Consolas, Monaco, monospace;
  font-size: 0.9em;
  padding: 0 4px;
  text-decoration: inherit;
}

这样才能得到正常的代码块现实：

表格

默认情况下，表格是这样子：

这哪是表格呢？为了让它真正变成表格，markdown-it 需要增加如下渲染规则：

md.renderer.rules.table_open = function () {
  return '<table class="table table-striped">\n';
};

并且要添加 bootstrap 库。这样你才能得到：

引用

默认的引用是这样的：

为了让他正常显示，需要添加：

.MarkdownPage blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eee;
}

最终得到：

结论

总的来说，这个过程对于零基础的后端仔来说真的不轻松。最大的问题是，几个 markdown 库给出了在线的交互网页，但是没有给出一个具体的成品的例子（也可能是给了我没不出来）。

转念一想，可能我最开始就去找现成的模板拿来用是最好的。不过这是事后诸葛亮了。