里尔高光

Shiki 的语法用相同的符号和相同的 HTML 突出显示,计算 由Shiki 的文本Mate 的 Rust 端口和 JavaScript regex 的标记器 它运行的引擎,编译到WebAssembly. 是来送货的 createHighlighter, (中文(简体) ), codeToHtml 财务报告和审定财务报表 codeToTokens 从 志纪 4.5.0,并用于编码插件 逐步减少 (单位:千美元)@streamdown/code 2.0.0 (英语).

import { codeToHtml } from '@2018kguo/rill-highlight';

const html = await codeToHtml('const answer = 42', { lang: 'ts', theme: 'github-dark' });

它开始作为代码亮点 瑞尔, (中文(简体) ), a Rust 引擎用于向下冲压,因此它用于突出显示 同样的不断增长的代码 阻断多次一秒.

为什么

• 输出相同. 31种语言的121个档案(42 379个) 真实代码外加边框的行),每个符号,相抵和样式匹配 史基的,还有所有746 codeToHtml 电话是同文字节:一个主题和 每个文件和最多400行的文件都有两个主题 CSS 变量 只有三个主题, light-dark(),白色空间和合并选项, structure: 'inline' 财务报告和审定财务报表 tokenizeMaxLineLength. 流出头150个 每个文件的行通过流出插件,32 320个调用,匹配 @streamdown/code,所有242个捆绑语言都匹配混合语言 样本。 (测试是史基在无每行时限的情况下进行的,参见: 限制. ) (中文(简体) )
• 快点. 在节点,4.6x比Shiki快 codeToTokens, 4.9x 时 codeToHtml 和5.5x到第一个结果,在铬 5x到6x上 流式和新装入的答案(数字 业绩) (中文(简体) ). 将两个主题切入其中 志树每个主题都表示过一次.
• 小一点. 被子模为335 KB (135 KB gziped). 语法和主题 在首次使用语言或主题时被装入单独的模块, 如 师克自载.

说明:没有变压器、装饰或解释,没有习惯 运行时的语法(语法由构建步骤预编),否 ansi 语言,并且没有每行500ms的时间限制。 它不执行的选项 抛出而不是被忽略.

安装

npm install @2018kguo/rill-highlight

它没有依赖关系。 节点20或以后,或任何带有WebAssembly的浏览器. 软件包为 2.7 MB (19.8 MB 已打包,几乎全部是语法); 一页 只获取主题模块及其使用的语法和主题 .

使用

API是施基的,他很聪明 装入主题和语言一次, 然后突出显示 同步 :

import { createHighlighter } from '@2018kguo/rill-highlight';

const highlighter = await createHighlighter({
  themes: ['github-light', 'github-dark'],
  langs: ['typescript', 'python'],
});

highlighter.codeToHtml(code, { lang: 'ts', theme: 'github-dark' });
highlighter.codeToHtml(code, {
  lang: 'python',
  themes: { light: 'github-light', dark: 'github-dark' },
  defaultColor: false,          // CSS variables only
  cssVariablePrefix: '--code-',
});
const { tokens, fg, bg, grammarState } = highlighter.codeToTokens(code, { lang: 'ts', theme: 'github-dark' });
await highlighter.loadLanguage('rust');
highlighter.dispose();

简称 codeToHtml, (中文(简体) ), codeToTokens, (中文(简体) ), codeToTokensBase, (中文(简体) ), codeToTokensWithThemes 财务报告和审定财务报表 getSingletonHighlighter 共享一个亮点 并加载每个调用所需的内容,包括包含在代码中的语言 (在Markdown的栅栏, <script lang>),如史克所为.

所有242个什基捆绑的语言(346个代名词的代名词)和65个主题 包含。 主题也可以是对象,如"史记"中.

节点

没有要配置的: 原站模块和数据文件从 软件包目录.

浏览器

带有捆绑器的默认导入有效 。 每个语法和主题都是 a JavaScript 模块, 以动态导入软件包 import() 当它是 第一次使用,所以每个捆绑者 把它放在自己的块; 相机模块是 从 new URL('../dist/rill_highlight.wasm', import.meta.url),哪个 Vite,webpack和Rollup 加上一个资产插件变成了资产. 炸弹 留下这些 URL (bun) 需要 主题模块服务并传递, 与软件包的数据:

import { createHighlightCore } from '@2018kguo/rill-highlight/core';
import { data } from '@2018kguo/rill-highlight/data';
import { createCodePlugin } from '@2018kguo/rill-highlight/streamdown';

// rill_highlight.wasm copied from node_modules/@2018kguo/rill-highlight/dist/
const core = createHighlightCore({ wasm: new URL('./rill_highlight.wasm', import.meta.url), data });
const highlighter = await (await core).createHighlighter({ themes: ['github-dark'], langs: ['ts'] });
const code = createCodePlugin({ core });

test/bundle.mjs 构建一个在主线和 网络工人用Vite和包, 从包装的柏油球,并检查它英寸 铬. 没有捆绑器, 服务包的 dist/ 目录(或使用 CDN副本),并点出一个核心; /core 没有赤裸的进口,所以它也装载 直接从CDN:

import { createHighlightCore } from '@2018kguo/rill-highlight/core';

const core = await createHighlightCore({
  baseUrl: 'https://cdn.jsdelivr.net/npm/@2018kguo/[email protected]/dist/',
});
const highlighter = await core.createHighlighter({ themes: ['github-dark'], langs: ['ts'] });

createHighlightCore({ wasm, data }) 取相机模块(字节, a) Response页:1 WebAssembly.Module 或一个 URL)和 a data 对象为 grammar(name) 财务报告和审定财务报表 theme(name) 函数返回 JSON 文本,用于任意 以其他方式装入; @2018kguo/rill-highlight/data 出口 软件包是自己的.

逐步减少

@2018kguo/rill-highlight/streamdown 出口 code 财务报告和审定财务报表 createCodePlugin, (中文(简体) ), 与 @streamdown/code数字 :

import { Streamdown } from 'streamdown';
import { code } from '@2018kguo/rill-highlight/streamdown';

<Streamdown plugins={{ code }}>{markdown}</Streamdown>;

createCodePlugin({ themes, core }) 一样 themes 作为 @streamdown/code,并且从 createHighlightCore 装入文件 从别处。 该插件还有 highlightSync(options)返回时 当语言被装入时, 立即得到结果( 否), 不 召回往返,和 load({ language, themes }),哪个加载它和 无法拒绝时拒绝( 未捆绑的主题, 未捆绑的语法) 汇编) highlight 只记录错误.

锈

箱子是没有JavaScript层的活化器. 它读文法 文件数据构建写入( e)js/dist/grammars/*.json,由 js/scripts/build-grammars.mjs并返回带有样式标识符的符号 :

let grammar = std::fs::read_to_string("dist/grammars/rust.json")?;
let theme = std::fs::read_to_string("dist/themes/github-dark.json")?;
let mut highlighter = rill_highlight::Highlighter::from_json(&[&grammar], "rust", &[&theme])?;
let code: Vec<u16> = "fn main() {}".encode_utf16().collect();
let tokenized = highlighter.tokenize(&code, None, 0)?;
for token in &tokenized.lines[0] {
    let style = &highlighter.styles()[token.style as usize][0];
    println!("{}..{} {:?} {}", token.offset, token.offset + token.length, style.color, style.font_style);
}

偏差在UTF-16代码单元中,如JavaScript. Registry 拿着 几种语言的语法用于注入和嵌入式语言,以及 regex::JsRegExp 是 ECMAScript regex 引擎本身.

所支持的内容

限制

• Regex译. Shiki的 JavaScript 引擎每个翻译 Oniguruma 和主机一起运行 RegExp。 。 。 . rill-highlight 提前翻译ES2025目标的所有图案, shiki选择运行时间支持 regex 修饰器的地方(第23节和 Chrome 125 onward),并使用自己的引擎运行. 在旧时间 Shiki使用不同的目标,其输出可以与rill不同. 这个 这里比较的是它的 JavaScript 引擎上的Shiki forgiving: true,作为 @streamdown/code 配置它。 史基的违约 引擎是Oniguruma(瓦斯姆):反之,746型中的737型 codeToHtml 电话 其余部分(带有非 ASCII 标识符的 Python 文件, 1) shell 脚本)在Oniguruma 和 JavaScript regexes 的不同处 (单位:千美元)ENGINE=oniguruma node test/html.mjs) (中文(简体) ).
• 不编译的模式 . 24,300个捆绑的图案 编译( 测试检查) , 但是如果模式无法编译, 请标记 到达它的代码会扔 而不是跳过它。 对于这种语言, 用师克. 一个 ahk2 模式被跳过,因为Shiki的原谅引擎跳过 这个.
• 无所限. Shiki 默认500 ms 后停止标注一条线 (单位:千美元)tokenizeTimeLimit),而使其余的不作风格;里尔-高光总是 标出整行,所以病理线可以花很长的时间 会放弃的. tokenizeMaxLineLength 约束它。 寒冷的语法是第一个 线条可以通过慢速或繁忙的机器在Shiki中通过极限,所以Shiki's 这里的标志因机器而异;测试无限制地运行了Shiki. 一些语法的模式 逆向四行对峙线(4 000个特征 typeScript 中的空格,为 ( 在V8和这里都一样 几倍于它们的速度,但它们的生长方式相同(测试/双倍.rs) 列出它们,并检查所有其它的线性增长.
• 语法状态 来自亮点 和产生的主题 它们; 传递一个与其它主题一起发出的呼叫.
• 使用后装入. 像史基一样,装入语言可以重新装入 懒惰地嵌入它的语言(Markdown的栅栏块). 语法 包含未声明的语言, 在第一个之后加载 突出显示,可能比史基晚看到这种语言.

业绩

以 npm run bench 内 js/ 在苹果M5 Pro(18个核心,macOS)上 与第25.9号节点,关于诉讼事由(31种语言的每一种文件) 已安装,共1.4 MB),其JavaScript regex引擎上的Shiki,均带有 两个主题(github-light和github-dark),因为向下流使用它们. 温暖 九次中最快的一次在装满的突出显示器上运行,以各种语言概括; 第一个结果是一个为一种语言创建亮点的新进程 突出一次,总结一下。 这台机器是与其他作品共用的,所以是单一的 语言在运行之间差异可达20%左右.

rill-highlight 也花费了大约20 ms的每个过程 原模组,上方不计算。 每个语言,温暖 codeToTokens 速度从 0. 8x (diff, 0.2 ms 双向) 和 1. 3x (YAML) 到 12. 8x (简体中文). 原生的,没有原生的,活化剂比 斯克发热(1,703 ms对252 ms),13.3x得到第一个结果.

单行一万八千个特征的TypeScript取取了Shiki 15 ms和 rill-highlight 7 ms (wasm) 或 4.7 ms (原生).

在铬, npm run bench:browser (它需要面包和Playwright的) Chromium)突出出16个AI-答题大小的代码 块( 每行60行, 16种语言) 通过两个有 4x 的 Streamdown 插件 CPU减速:从冷页取出 3 058 ms 对 484 ms (6.3x),流线 12个区块,每块3,434 ms相对671 ms(5.1x) 同样的地块再次装入了122ms对43ms(2.8x).

如何运作

• js/scripts/build-grammars.mjs 采用史基的语法 翻译它们包含的每个图案(以及锚和回溯引用) 标致器可以生成的变体),有取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 将会在运行时间,进入 dist/grammars/<name>.json (为一出"破箱") 和与模块相同的文本 dist/data/ (什么包装船).
• src/regex/ 是一个ECMAScript regex 引擎(u 财务报告和审定财务报表 v 模式, 外观, 修饰符, V8 表格中的 Unicode 属性), 有 oniguruma- to-es的 EmulatedRegExp 扩展。 它复制了V8的结果,包括一个V8 与大小写不敏感修改组相突起.
• src/textmate/ 端口 @shikijs/vscode-textmate: 规则,扫描仪带有 史克的搜索缓存,注入,主题匹配. 它的样式每个主题在 一个通过,因为匹配的规则并不取决于主题.
• js/src/ 是志树的 codeToTokens 编号 : codeToHtml 围绕原地的逻辑 模块,用于生成相同的对象和标记.

测试

单位 js/之后 npm install, (中文(简体) ), npm run corpus (把尸体放在被钉上) 和(或) npm run build数字 :

npm test                    # API, tokens, HTML and streaming vs Shiki
npm run test:all-languages  # every bundled language on a mixed sample
npm run test:pack           # pack, install the tarball, highlight from it
npm run test:bundle         # the tarball bundled by Vite and bun, in Chromium
cargo test --release --features op-counts --test doubling  # linear work
cargo test                  # in the repository root: regex semantics, units, every pattern compiles

CI 运行 Rust 测试和剪接,以及 JavaScript 测试的检查 边框( e)npm run test:ci) (中文(简体) ).

许可证

麻省理工学院. 捆绑的语法和主题保留着自己的许可证(MIT,Apache-2.0,, BSD、ISC、MPL-2.0和GPL-3.0),列于 第三次议会 NoTICES.md 持有Shiki的执照, vscode-textmate, oniguruma-to-es 和(英语: @streamdown/code,其代码被移植 在这里.