代码块
添加带语法高亮、行号、文件名和行高亮的代码块，并使用 CodeGroup 展示多语言示例。
使用代码块展示命令、配置文件和带语法高亮的代码片段。
基本语法高亮
const greeting = "Hello, Jamdesk!";
console.log(greeting);添加文件名
使用 title 属性显示文件路径：
src/config.ts
export const config = {
name: "My Docs",
theme: "jam"
};行高亮
使用 {1,3-5} 语法突出显示特定行：
// This line is highlighted
const config = {
apiKey: process.env.API_KEY,
baseUrl: 'https://api.example.com', // highlighted
timeout: 5000, // highlighted
retries: 3, // highlighted
};行号
使用 showLineNumbers 添加行号：
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n - 1) + fibonacci(n - 2)自定义起始行
从指定行开始编号：
func processRequest(ctx context.Context) error {
// This is line 42
return nil
}组合功能
同时使用多个功能：
api/client.ts showLineNumbers {3-5}
import axios from 'axios';
const client = axios.create({
baseURL: process.env.API_URL,
timeout: 10000,
});
export default client;代码组
以多种语言展示相同的代码：
curl -X POST https://api.example.com/posts \
-H "Authorization: Bearer $API_KEY"可用主题
在 docs.json 中配置语法高亮主题：
docs.json
{
"styling": {
"codeblocks": {
"theme": {
"light": "github-light",
"dark": "github-dark"
}
}
}
}热门主题包括：
- GitHub：
github-dark、github-light、github-dark-default、github-light-default - 深色主题：
tokyo-night、one-dark-pro、dracula、nord、vitesse-dark - 浅色主题：
vitesse-light、min-light - Catppuccin：
catppuccin-mocha、catppuccin-latte
CSS 变量主题
如需完全控制语法高亮颜色，请使用 CSS 变量主题：
docs.json
{
"styling": {
"codeblocks": {
"theme": "css-variables"
}
}
}然后在 style.css 中自定义颜色：
style.css
:root {
--jd-token-keyword: #ff7b72;
--jd-token-string: #a5d6ff;
--jd-token-comment: #8b949e;
--jd-token-function: #d2a8ff;
--jd-token-constant: #79c0ff;
--jd-token-parameter: #ffa657;
}| 变量 | 说明 |
|---|---|
--jd-color-text | 默认文本颜色 |
--jd-color-background | 代码块背景 |
--jd-token-keyword | 关键字（if、const、function） |
--jd-token-string | 字符串字面量 |
--jd-token-comment | 注释 |
--jd-token-function | 函数名称 |
--jd-token-constant | 常量 |
--jd-token-parameter | 函数参数 |
--jd-token-punctuation | 括号、逗号 |
--jd-token-link | URL 和链接 |