大大的小蜗牛
·
在 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以确保部署流程的顺利进行。
➡️
