Expressive Code 代码展示

本文展示 Expressive Code 提供的代码块能力。它可以为文章中的代码自动加入语法高亮、编辑器边框和行号。

语法高亮#

1
console.log('这行代码会获得语法高亮')

也可以渲染 ANSI 颜色：

1
ANSI 颜色：
2
- 普通：红 绿 黄 蓝 紫 青
3
- 粗体：红 绿 黄 蓝 紫 青

编辑器与终端边框#

通过 title 属性为代码块设置文件名：

1
console.log('欢迎来到 Fuwari')

终端命令会使用终端边框：

1
echo "这是一条终端命令"

也可以手动覆盖边框类型：

1
echo "这个代码块没有边框"

行与文本标记#

用行号标出关键位置：

1
function buildSite() {
2
  const content = '你好'
3
  const language = 'zh_CN'
4
  return { content, language }
5
}

插入和删除标记有助于展示改动：

1
const siteTitle = '示例站点'
2
const siteLanguage = '英文'
3
const siteTitle = '中文博客'
4
const siteLanguage = 'zh_CN'

自动换行与折叠#

长行可通过 wrap 开启换行：

1
const description = '这是一段较长的说明文字，在较窄的阅读区域中会自动换行，避免横向滚动。'

折叠区域适合隐藏不需要立即阅读的初始化代码：


4 collapsed lines
1
const config = loadConfig()
2
const posts = await loadPosts()
3
const index = createSearchIndex(posts)
4
prepareTheme(config)
5

6
render(posts)
7

8
function render(items) {
9
  console.log(`已渲染 ${items.length} 篇文章`)
10
}
11

3 collapsed lines
12
index.save()
13
cleanup()
14
closeConnection()

行号#

为代码块加入行号，并可指定起始行：

5
console.log('第五行')
6
console.log('第六行')