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 组件。
🏷️
标签
➡️
