代码块，但更好

Pedro Duarte 在博文和文档中 列出了一个样式化代码块的愿望清单，然后手工打造了一个完美的解决方案来满足这个愿望清单。例如，一个功能是可以突出显示代码块中的某些行或单词。行高亮器很独特，因为它只对高亮的行进行语法高亮，其余部分则保持灰色，这是一种吸引注意力的巧妙方式。而单词高亮器则通过正则表达式工作。Pedro 指出这不是一个教程，它只是一个展示，展示了使用现有自定义代码和现有库组合在一起的所有功能。它非常特定于 React + Next.js + MDX，但显然其核心是基于 rehype，这对我来说是新的。

结果非常棒，在我看来，这些代码块外观非常现代！同时，我认为需要注意的是缺少什么，而不是存在什么。我过去见过（也尝试过）功能非常丰富的代码块，具有诸如复制到剪贴板按钮、查看原始代码按钮以及导出到任何服务的按钮等功能。Pedro 的代码块甚至没有显示所用语言的选项。

每个人的愿望清单都不同。Pedro 的愿望清单上没有的一件事是服务器端渲染，但您可以在博文中看到它完全可以与之配合使用（这可能是 Next.js 的作用）。我对此非常羡慕。即使我们最终都使用 Prism.js 作为语法高亮器，但我只在客户端使用它。我现在意识到，我或许可以通过使用 HTMLRewriter 在 Cloudflare Worker 中实现所有这些功能——这意味着它看起来基本上是在服务器端完成的，我可以删除 Prism 的客户端副本。也许更理想的是，我会把它作为一个 WordPress 插件来做。基本上是 Prism 的 PHP 移植版本，这似乎是一个艰巨的任务。

我对代码块插件的愿望清单……

• 语法高亮（在渲染的网站上和创作时）
• 服务器端渲染的 <span class="token-foo"> 语法高亮内容
• 与原生 WordPress 块编辑器代码块 (```) 完美配合。例如，粘贴代码块会自动检测并使用正确的块。可以轻松地在代码和此类块之间转换。
• 可选的行高亮
• 可选的行号
• 可选的单词高亮
• 可选的语言显示（以及覆盖该标签的能力）
• 复制粘贴非常干净
• 创作时无需转义代码
• 自由地在前端进行样式设置（用于模式、主题、自定义滚动条等）。代码块的样式设置 需要考虑很多因素，因此插件应该提供智能默认值，但也很容易覆盖。
• 扩展目标：它是否可以以某种方式帮助 inline 代码？