我花了一些时间探索如何改进网络上的代码块的UX

我一直在花费大量时间为Modulz产品写作。 专门用于针脚和基数。 我想要的不仅仅是漂亮的颜色。 在这篇文章中，我＆＃39; ll与您分享我如何构建自定义代码块组件。 我是使用我自己网站的代码块作为演示。 它看起来像这样： 我建立了它在下一个项目上工作。 对于.mdx支持，i＆＃39; ve用mdx-bundler和next-mdx-remote使用它。 我＆＃39; ve拆分了两部分的代码：rehype和ui。 我认为它更容易首先向整个文件展示整个文件，以及它们如何共同努力。 然后我＆＃39; ll细分一些有用的步骤。 此部分是代码块功能发生的位置。 语法，行和Word突出显示和MDX组件替换。 这是主要的rehype插件。 这是我们处理语法的地方（归功于折射器），线条和单词突出显示。 受MDX棱镜的启发。

现在我需要告诉MDX-Bundler使用rehype-ukiforl-代码和rehype-meta-属性插件。这是通过XMDOPTIONS完成的。

rehype-exigllow-code插件将代码块的内容包装在具有不同类的各种跨度元素中，例如函数，运算符，关键字等。

然后我能够瞄准这些课程和风格。要以一种可维护的方式执行此操作，我用缝线。

使用针迹，我可以创建一个主题，然后使用它的令牌到以后的语法突出显示。但如果你不想创建自己的，你可以使用棱镜主题。

既然已经设置了缝线，我可以导入样式函数并使用它来拟合预元素。

i＆＃39; m从stitches.config.ts导入样式函数。那个我们做了设置的地方，提供了与我们的主题的缝线。然后我使用样式函数来创建针迹组件。

我利用缝线＆＃39;本地范围的令牌定义了i＆＃39; ll然后用来突出显示语法的一些变量。

我可以针对rehype插件生成的类并添加语法突出显示。 我通过使用$$（两个美元的符号）引用带缝线的本地范围的令牌。 我依靠针迹variant api来创建预组件的多种变体。 创建多个主题就像覆盖先前创建的本地范围令牌一样简单。 爱它！ 我创建了一个预览组件，它在MDX文件中可用。 与此示例一样，这将在将预览和代码块组合在一起时派上派上而好。 注意：我留下了样式，但这只是一个反应组成部分，所以你可以在你想要的情况下风格。 由于rehype-meta-attribute rehype插件，元属性将自动传递给Pre和代码函数的道具和代码函数 与Markdown同样，在MDX中，您可以使用三重反响的代码块进行三重反响的“。”。 在它之后立即添加语言。

我可以通过将其作为元属性传递给我在MDX中直接使用的主题。 我可以通过在__（双下下划线）中缠绕代码块中的特定单词。 我创建了一个自定义H组件（用于突出显示），并且它用来在内容和突出显示的单词之间创建交互的＆＃39。 因为它可以工作，我需要将ID添加到代码块。 然后，我需要告诉H哪个ID和哪个索引与之交互。 索引也可以是范围。 我创建了一个自定义registerlink组件，它＆＃39; s我用来制作一个突出显示的单词点击。 因为它可以工作，我需要将ID添加到代码块。 然后，我需要渲染一个自关闭的registerLink组件，提供ID，索引和HREF。 然后，我使用CSS相邻的选择器来样式，所以它们看起来像一个UI。

我可以选择使代码块通过作为元属性传递它来陷入困境。 我花了几个月思考构建自定义代码块。 没有笑话。 我害怕它有多少工作＆＃39; d是＆＃39; d的时间。 我担心维护债务。 你＆＃39;如果你使用MDX组件替换，那么已经熟悉了很多＆＃39; 控制这些代码块感觉非常好。 我花了很多时间为Modulz产品编写文档，并且可以访问这些功能真的帮助我讲述更好的故事。 我没有计划开放的开放或作为包装。 它不是真正的A＆＃34;孤立的＆＃34; 事物。 很多这取决于MDX和造型的力量。 但我希望这篇文章能够激励你并激励你创造自己的♥。