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

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

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

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