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

2021-05-08 22:46:56

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

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

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

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

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

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

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

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

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

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

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