(解决一半-存在bug)语法高亮的警告信息

1、故障现象：语法高亮的警告信息

2025年3月12日

代码块不支持的语言，构建时有报错log

这应该是当时自己的文档里相关的

bash

Administrator@DESKTOP-7PB0PFA MINGW64 /d/the-latest-teeker/2025.3.12-pull/vitepress-theme-teek (master)
$ pnpm demo:base dev

> @1.0.0 demo:base D:\the-latest-teeker\2025.3.12-pull\vitepress-theme-teek
> pnpm run -C demo/docs-base "dev"


> @vitepress-theme-teek/docs-base@1.0.0 dev D:\the-latest-teeker\2025.3.12-pull\vitepress-theme-teek\demo\docs-base
> vitepress dev

injected sidebar data successfully. 注入侧边栏数据成功!
injected permalinks data successfully. 注入永久链接数据成功!
injected docAnalysisInfo data successfully. 注入文档分析数据成功!
injected catalogues data successfully. 注入目录页数据成功!
injected posts data successfully. 注入 posts 数据成功!

The language 'pnpm' is not loaded, falling back to 'txt' for syntax highlighting.

The language 'yarn' is not loaded, falling back to 'txt' for syntax highlighting.

The language 'bun' is not loaded, falling back to 'txt' for syntax highlighting. 

The language 'npm' is not loaded, falling back to 'txt' for syntax highlighting.

The language 'pnpm' is not loaded, falling back to 'txt' for syntax highlighting.     

The language 'yarn' is not loaded, falling back to 'txt' for syntax highlighting.     

The language 'yarn(php)' is not loaded, falling back to 'txt' for syntax highlighting.

gpt

从你的输出来看，你正在使用 pnpm 运行 VitePress 的开发服务器，并且成功注入了一些数据（如侧边栏数据、永久链接数据等）。然而，控制台中出现了一些关于语法高亮的警告信息，提示某些语言（如 pnpm、yarn、bun、npm 等）未加载，因此回退到 txt 语法高亮。

以下是问题的分析和解决方法：

一、问题分析

语法高亮警告：
- VitePress 默认使用 Shiki 作为代码高亮引擎。
- 这些警告表明 Shiki 没有加载 pnpm、yarn、bun、npm 等语言的语法高亮规则，因此回退到普通文本高亮（txt）。
原因：
- Shiki 默认只支持一部分常见的编程语言（如 JavaScript、TypeScript、Python 等）。
- pnpm、yarn、bun、npm 等工具的命令行语法可能未被 Shiki 默认支持。

二、解决方法

1. 忽略警告

如果这些警告不影响你的开发体验，可以忽略它们。VitePress 仍然可以正常运行。

2. 自定义 Shiki 语言

你可以通过配置 Shiki 来支持这些语言。以下是具体步骤：

安装 Shiki 语言包：在项目中安装 Shiki 支持的语言包。例如：
bash
```
pnpm add shiki @shikijs/ansi
```
1

配置 VitePress：在 VitePress 配置文件中（通常是 .vitepress/config.js），自定义 Shiki 的语言支持：

javascript

import { defineConfig } from 'vitepress';
import { getHighlighter } from 'shiki';
export default defineConfig({
  markdown: {
    async config(md) {
      const highlighter = await getHighlighter({
        theme: 'github-dark', // 选择主题
        langs: ['javascript', 'typescript', 'bash', 'json', 'yaml', 'pnpm', 'yarn', 'npm'], // 添加支持的语言
      });
      md.options.highlight = (code, lang) => {
        return highlighter.codeToHtml(code, { lang });
      };
    },
  },
});

添加自定义语言语法：如果 Shiki 默认不支持 pnpm、yarn、bun、npm 等语言，你可以手动添加它们的语法规则。可以参考 Shiki 官方文档或使用社区提供的语法包。

2025年3月12日

自己安装时报错了：。。。

bash

Administrator@DESKTOP-7PB0PFA MINGW64 /d/the-latest-teeker/2025.3.12-pull/vitepress-theme-teek (master)
$ pnpm add shiki @shikijs/ansi
 ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or 
--workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.

Administrator@DESKTOP-7PB0PFA MINGW64 /d/the-latest-teeker/2025.3.12-pull/vitepress-theme-teek (master)
$ pnpm add shiki @shikijs/ansi -D
 ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or 
--workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.

Administrator@DESKTOP-7PB0PFA MINGW64 /d/the-latest-teeker/2025.3.12-pull/vitepress-theme-teek (master)

3. 使用其他高亮引擎

如果你不需要 Shiki 的高亮功能，可以切换到其他高亮引擎，例如 Prism.js：

安装 Prism.js：
bash
```
pnpm add prismjs
```
1

配置 VitePress：在 VitePress 配置文件中启用 Prism.js：

javascript

import { defineConfig } from 'vitepress';
import Prism from 'prismjs';
export default defineConfig({
  markdown: {
    config(md) {
      md.options.highlight = (code, lang) => {
        return Prism.highlight(code, Prism.languages[lang] || Prism.languages.text, lang);
      };
    },
  },
});

三、总结

方法	优点	缺点
忽略警告	简单，无需额外配置	代码高亮效果可能不理想
自定义 Shiki 语言	支持更多语言，高亮效果更好	需要额外配置，可能增加项目复杂性
使用 Prism.js	支持更多语言，配置灵活	需要额外安装和配置
根据你的需求选择合适的方法即可。如果只是开发环境中的警告，且不影响使用，可以选择忽略。如果需要更好的代码高亮效果，建议自定义 Shiki 或切换到 Prism.js。
如果还有其他问题，欢迎随时提问！

自己提出问题

难道就没有配置忽略这些告警的配置项吗？
如果不能配置，那么当自己文档里有很多关于这些报错时，势必会严重影响用户体验的；

作者回答：

🍊

2、故障现象：安装shiki时报错

自己安装时报错了：。。。

bash

Administrator@DESKTOP-7PB0PFA MINGW64 /d/the-latest-teeker/2025.3.12-pull/vitepress-theme-teek (master)
$ pnpm add shiki @shikijs/ansi
 ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or 
--workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.

Administrator@DESKTOP-7PB0PFA MINGW64 /d/the-latest-teeker/2025.3.12-pull/vitepress-theme-teek (master)
$ pnpm add shiki @shikijs/ansi -D
 ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or 
--workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.

Administrator@DESKTOP-7PB0PFA MINGW64 /d/the-latest-teeker/2025.3.12-pull/vitepress-theme-teek (master)

gpt

从你的输出来看，你正在尝试在项目根目录下安装 shiki 和 @shikijs/ansi，但遇到了 ERR_PNPM_ADDING_TO_ROOT 错误。这是因为你的项目是一个 Monorepo（多包仓库），而 pnpm 默认不允许在根目录直接安装依赖，以避免意外修改根目录的依赖。

以下是解决方法的详细说明：

一、问题原因

你的项目是一个 Monorepo，使用了 pnpm 的工作区（workspace）功能。
pnpm 默认会检查是否在根目录安装依赖，如果检测到，会抛出 ERR_PNPM_ADDING_TO_ROOT 错误。
这是为了防止在根目录意外安装依赖，导致工作区的包管理混乱。

二、解决方法

方法 1：明确在根目录安装依赖

如果你确实需要在根目录安装 shiki 和 @shikijs/ansi，可以使用 -w 或 --workspace-root 参数，明确告诉 pnpm 你需要在根目录安装依赖：

bash

pnpm add shiki @shikijs/ansi -w -D

-w：表示在根目录安装依赖。
-D：将依赖安装为开发依赖。

方法 2：在特定工作区包中安装依赖

如果你的 shiki 和 @shikijs/ansi 只需要在某个子包中使用，可以切换到该包的目录，然后安装依赖。例如：

bash

cd demo/docs-base
pnpm add shiki @shikijs/ansi -D

方法 3：禁用根目录依赖检查

如果你希望以后不再看到 ERR_PNPM_ADDING_TO_ROOT 警告，可以在 pnpm 配置中禁用根目录依赖检查：

打开 .npmrc 文件（如果没有，可以创建一个）。
添加以下配置：
ini
```
ignore-workspace-root-check=true
```
1
保存文件后，重新运行安装命令：
bash
```
pnpm add shiki @shikijs/ansi -D
```
1

三、总结

方法	适用场景
明确在根目录安装依赖	确实需要在根目录安装依赖时使用。
在特定工作区包中安装依赖	依赖只需要在某个子包中使用时使用。
禁用根目录依赖检查	希望以后不再看到 `ERR_PNPM_ADDING_TO_ROOT` 警告时使用。
根据你的需求选择合适的方法即可。如果还有其他问题，欢迎随时提问！

结果：提示shiki包不见了。。。

🍊

3、亲测有效：安装 Prism.js（完美解决）

配置：

3. 使用其他高亮引擎

如果你不需要 Shiki 的高亮功能，可以切换到其他高亮引擎，例如 Prism.js：

安装 Prism.js：
bash
```
pnpm add prismjs
```
1

配置 VitePress：在 VitePress 配置文件中启用 Prism.js：

javascript

import { defineConfig } from 'vitepress';
import Prism from 'prismjs';
export default defineConfig({
  markdown: {
    config(md) {
      md.options.highlight = (code, lang) => {
        return Prism.highlight(code, Prism.languages[lang] || Prism.languages.text, lang);
      };
    },
  },
});

自己实际配置：

效果

bash

pnpm i
pnpm stub
pnpm to:permalink build

pnpm demo:base dev

这一次重新构建就能看到，再没有报错了。完美。😜

但是又引发了新的Bug:代码块乱了

🍊

其它建议：vp内置代码块高亮也是一个插件

自己还是没找到解决办法哦

自己不懂代码，还是没法修复这个问题哦。。。。

Markdown 扩展 | VitePress

站点配置 | VitePress

🍊

再一次提问:这种语法报错会影响vitepress构建速度吗？

bash

Administrator@DESKTOP-7PB0PFA MINGW64 /d/teeker-2025.3.13/vitepress-theme-teek-one-private (master)
$ pnpm demo:base build

> @1.0.0 demo:base D:\teeker-2025.3.13\vitepress-theme-teek-one-private
> pnpm run -C demo/docs-base "build"


> @vitepress-theme-teek/docs-base@1.0.0 build D:\teeker-2025.3.13\vitepress-theme-teek-one-private\demo\docs-base
> vitepress build


  vitepress v1.6.3

⠹ building client + server bundles...Injected Sidebar Data Successfully. 注入侧边栏数据成功!
Injected Permalinks Data Successfully. 注入永久链接数据成功!
⠸ building client + server bundles...Injected DocAnalysisInfo Data Successfully. 注入文档分析数据成功!
Injected Catalogues Data Successfully. 注入目录页数据成功!
Injected posts Data Successfully. 注入 posts 数据成功!
⠦ building client + server bundles...
The language 'pnpm' is not loaded, falling back to 'txt' for syntax highlighting.

The language 'yarn' is not loaded, falling back to 'txt' for syntax highlighting.

The language 'bun' is not loaded, falling back to 'txt' for syntax highlighting. 
⠹ building client + server bundles...
The language 'npm' is not loaded, falling back to 'txt' for syntax highlighting.

The language 'pnpm' is not loaded, falling back to 'txt' for syntax highlighting.     

The language 'yarn' is not loaded, falling back to 'txt' for syntax highlighting.     

The language 'yarn(php)' is not loaded, falling back to 'txt' for syntax highlighting.

The language 'bun' is not loaded, falling back to 'txt' for syntax highlighting.      

The language 'npm' is not loaded, falling back to 'txt' for syntax highlighting.      

The language 'pnpm' is not loaded, falling back to 'txt' for syntax highlighting.     

The language 'yarn' is not loaded, falling back to 'txt' for syntax highlighting.     


这种语法报错会影响vitepress构建速度吗？

gpt

从你的输出来看，vitepress 在构建过程中出现了一些关于语法高亮的警告信息，提示某些语言（如 pnpm、yarn、bun、npm 等）未加载，因此回退到 txt 语法高亮。以下是这些警告是否会影响构建速度的分析：

一、警告的原因

语法高亮引擎：
- VitePress 默认使用 Shiki 作为代码高亮引擎。
- Shiki 需要加载特定语言的语法规则才能正确高亮代码。
- 如果某些语言（如 pnpm、yarn、bun、npm 等）未加载，Shiki 会回退到普通文本高亮（txt），并输出警告。
警告的性质：
- 这些警告只是提示信息，不会导致构建失败。
- 它们表明某些代码块的高亮效果可能不理想，但不会影响构建结果的正确性。

二、是否影响构建速度

对构建速度的影响：
- 影响较小：这些警告本身不会显著影响构建速度。Shiki 在加载语言规则时，如果未找到对应的规则，会快速回退到 txt，这个过程的开销很小。
- 潜在影响：如果项目中存在大量未加载语言的代码块，Shiki 可能会频繁回退到 txt，略微增加构建时间。但这种影响通常可以忽略不计。
其他因素：
- 构建速度主要取决于项目的规模、依赖数量、配置优化等因素。
- 语法高亮警告对构建速度的影响远小于这些因素。

三、如何解决语法高亮警告

如果你希望消除这些警告，可以按照以下方法解决：

1. 忽略警告

如果这些警告不影响你的使用体验，可以忽略它们。它们不会影响构建结果。

2. 自定义 Shiki 语言

通过配置 Shiki 来支持这些语言，具体步骤如下：

安装 Shiki 语言包：在项目中安装 Shiki 支持的语言包。例如：
bash
```
pnpm add shiki @shikijs/ansi -w -D
```
1

配置 VitePress：在 VitePress 配置文件中（通常是 .vitepress/config.js），自定义 Shiki 的语言支持：

javascript

import { defineConfig } from 'vitepress';
import { getHighlighter } from 'shiki';
export default defineConfig({
  markdown: {
    async config(md) {
      const highlighter = await getHighlighter({
        theme: 'github-dark', // 选择主题
        langs: ['javascript', 'typescript', 'bash', 'json', 'yaml', 'pnpm', 'yarn', 'npm'], // 添加支持的语言
      });
      md.options.highlight = (code, lang) => {
        return highlighter.codeToHtml(code, { lang });
      };
    },
  },
});

添加自定义语言语法：如果 Shiki 默认不支持 pnpm、yarn、bun、npm 等语言，可以手动添加它们的语法规则。可以参考 Shiki 官方文档或使用社区提供的语法包。

3. 使用其他高亮引擎

如果你不需要 Shiki 的高亮功能，可以切换到其他高亮引擎，例如 Prism.js：

安装 Prism.js：
bash
```
pnpm add prismjs -w -D
```
1

配置 VitePress：在 VitePress 配置文件中启用 Prism.js：

javascript

import { defineConfig } from 'vitepress';
import Prism from 'prismjs';
export default defineConfig({
  markdown: {
    config(md) {
      md.options.highlight = (code, lang) => {
        return Prism.highlight(code, Prism.languages[lang] || Prism.languages.text, lang);
      };
    },
  },
});

四、总结

问题	影响
语法高亮警告	不会影响构建结果，对构建速度的影响可以忽略不计。
解决方法	忽略警告、自定义 Shiki 语言、使用其他高亮引擎（如 Prism.js）。
如果这些警告不影响你的使用体验，可以忽略它们。如果需要更好的代码高亮效果，可以按照上述方法解决。如果还有其他问题，欢迎随时提问！

自己测试：失败

2. 自定义 Shiki 语言

通过配置 Shiki 来支持这些语言，具体步骤如下：

安装 Shiki 语言包：在项目中安装 Shiki 支持的语言包。例如：
bash
```
pnpm add shiki @shikijs/ansi -w -D
```
1

配置 VitePress：在 VitePress 配置文件中（通常是 .vitepress/config.js），自定义 Shiki 的语言支持：

javascript

import { defineConfig } from 'vitepress';
import { getHighlighter } from 'shiki';
export default defineConfig({
  markdown: {
    async config(md) {
      const highlighter = await getHighlighter({
        theme: 'github-dark', // 选择主题
        langs: ['javascript', 'typescript', 'bash', 'json', 'yaml', 'pnpm', 'yarn', 'npm'], // 添加支持的语言
      });
      md.options.highlight = (code, lang) => {
        return highlighter.codeToHtml(code, { lang });
      };
    },
  },
});

添加自定义语言语法：如果 Shiki 默认不支持 pnpm、yarn、bun、npm 等语言，可以手动添加它们的语法规则。可以参考 Shiki 官方文档或使用社区提供的语法包。

提示华为仓库源里没这个包：

退回默认源，还是一样没包的：。。。

继续给指定华为源：

bash

$ npm config set registry https://mirrors.huaweicloud.com/repository/npm/
$ pnpm config set registry https://mirrors.huaweicloud.com/repository/npm/

我直接往里写的话，会报错的：

主题配置

插件

安装-faq

本地安装升级方法

指南

简介

使用

相关

开发

配置

主题配置

主题开发

常见问题

生态

介绍

基础配置

进阶玩法

其它站点

简介

写作

自定义

实验性功能

配置和API参考

(解决一半-存在bug)语法高亮的警告信息 ​

1、故障现象：语法高亮的警告信息 ​

gpt ​

一、问题分析 ​

二、解决方法 ​

1. 忽略警告 ​

2. 自定义 Shiki 语言 ​

3. 使用其他高亮引擎 ​

三、总结 ​

自己提出问题 ​

🍊 ​

2、故障现象：安装shiki时报错 ​

gpt ​

一、问题原因 ​

二、解决方法 ​

方法 1：明确在根目录安装依赖 ​

方法 2：在特定工作区包中安装依赖 ​

方法 3：禁用根目录依赖检查 ​

三、总结 ​

结果：提示shiki包不见了。。。 ​

🍊 ​

3、亲测有效：安装 Prism.js（完美解决） ​

但是又引发了新的Bug:代码块乱了 ​

🍊 ​

其它建议：vp内置代码块高亮也是一个插件 ​

自己还是没找到解决办法哦 ​

🍊 ​

再一次提问:这种语法报错会影响vitepress构建速度吗？ ​

gpt ​

一、警告的原因 ​

二、是否影响构建速度 ​

三、如何解决语法高亮警告 ​

1. 忽略警告 ​

2. 自定义 Shiki 语言 ​

3. 使用其他高亮引擎 ​

四、总结 ​

自己测试：失败 ​

(解决一半-存在bug)语法高亮的警告信息

1、故障现象：语法高亮的警告信息

gpt

一、问题分析

二、解决方法

1. 忽略警告

2. 自定义 Shiki 语言

3. 使用其他高亮引擎

三、总结

自己提出问题

🍊

2、故障现象：安装shiki时报错

gpt

一、问题原因

二、解决方法

方法 1：明确在根目录安装依赖

方法 2：在特定工作区包中安装依赖

方法 3：禁用根目录依赖检查

三、总结

结果：提示shiki包不见了。。。

🍊

3、亲测有效：安装 Prism.js（完美解决）

但是又引发了新的Bug:代码块乱了

🍊

其它建议：vp内置代码块高亮也是一个插件

自己还是没找到解决办法哦

🍊

再一次提问:这种语法报错会影响vitepress构建速度吗？

gpt

一、警告的原因

二、是否影响构建速度

三、如何解决语法高亮警告

1. 忽略警告

2. 自定义 Shiki 语言

3. 使用其他高亮引擎

四、总结

自己测试：失败