【Vuepress】Shiki插件报错：Error: No language registration for xxxxx

问题描述

最近忙于使用VuePress搭建个人知识库，发现好多代码无法高亮显示，根据官方文档提示改用Shiki插件。

复制代码

"@vuepress/plugin-shiki": "2.0.0-rc.0",

但是在使用Shiki时会遇到一个小问题，即对无法识别的语言报错(Error: No language registration for xxxxx)。

如下边的提示，说找不到component组件

复制代码

Error: No language registration for component
    at getGrammar (F:\code\front\blog\node_modules\.pnpm\[email protected]\node_modules\shiki\dist\index.js:3170:13)
    at codeToThemedTokens (F:\code\front\blog\node_modules\.pnpm\[email protected]\node_modules\shiki\dist\index.js:3182:26)
    at Object.codeToHtml (F:\code\front\blog\node_modules\.pnpm\[email protected]\node_modules\shiki\dist\index.js:3204:20)
    at md.options.highlight (file:///F:/code/front/blog/node_modules/.pnpm/@[email protected]/node_modules/@vuepress/plugin-shiki/lib/node/shikiPlugin.js:9:60)
    at md.renderer.rules.fence (file:///F:/code/front/blog/node_modules/.pnpm/@[email protected]/node_modules/@vuepress/markdown/dist/index.js:248:37)
    at Renderer.render (F:\code\front\blog\node_modules\.pnpm\[email protected]\node_modules\markdown-it\lib\renderer.js:332:28)
    at md.renderer.render (file:///F:/code/front/blog/node_modules/.pnpm/@[email protected]/node_modules/@mdit-vue/plugin-headers/dist/index.mjs:19:12)
    at md.renderer.render (file:///F:/code/front/blog/node_modules/.pnpm/@[email protected]/node_modules/@mdit-vue/plugin-title/dist/index.mjs:11:12)
    at MarkdownIt.render (F:\code\front\blog\node_modules\.pnpm\[email protected]\node_modules\markdown-it\lib\index.js:544:24)
    at md.render (file:///F:/code/front/blog/node_modules/.pnpm/@[email protected]/node_modules/@mdit-vue/plugin-frontmatter/dist/index.mjs:22:12)

这就比较坑了，原本在typora或其他md平台中支持的语言在这里不仅不支持，而且编译都不通过。想要通过编译最简单的方法就是将```后边的语言去掉，但是去掉之后就不能在其他平台使用了，所以需求产生了！

需求： 在不更改原文本的前提下，基于Shiki，保证其他语言的兼容性

又因为这个只是自己的本地项目，所以就打算直接修改他的代码。

源代码位置：node_modules\.pnpm\[email protected]\node_modules\shiki\dist 第3167行

ts 复制代码

  function getGrammar(lang) {
    const _grammar = _registry.getGrammar(lang);
    if (!_grammar) {
   	// 如果_grammar不存在，直接给我一个warning提示就行，不要抛出异常。
      // throw Error(`No language registration for ${lang}`);
      console.log(`Warning:No language registration for ${lang}`);
    }
    return { _grammar };
  }
  function codeToThemedTokens(code, lang = "text", theme, options2 = { includeExplanation: true }) {
    
    const {_grammar} = getGrammar(lang);
    // 如果_grammar不存在，即不支持该语言，就以Plaintext的形式展示。
    if (isPlaintext(lang) || !_grammar) {
      const lines = code.split(/\r\n|\r|\n/);
      return [...lines.map((line) => [{ content: line }])];
    }
    const { _theme, _colorMap } = getTheme(theme);
    return tokenizeWithTheme(_theme, _colorMap, code, _grammar, options2);
  }

如果您有更好的方法，请在评论区留言！