最近将博客的 highlight.js + Pygments 的高亮方案替换为 github.com/shikijs/shiki,这里记几个我觉得有意思、最实用的效果。
Diff 效果
在行尾写注释 // [!code --] 和 // [!code ++],无行号和有行号两种场景效果不同。
无行号 - / + 悬在行首:
func greet(name string) string {
return "Hello, " + name // [!code --]
return "Hi, " + name // [!code ++]
}
开启行号时符号合并进行号列,颜色跟随变化:
```go ln func greet(name string) string { return "Hello, " + name // [!code --] return "Hi, " + name // [!code ++] }
<!--more-->
**Focus 聚焦效果**
非焦点行淡出,突出当前关注的逻辑。
```go
func login() {
validate() // [!code focus]
requestToken()
saveSession()
}
语义高亮
[!code highlight] 是无语义的通用版;info / warning / error 是有语义的递进版,适合标注关键路径、潜在问题和错误。
func insertionSort(nums []int) {
for i := 1; i < len(nums); i++ { // [!code highlight]
key := nums[i]
j := i - 1
for j >= 0 && nums[j] > key {
nums[j+1] = nums[j]
j--
}
nums[j+1] = key // [!code info]
}
}
func sortAndPrint(data []int) {
if data == nil { // [!code warning]
return
}
insertionSort(data)
fmt.Println(data[len(data)]) // [!code error]
}
func main() {
nums := []int{5, 3, 8, 1, 9, 2}
sortAndPrint(nums)
}
Hover 装饰效果
鼠标悬停才高亮,适合标注 "需要关注但不需要一直突出" 的行。
func div(a, b int) int {
result := a / b
logValue(result) // [!code hover]
return result
}
行号(Line Numbers)
使用 ```go ln,ln 关键字开启行号,适合引用具体行或展示较长代码片段。
```go ln package main
import "fmt"
func fibonacci(n int) int { if n <= 1 { return n } return fibonacci(n-1) + fibonacci(n-2) }
func main() { fmt.Println(fibonacci(10)) }
**范围行高亮效果**
在 info 字符串里声明高亮行,不在代码内容里留注释标记,适合引用第三方代码。`ln` 和 `{范围}` 可以组合使用。
示例中的标签是:`` ```go ln {6,8-10} ``
```go ln {6,8-10}
package main
import "fmt"
func main() {
nums := []int{1, 2, 3, 4, 5}
sum := 0
for _, v := range nums {
sum += v
}
fmt.Println(sum)
}
然而,估计我还是会用默认效果,不带行号、不带高亮,避免代码过于花里胡哨,遵循 ‘非必要则不使用’ 的原则。