我在网站上添加了代码片段功能，使用 rehype-pretty-code 插件实现语法高亮，并创建自定义组件添加复制按钮，以提升用户体验。

SolidJS生态系统较小，开发者在寻找工具时可能遇到困难。在#SolidStart2024黑客马拉松中，作者创建了一个应用，使用Shiki轻量化显示代码片段，避免了完整代码编辑器的负担。同时，Spotter.dev增强了SolidStart REST API的体验，提供API可观测性。Shiki帮助开发者高效格式化代码，提升用户体验。

Shiki是一款美观且强大的代码语法高亮器，基于TextMate的语法和主题。它能为几乎所有主流编程语言提供准确且快速的语法高亮。使用Shiki只需几分钟即可在Hugo配置好代码语法高亮器。它是纯静态的，不需要引入庞大的JS资源。可以通过@shikijs/rehype插件在Hugo博客项目中实现Shiki代码语法高亮。

Shiki是一个代码高亮库，但加载过慢且浪费流量。文章介绍了如何按需加载Shiki所需的语言解析器，减少加载时间和流量浪费。通过动态加载和使用use hook，实现了只加载需要的语言解析器。最后，提到了解决CLS（页面抖动）的方法。

本文对比了几款代码高亮引擎在 Python 代码中的表现，结果显示 Prism.js 和 Pygments 表现相近，而 Highlight.js 表现较差。推荐使用 Prism.js 作为博客代码高亮。此外，新发现的 shiki 引擎表现优异，支持与 VSCode 相似的语法高亮，已成为推荐选择。