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