DEV Community
·
使用 Shiki 实现语法高亮并为代码块添加复制功能
💡
原文英文，约600词，阅读约需2分钟。
📝
内容提要
我在网站上添加了代码片段功能，使用 rehype-pretty-code 插件实现语法高亮，并创建自定义组件添加复制按钮，以提升用户体验。
🎯
关键要点
- 在网站上添加了代码片段功能，以提升用户体验。
- 实现了更好的语法高亮功能，使用 rehype-pretty-code 插件。
- 使用 MDX 和 next-mdx-remote 渲染内容，配置了多个插件。
- rehype-pretty-code 插件提供了美观的代码块，支持服务器和客户端的动态高亮。
- 可以通过配置 shikiOptions 来选择不同的主题。
- 添加了复制按钮到代码块，使用自定义的 Figure 组件来渲染。
- Figure 组件查找 figcaption 和 pre 元素，并实现复制功能。
- FigureCaption 组件包含复制按钮，点击后会复制代码内容并显示状态。
- 通过 MDXRemote 渲染内容时，使用了自定义的 Figure 组件。
❓
延伸问答
如何在网站上实现代码片段的语法高亮？
可以使用 rehype-pretty-code 插件来实现语法高亮，该插件支持服务器和客户端的动态高亮。
如何为代码块添加复制功能？
通过创建自定义的 Figure 组件，可以在代码块中添加复制按钮，点击后会复制代码内容。
shikiOptions 的作用是什么？
shikiOptions 用于配置 rehype-pretty-code 插件的主题，可以选择不同的主题来美化代码块。
Figure 组件是如何工作的？
Figure 组件查找 figcaption 和 pre 元素，并实现复制功能，通过引用 DOM 元素来获取代码内容。
如何使用 MDXRemote 渲染内容？
使用 MDXRemote 组件可以渲染 MDX 内容，并通过传入自定义组件来处理特定的渲染需求。
可以在哪里找到更多的 shiki 主题？
可以在 https://shiki.style/themes 网站上找到更多的 shiki 主题供选择。
🏷️
标签
➡️
