如何使用HTML与React创建带语法高亮的代码展示框

这类支持编程语言语法高亮的代码展示框有非常成熟的开源库可以直接使用，不需要从零开发着色逻辑，常用方案按适用场景整理如下：

• Highlight.js
  个人站点普及率最高的轻量零依赖高亮库，支持近200种编程语言，自带上百套现成配色主题，基础接入成本极低：引入库资源后，给代码块标记对应编程语言的类名，调用一次初始化方法即可自动完成语法着色。参考图里的行号、顶部语言标签、复制按钮这类功能，都可以通过它的官方扩展实现，外层的圆角、阴影、窗口控制小圆点这类UI，写少量CSS就能定制完成。
• PrismJS
  体积更灵活的轻量高亮方案，支持按需打包你需要的语言、主题和功能插件，生态默认提供行号显示、语言标识、一键复制、代码折叠等常用能力，自定义样式门槛很低，很容易调出和参考图高度一致的视觉效果，大量独立博客、开源项目文档站都在使用这个库。
• 框架适配封装组件
  如果你用React/Vue/Astro/Next.js这类前端框架或静态站生成器搭建作品集，可以直接用对应生态封装好的组件，省去手动初始化的麻烦：
  • React 场景选react-syntax-highlighter，内置封装了Highlight.js和PrismJS的能力，传入代码字符串、指定语言和主题就能直接渲染可用的代码块
  • Vue 场景选vue-prism-component或者Highlight.js官方提供的Vue适配包，同样开箱即用
• Shiki
  如果你想要高度还原VS Code原生的代码高亮效果，可以选这个库。它直接使用VS Code的TextMate语法规则和主题系统渲染代码，着色效果和本地编辑器打开代码的效果完全一致，近年很多新上线的技术文档、博客站点都在切换这个方案，缺点是包体积比前两个轻量库稍大，但个人作品集场景完全不会有性能问题。

小提示：不用刻意找UI和参考图完全匹配的库，这类高亮库的核心职责是完成代码文本的语法着色，代码框外层的窗口样式、操作按钮都可以通过CSS自由定制，实现成本非常低。

内容的提问来源于stack exchange，提问作者Miguel