语法高亮

Quartz 的语法高亮完全在构建时完成。这意味着 Quartz 只会预先生成高亮所需的 CSS 文件，无需在客户端加载笨重的语法高亮工具包。

与某些客户端高亮方案不同，Quartz 采用完整的 TextMate 解析器语法而非正则表达式，因此能实现更精准的代码高亮效果。

简而言之，它生成的 HTML 代码在视觉效果上与 VS Code 等编辑器中的代码呈现完全一致。底层技术基于 Rehype Pretty Code，后者使用了 Shiki 作为核心引擎。

Warning

如果笔记中包含大量代码片段，语法高亮功能会对构建速度产生一定影响。

格式规范

单独成行的 反引号包裹内容 将被格式化为代码块。

```ts


```typescript
export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor

  return cleanPath + anchor
}
```
```

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

标题

在代码块前添加文件标题，标题文字需放在双引号（""）内：

# 文件名: "示例脚本.py"
def main():
    print("Hello World")
 
if __name__ == "__main__":
    main()

```js title="..."

```

quartz/path.ts

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

行高亮

在 {} 内放置一个数字范围。

```js {1-3,4}

```

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

单词高亮

一系列字符，类似于字面正则表达式。

```js /useState/


```javascript
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
```
```

const [age, setAge] = useState(50)
const [name, setName] = useState("Taylor")

行内代码高亮

在行内代码的末尾添加 {:lang}，即可像常规代码块一样高亮显示。

This is an array `[1, 2, 3]{:js}` of numbers 1 through 3.

这是一个包含数字1到3的数组 [1, 2, 3]。

行号显示

语法高亮功能已自动配置行号显示。若需要从特定数字开始显示行号，请使用 showLineNumbers{number}：

```js showLineNumbers{number}

```

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

转义代码块

在代码块内部嵌套另一个代码块时，可以通过添加比原有围栏多一个反引号的新围栏来实现。

````
```js /useState/
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
```
````

自定义

语法高亮是 SyntaxHighlighting 插件的功能。有关自定义选项，请参阅插件页面。