Memos: 博客切换为 Shiki 代码高亮方案

最近将博客的 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 lnln 关键字开启行号,适合引用具体行或展示较长代码片段。

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)
}

然而,估计我还是会用默认效果,不带行号、不带高亮,避免代码过于花里胡哨,遵循 ‘非必要则不使用’ 的原则。