代码高亮

代码高亮我们使用 Shiki，由于使用了 Server Component，所以在 SSG 阶段就会把代码高亮插入到渲染后的 HTML 中，即使是引入了全量的代码高亮，对编译之后的包体积也不会变大。

另外，一下是一些代码块需要注意的地方。

文件标头

```json filename="index.json"
[
  {
    "paths": [
      "./sections/guide/what-this.md"
    ],
    "title": "开始"
  },
  {
    "paths": [
      "./sections/usage/markdown.md"
    ],
    "title": "使用"
  }
]
```

我们可以使用 filename="" 的语法增加代码块标头。

index.json

[
  {
    "paths": ["./sections/guide/what-this.md"],
    "title": "开始"
  },
  {
    "paths": ["./sections/usage/markdown.md"],
    "title": "使用"
  }
]

高亮

const Hi = 'Hi'

const Hi = 'Hi'

上面的两种用法为：

```tsx {1}
const Hi = 'Hi'
```

```tsx
const Hi = 'Hi'
```

Diff

const Hi = 'Hi'

const Foo = 'bar'

上面的用法为：

```tsx
const Hi = 'Hi'

const Foo = 'bar'
```

更多信息，请参阅 Shiki transformers

最后更新于 2024/8/15 21:57:42

更新历史

本书还在编写中..

前往 https://innei.in/posts/tech/my-first-nextjs-book-here#comment 发表你的观点吧。