如何配置 remark 进行 markdown 解析并高亮代码块？

本文个人博客地址：https://www.leafage.top/posts/21310GTY2

上一篇如何做vue.js项目markdown代码块高亮？ 介绍了如何在 vue.js 项目中使用 marked.js 来解析 markdown 文档，并进行代码块的高亮显示。这次在介绍另外一种方式解析 markdown 文档并高亮代码块。

1. 首先需要安装依赖:

remark-parse remark-rehype remark-gfm rehype-highlight rehype-sanitize rehype-stringify rehype-external-links

2. 配置 remark 来解析 markdown 文档，并高亮代码块

以下是可用的配置，markdownToHtml.ts 文件添加了部分语言的支持，更多语言请查看highlight.js的文档，进行引入即可。

// 引入依赖
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import remarkGfm from 'remark-gfm'
import rehypeHighlight from 'rehype-highlight'
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
import rehypeStringify from 'rehype-stringify'

// 创建解析方法
export default async function markdownToHtml(markdown: string) {
  const result = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(remarkGfm)
    .use(rehypeHighlight)
    .use(rehypeSanitize, {
    ...defaultSchema,
    attributes: {
      ...defaultSchema.attributes,
      span: [
        ...(defaultSchema.attributes?.span || []),
        // 这里配置代码块高亮的关键词:
        [
          'className', 'hljs-addition', 'hljs-attr', 'hljs-attribute', 'hljs-built_in', 'hljs-bullet', 
          'hljs-char', 'hljs-code', 'hljs-comment', 'hljs-deletion', 'hljs-doctag', 'hljs-emphasis', 
          'hljs-formula', 'hljs-keyword', 'hljs-link', 'hljs-literal', 'hljs-meta', 'hljs-name', 
          'hljs-number', 'hljs-operator', 'hljs-params', 'hljs-property', 'hljs-punctuation', 
          'hljs-quote', 'hljs-regexp', 'hljs-section', 'hljs-selector-attr', 'hljs-selector-class', 
          'hljs-selector-id', 'hljs-selector-pseudo', 'hljs-selector-tag', 'hljs-string', 'hljs-strong', 
          'hljs-subst', 'hljs-symbol', 'hljs-tag', 'hljs-template-tag', 'hljs-template-variable', 
          'hljs-title', 'hljs-type', 'hljs-variable'
        ]]
      }
    }
  )
  .use(rehypeStringify)
  .process(markdown)
  return result.toString()
}

配置好后，启动服务，就能看到代码块高亮显示了，但是在dev环境（yarn dev）下是可以的，在prod环境（yarn build）时，时没有注册languages的，所以需要添加语言，并将添加的语言注册，代码中添加如下：

import bash from 'highlight.js/lib/languages/bash';
import dockerfile from 'highlight.js/lib/languages/dockerfile';
import javascript from 'highlight.js/lib/languages/javascript';
import handlebars from 'highlight.js/lib/languages/handlebars';
import java from 'highlight.js/lib/languages/java';
import json from 'highlight.js/lib/languages/json';
import nginx from 'highlight.js/lib/languages/nginx';
import shell from 'highlight.js/lib/languages/shell'
import sql from 'highlight.js/lib/languages/sql';
import typescript from 'highlight.js/lib/languages/typescript';
import xml from 'highlight.js/lib/languages/xml';
import yaml from 'highlight.js/lib/languages/yaml';

然后修改remark-highlight插件的配置：

.use(rehypeHighlight, { languages: { bash, dockerfile, javascript, handlebars, java, json, nginx, shell, sql, typescript, xml, yaml } })

这样在prod环境也就可以了。