代码块高亮扩展通用语法

语法调研

调研了几款代码块高亮插件，发现功能及语法各不相同

他们有很多类似的功能：

• 代码块标题
• 行号开启/限定范围
• 行标记：高亮/增删/聚焦/警告错误
• 折叠/滚动
• ...

这里我们先只看其中的行标记 (高亮/增删/聚焦/警告错误) 一项

Shiki

官网:

https://shiki.tmrs.site/

transformerMetaHightlight

元数据高亮，经典

• https://shiki.tmrs.site/packages/transformers#transformermetahighlight

```ts {1, 5-10}
some code ...

fsd

dfgs

dfgs

fdg

fdgsf
fgd
sdg
sdfg
```

transformerNotationHighlight

注释高亮，要新一点的版本才支持

• https://ecosystem.vuejs.press/zh/plugins/markdown/prismjs.html#notationdiff
• https://shiki.tmrs.site/packages/transformers#transformernotationhighlight

```ts
// [!code highlight:2]
1
2
3
console.log('--') // [!code --]
console.log('++') // [!code ++]
console.log('highlight') // [!code highlight]
console.log('hl') // [!code hl]
console.log('focus') // [!code focus]
console.error('error') // [!code error]
console.warn('warning') // [!code warning]
```

Prismjs (vuepress版)

Obsidian阅读模式也是这个

MetaHightlight

```ts :line-numbers
```ts :no-line-numbers
```ts :line-numbers=2

```ts {1,7-9}

```css :collapsed-lines
```ts title="foo/baz.js"

NotationHightlight

notationDiff

Warning

https://ecosystem.vuejs.press/zh/plugins/markdown/prismjs.html#codeblocktitle

这个语法仅为vuepress在使用prismjs时额外提供，并非prismjs自带

```ts
console.log('--') // [!code --]
console.log('++') // [!code ++]
console.log('highlight') // [!code highlight]
console.log('focus') // [!code focus]
console.error('error') // [!code error]
console.warn('warning') // [!code warning]
```

Highlightjs

略

Obsidian类

Obsidian - Code Styler

417Star

```cpp title:test.cpp
```cpp title:"long filename.cpp"

```cpp hl:1,3-4,foo,'bar baz',"bar and baz",/#\w{6}/
```cpp {1,3-4,6-9,11}

Obsidian - Codeblock Customizer

218Star

```cpp hl:1,3,4-6
```cpp info:2 warn:4-6 error:8

```cpp file:test.cpp
```cpp title:test.py
```cpp file:"long filename.cpp"

```cpp fold

Obsidian - Shiki highlight

101Star

(大致同shiki，但版本略旧，也不支持notation语法)

兼容性问题

破坏性测试

其中，notionHightlight 语法失效时，结果通常是可接受的。主要调研 metaHightlight 语法，是否会让 markdown 软件平台的代码着色功能失效

使用以下例子，测试是否会在多种md平台中失效

```ts test {:,}
var a = 0;
let b = 2;
```

• obsidian, vuepress: 显示/代码类型显示正常
• typora, github, vscode: 正常

可见，两种语法都有一定的向下兼容性

通用性问题

说完了破坏性 (向下兼容性)，我们再来看语法通用性。即大家是否有类似的语法

• NotaionHightligh 语法
  • shiki 和 prismjs by vuepress 的语法是一样的
  • 其他插件不支持
• MetaHightlight 语法
  • {,} 大括号语法 (ins={1}, 默认前面是高亮)
    • shiki / prismjs 支持
    • codeblock customizer / code style 不支持 (并且都不太适配我的css)
  • hl:, 冒号语法
    • 和上面反过来

一些对比优缺点

• Notaion语法
  • 一个优点是便于修改，插入删除。不需要担心插入代码会修改行号。
    而Meta语法如果你插入或删除了代码行，就得重新调整行号了，对于需要频繁修改的场景非常难受。
  • 失效时依然能标注声明行，因为如果失效了你的注释就会代替颜色高亮用来标注（除非是生效解析了，但css没有应用的半生效场景）。
    而Meta语法如果失效了，虽然仍能向下兼容保证代码高亮的稳定性，但标注信息仍会丢失。没有任何途径能看出你所要强调的行。特别是对于迁移平台和导出pdf等行为

测试区

some code ...

fsd

dfgs

dfgs

fdg

fdgsf
fgd
sdg
sdfg

// [!code highlight:2]
1
2
3
4 // [!code]
console.log('--') // [!code --]
console.log('++') // [!code ++]
console.log('highlight') // [!code highlight]
console.log('hl') // [!code hl]
console.log('focus') // [!code focus]
console.error('error') // [!code error]
console.warn('warning') // [!code warning]

// [!code highlight:2]
1
2
3
4 // [!code]
console.log('--') // [!code --]
console.log('++') // [!code ++]
console.log('highlight') // [!code highlight]
console.log('hl') // [!code hl]
console.log('focus') // [!code focus]
console.error('error') // [!code error]
console.warn('warning') // [!code warning]