Expressive Code 用法 - 曦の休息处

763 字

4 分钟

Expressive Code 用法

2024-04-10

Blog

Markdown

/

Fuwari

本站使用 Expressive Code 渲染代码块。它会在普通 Markdown 代码块的基础上增加语法高亮、文件名、终端样式、行号、行标记、diff 标记和折叠区域。

基础代码块#

在三个反引号后写语言名，就可以得到对应语言的语法高亮。

1
console.log('This code is syntax highlighted!')

不知道该写什么语言时，可以先写 text。如果是命令行内容，优先使用 bash、sh、powershell 或 shellsession。

文件名和标题#

在代码块开头加 title 可以显示文件名或标题。

1
console.log('Title attribute example')

如果代码前几行是文件名注释，Expressive Code 也可以自动识别成标题。

1
<div>File name comment example</div>

终端视图#

命令行语言会自动使用终端样式。

1
pnpm install
2
pnpm dev

shellsession 适合展示带提示符的连续会话。

$ pnpm check
$ pnpm build

如果某个代码块不想显示编辑器或终端外框，可以设置 frame="none"。

1
echo 'No frame for this block'

行号#

需要明确显示行号时，添加 showLineNumbers。

1
console.log('Greetings from line 1!')
2
console.log('I am on line 2')

不想显示行号时，添加 showLineNumbers=false。

console.log('This block hides line numbers')
console.log('Useful for short examples')

也可以修改起始行号。

5
console.log('Greetings from line 5!')
6
console.log('I am on line 6')

标记整行#

在代码块开头用 {} 指定行号或行范围，就可以高亮对应行。

1
// Line 1 - targeted by line number
2
// Line 2
3
// Line 3
4
// Line 4 - targeted by line number
5
// Line 5
6
// Line 6
7
// Line 7 - targeted by range "7-8"
8
// Line 8 - targeted by range "7-8"

可以用 ins 和 del 区分新增行与删除行；没有指定类型的 {} 会使用普通高亮。

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // This line and the next one are marked as inserted
4
  console.log('this is the second inserted line')
5

6
  return 'this line uses the neutral default marker type'
7
}

标记行内文本#

在开头写一段字符串，可以标记代码中匹配到的文本。也可以使用 ins="..." 和 del="..." 指定新增或删除样式。

1
const legacyId = 'old-id'
2
const accountId = 'new-id'
3
const userId = accountId

Diff 代码块#

使用 diff 语言时，以 + 开头的行会显示为新增，以 - 开头的行会显示为删除。

1
const theme = 'light'
2
const theme = 'dark'
3
const mode = 'auto'

如果希望 diff 同时按某种语言高亮，可以加 lang。

1
export function getTheme() {
2
  return 'light'
3
  return 'dark'
4
}

自动换行#

本站代码块默认适合在窄屏阅读。遇到必须保持横向滚动的长行，可以为单个代码块关闭换行。

1
const longText = 'This is a very long string that should stay on one line when wrap is disabled for this code block.'

折叠代码#

较长示例可以用 collapse 折叠不重要的行。多个范围用逗号分隔。


5 collapsed lines
1
import { createClient } from '@example/client'
2
import { readConfig } from '@example/config'
3
import { createLogger } from '@example/logger'
4

5
const config = readConfig()
6
const logger = createLogger(config.logLevel)
7
const client = createClient(config)
8

9
export async function main() {
10
  logger.info('start')
11
  const result = await client.fetch('/api/status')
12
  logger.info(result.status)
13
  return result
14
}
15

16
await main()
3 collapsed lines
17

18
client.close()
19
logger.info('done')