DEV Community
·
使用 Shiki 实现语法高亮并为代码块添加复制功能
内容提要
我在网站上添加了代码片段功能，使用 rehype-pretty-code 插件实现语法高亮，并创建自定义组件添加复制按钮，以提升用户体验。
关键要点
-
在网站上添加了代码片段功能，以提升用户体验。
-
实现了更好的语法高亮功能，使用 rehype-pretty-code 插件。
-
使用 MDX 和 next-mdx-remote 渲染内容，配置了多个插件。
-
rehype-pretty-code 插件提供了美观的代码块，支持服务器和客户端的动态高亮。
-
可以通过配置 shikiOptions 来选择不同的主题。
-
添加了复制按钮到代码块，使用自定义的 Figure 组件来渲染。
-
Figure 组件查找 figcaption 和 pre 元素，并实现复制功能。
-
FigureCaption 组件包含复制按钮，点击后会复制代码内容并显示状态。
-
通过 MDXRemote 渲染内容时，使用了自定义的 Figure 组件。
延伸解读
语法高亮的实现细节
使用 rehype-pretty-code 插件实现语法高亮时，可以根据需要配置不同的主题。文章中提到的 'catppuccin-latte' 主题只是众多选择之一，用户可以访问 shiki.style/themes 来探索更多主题。这种灵活性使得开发者能够根据网站风格调整代码块的外观，提升整体用户体验。
复制功能的用户体验提升
添加复制按钮的功能显著提升了用户体验，尤其是在处理代码片段时。用户无需手动选择和复制代码，点击按钮即可完成操作。文章中展示的自定义 Figure 组件实现了这一功能，确保了代码块的可用性和便利性，适合需要频繁引用代码的开发者和学习者。
MDX 和组件的灵活性
通过使用 MDX 和 next-mdx-remote，开发者可以灵活地渲染内容并集成自定义组件。文章中提到的 Figure 组件示例展示了如何在不重复导入的情况下，统一处理代码块的渲染。这种方法不仅提高了代码的可维护性，也使得内容更新变得更加高效。
延伸问答
如何在网站上实现代码片段的语法高亮？
可以使用 rehype-pretty-code 插件来实现语法高亮，该插件支持服务器和客户端的动态高亮。
如何为代码块添加复制功能？
通过创建自定义的 Figure 组件，可以在代码块中添加复制按钮，点击后会复制代码内容。
shikiOptions 的作用是什么？
shikiOptions 用于配置 rehype-pretty-code 插件的主题，可以选择不同的主题来美化代码块。
Figure 组件是如何工作的？
Figure 组件查找 figcaption 和 pre 元素，并实现复制功能，通过引用 DOM 元素来获取代码内容。
如何使用 MDXRemote 渲染内容？
使用 MDXRemote 组件可以渲染 MDX 内容，并通过传入自定义组件来处理特定的渲染需求。
可以在哪里找到更多的 shiki 主题？
可以在 https://shiki.style/themes 网站上找到更多的 shiki 主题供选择。
