大大的小蜗牛
·
在 Hugo 中使用 Shiki
💡
原文中文，约3000字，阅读约需8分钟。
📝
内容提要
Shiki是一款美观且强大的代码语法高亮器，基于TextMate的语法和主题。它能为几乎所有主流编程语言提供准确且快速的语法高亮。使用Shiki只需几分钟即可在Hugo配置好代码语法高亮器。它是纯静态的，不需要引入庞大的JS资源。可以通过@shikijs/rehype插件在Hugo博客项目中实现Shiki代码语法高亮。
🎯
关键要点
- Shiki是一款基于TextMate语法和主题的代码语法高亮器，支持几乎所有主流编程语言。
- 使用Shiki无需维护自定义正则表达式、CSS或HTML，可以直接使用VS Code中的颜色主题。
- 在Hugo中配置Shiki代码语法高亮器非常简单，只需几分钟。
- Shiki是纯静态的，不需要引入庞大的JS资源，适合在本地或GitHub Actions等构建平台部署。
- 安装Shiki前需要确保已安装Node.js和Yarn，并在Hugo项目中执行相关安装命令。
- 在Hugo的配置中需要将codeFences设置为false，并创建.rehyperc文件以配置高亮主题。
- 为了让暗黑模式生效，需要在Hugo的CSS中适配主题颜色变量。
- 生成Shiki时需要运行hugo命令构建Hugo，并使用rehype-cli生成Shiki，可能需要限制内存使用。
- 在GitHub Actions中使用Shiki时，需要在package.json中添加相关脚本，并配置Workflow以确保部署流程的顺利进行。
❓
延伸问答
Shiki是什么，它的主要功能是什么？
Shiki是一款基于TextMate语法和主题的代码语法高亮器，支持几乎所有主流编程语言，提供准确且快速的语法高亮。
在Hugo中如何配置Shiki？
在Hugo中配置Shiki只需几分钟，需将codeFences设置为false，并创建.rehyperc文件以配置高亮主题。
使用Shiki时需要注意哪些安装前提？
使用Shiki前需要确保已安装Node.js和Yarn，并在Hugo项目中执行相关安装命令。
Shiki支持哪些主题？
Shiki支持多种主题，常用的有github-light和github-dark-dimmed，可以在.rehyperc文件中配置。
在GitHub Actions中如何使用Shiki？
在GitHub Actions中使用Shiki时，需要在package.json中添加相关脚本，并配置Workflow以确保部署流程顺利进行。
Shiki的内存使用限制如何设置？
运行Shiki时可能会遇到内存报错，可以通过设置环境变量export NODE_OPTIONS='--max_old_space_size=7168'来限制内存使用。
➡️
