hugo-syntax-highlight-shiki/

[giscus[bot]]

hugo-syntax-highlight-shiki/

本文介绍了如何在 Hugo 中使用 Shiki 代码语法高亮器。Shiki 是一款美观而强大的代码语法高亮器，基于 TextMate 的语法和主题，并能为几乎所有主流编程语言提供准确且快速的语法高亮。与其他代码语法高亮器不同，Shiki 是纯静态的，无需引入庞大的 JS 资源。文章详细介绍了在 Hugo 项目中安装和配置 Shiki 的步骤，包括安装相关插件、设置 Hugo 配置文件以及创建.rehyperc 文件来配置高亮主题等。此外，还提供了适配暗黑模式和生成 Shiki 所需命令行操作等内容。最后还介绍了如何在 GitHub Actions 中使用 Shiki 进行部署，并给出了相应的工作流程示例。

https://www.eallion.com/hugo-syntax-highlight-shiki/

[rebron1900]

不知道11ty该如何引入，如果是在生成html后再对静态文件做处理应该也是很好实现的。

[eallion]

11ty 应该也有 .dist 之类的目录吧，操作构建目录就可以了。

[ZhenShuo2021]

照著寫完發現沒有code copy，好像還得自己寫一個

[eallion]

这个问题我也发现了，已经提了 Issue 了 nunocoracao/blowfish#1691 ，但是影响不大。我发现从很多网站复制的代码都要经过二次检查。

[rebron1900]

我最近在Astro也开始用Shiki了，手动实现了code copy，搬运的以前的代码。

[ghost]

看着还不错，想问一下这个的性能如何？

[eallion]

它是通过 style 写入到 HTML 中的，所以跟原来的网页一样，不会增加任何资源请求和性能损耗。只是 HTML 的体积会大上一小丢丢，但也忽略不计。