代码
约 478 字大约 2 分钟
2024-12-02
代码测试
代码行高亮
输入
```ts {2-4} title=".vuepress/config.ts"
theme: plumeTheme({
codeHighlighter: {
themes: { light: 'github-light', dark: 'github-dark' },
lineNumbers: true, // 启用行号
},
}),
```输出
.vuepress/config.ts
theme: plumeTheme({
codeHighlighter: {
themes: { light: 'github-light', dark: 'github-dark' },
lineNumbers: true, // 启用行号
},
}),除了单行之外，还可以指定多个单行、多行，或两者均指定：
- 多行：例如
{5-8}、{3-10}、{10-17} - 多个单行：例如
{4,7,9} - 多行与单行：例如
{4,7-13,16,23-27,40}
代码折叠
你可以在代码块添加 :collapsed-lines / :no-collapsed-lines 标记来覆盖配置项中的设置。还可以在 :collapsed-lines 之后添加 = 来自定义起始折叠行号，例如 :collapsed-lines=8 表示代码块从第 8 行开始折叠。
html {
margin: 0;
background: black;
height: 100%;
}
body {
margin: 0;
width: 100%;
height: inherit;
}
/* the three main rows going down the page */
body > div {
height: 25%;
}
.thumb {
float: left;
width: 25%;
height: 100%;
object-fit: cover;
}
.main {
display: none;
}
.blowup {
display: block;
position: absolute;
object-fit: contain;
object-position: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
}
.darken {
opacity: 0.4;
}代码标记
注意：代码标记只有特定的语言才能生效。
代码差异标记
输入
```ts
console.log('code')
console.log('ikun')
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
error: 'Error', // [!code error]
warning: 'Warning' // [!code warning]
console.log('goodbye')
```输出
console.log('code')
console.log('ikun')
console.log('hewwo')
console.log('hello')
console.log('goodbye')
error: 'Error',
warning: 'Warning'
console.log('goodbye')代码聚焦标记
输入
```ts
console.log('Not focused')
console.log('Focused') // [!code focus]
console.log('Not focused')
console.log('Not focused')
```输出
console.log('Not focused')
console.log('Focused')
console.log('Not focused')
console.log('Not focused')代码词高亮
输入
```ts
export function foo() { // [!code word:Hello]
const msg = 'Hello World'
console.log(msg) // prints Hello World
}
```输出
export function foo() {
const msg = 'Hello World'
console.log(msg) // prints Hello World
}你还可以指定高亮显示的次数，例如[!code word:hello:1]会高亮显示从本行开始往后近两个hello。