惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

量子位
Stack Overflow Blog
Stack Overflow Blog
人人都是产品经理
人人都是产品经理
The GitHub Blog
The GitHub Blog
Engineering at Meta
Engineering at Meta
Vercel News
Vercel News
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Y
Y Combinator Blog
The Cloudflare Blog
Last Week in AI
Last Week in AI
B
Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Tailwind CSS Blog
V
Visual Studio Blog
博客园 - 三生石上(FineUI控件)
小众软件
小众软件
Google DeepMind News
Google DeepMind News
D
DataBreaches.Net
博客园 - 司徒正美
B
Blog RSS Feed
Microsoft Azure Blog
Microsoft Azure Blog
罗磊的独立博客
Hugging Face - Blog
Hugging Face - Blog
L
LangChain Blog

东东's Blog

Memos: MacOS 下编译安装 Aseprite 脚本 日本关西系列|Day 2 京都的半日闲逛 美国Apple官网购买礼品卡订阅 ChatGPT Plus 北京・中关村森林公园(2026) 日本关西系列|Day 1 抵达临空城与大阪首日 Memos: 查询 Apple ID 注册时间 Memos: Ghostty 开箱即用配置 代码考古:用 gitcharts 挖掘 Git 仓库的演变轨迹 烹饪日记:香煎罗非鱼 Memos: 新时代程序员的顶级焦虑 Memos: 博客新增图文布局和轮播图效果支持 Memos: 最适合空气炸锅烤着吃的红薯品类 Memos: 记录「95分」好吃的‘小帅香菇面’ 妻子爷爷的‘朝鲜军功奖章’ Memos: 博客新增划线、重点及荧光笔效果支持 记录博客字体分包与字体子集化 Memos: 邻座吃饭的一家三口 人在囧途之哈囧 哈尔滨・乡村的冬季 查看香烟生产日期 哈尔滨・东北虎林园 Memos: 来自日本的 ndjp 提供免费的三级子域名 Memos: 刚听说 autojump, 真的好用 Memos: 体验 OpenCode + Superpowers + GPT 5.2 开发需求 Memos: 杰我睿爆雷 GoReleaser 自动发布 Go 镜像到 DockerHub & GitHub Release 初识 Volta & Corepack 前端版本管理工具 部署 Beszel 把 “小鸡们” 归拢起来 Memos: Claude Code in Action 中文版教程 2025 年度回顾
Memos: 博客切换为 Shiki 代码高亮方案
2026-03-06 · via 东东's Blog

最近将博客的 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)
}

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