微型打火机简介

我制作了一个 smol 客户端语法荧光笔，它使用名为 MicroLighter 的 CSS 自定义突出显示 API。我会谈谈为什么我会做到这一点，但首先我想……咳咳……强调……一些功能。在某些时候，我破坏了 Jekyll 博客上的语法突出显示。多年来我使用过一些语法荧光笔（Highlight.js、PrismJS、Rouge、Shiki 等），并且我感受到了不同客户端和服务器端实现之间的权衡。面对选择另一个，我知道我想探索 Bramus 的 CSS 自定义突出显示 API 语法突出显示技术。 CSS ::highlight() 伪有一些限制；没有斜体，没有粗体，没有字体交换——但除此之外，通过CSS惯用地表达“我想突出显示这个标记”而不是到处注入跨度是非常酷的语法。使用 Highlight API 意味着我可以避免任何 DOM 突变，并且库的范围缩小为：使用正则表达式模式扫描代码块并发送 CSS.highlights.set(category, textRanges) 以突出显示代码块。我在这个网站上不需要太多语法突出显示。并非所有帖子都有代码，我的代码示例最多也有整整十五行长。我的困难是我经常交换语言。我将在同一篇文章中介绍 HTML、CSS 和 JavaScript。这里有一点 bash，那里有一点 ruby​​，还有一些 markdown 作为款待。使用所有这些语言的复杂性超出了我的正则表达式的限制，因此我决定依靠 Textmate 已建立的 VS Code 使用的模式集合。在我意识到之前，我的小荧光笔几乎可以识别任何语言。知道我经常使用不同的语言，我制定的一项原则是所有语言语法都应该按需自动加载，以减少配置和包大小。这样您只需为您使用的内容付费。受到 PrismJS 简化标记类别的启发，我将 Textmate 的细粒度标记类别扁平化为更人性化的集合，使其更易于设计样式。除此之外，我对代码块样式的一个巨大的挑剔是浅色和深色主题是单独的实体，因此我使用 light-dark() 将它们合并为一个主题。我提出的最后一个重要观点是，我希望语法突出显示器完成一项工作：推断语言并突出显示该语言中的代码。以此为指导，我将所有额外的功能（如行号等）移至 Web 组件。普通 Web 组件增加了约 1 KiB 的大小，但将 UI 共同定位到 UI 原语（如本机自定义元素）感觉不错，而且 ShadowDOM 封装可以轻松地将代码与演示 UI 分开。显然，我是一个 Web 组件变态者，但与试图将所有内容都塞进核心库相比，这感觉像是一个很好的关注点分离。尝试一下 为了开始使用您的网站，我将使用自初始化的缩小包，但我还提供了 ESM 和 Web 组件。 npm install microlighter 就像我上面说的，并不是所有的帖子都有语法高亮，所以我什至等待导入脚本，除非我知道有一个页面上有代码。 if(document.querySelector('pre>code').length) { import('path/to/microlighter/microlighter.min.js'); }如果你想自己做一些奇特的事情，你可以使用 ESM 版本： import {highlightAll } from 'microlighter'highlightAll({selector: 'pre.onlyTheseGetHighlights' }) 如果你想要我谈到的额外功能，你也可以使用 Web 组件：

代码在这里

Web 组件类也具有很好的可扩展性，因此如果我不支持您需要的东西，您可以通过扩展基类并添加您自己的功能来“分叉”它。最后，您可以使用预先提供的主题之一或推出您自己的主题。基本结构是： /** * 设置语义 `--syntax-*` 标记 * @value 背景 |前景|评论 |关键词| * 运算符|字符串|常数|功能|类型 |变量| * 财产 |标签|选择器|插入|已删除 */ [data-syntax-theme="my-theme-name"] { color-scheme: light dark; /* 代码块标记 */ --syntax-background: light-dark(#f8f8f8, #3a3a3a); --syntax-foreground: 浅色-深色(#3a3a3a, #f8f8f8); /* 突出显示标记 */ --syntax-comment: light-dark(#6e7781, #8b949e); --语法功能：亮-暗(#8250df，#d2a8ff)； /* ...等等... */ } [data-syntax-theme="my-theme-name"] pre:has(code) { 背景颜色:var(--syntax-background); color:var(--syntax-foreground) } ::highlight(comment) { color: var(--syntax-comment) } ::highlight(function) { color: var(--syntax-function) } /* ...etc... */ 这就是 MicroLighter。如果您最终使用并尝试了它，请告诉我您的想法。