此页内容

约 448 字大约 1 分钟

2023-12-23

代码块高亮 由 @vuepress-plume/plugin-shikiji 提供支持。

为 代码块提供更丰富的 高亮效果,为你在编辑内容时,更好的表达你的想法。

Highlight

使用 [!code highlight] 高亮某一行代码

```ts
export function foo() {
  console.log('Highlighted') // [!code highlight]
}
```

效果:

export function foo() {
  console.log('Highlighted')
}

Diff

使用 [!code ++][!code --] 标记 新增 或 删除 行

```ts
export function foo() {
  console.log('hewwo') // [!code --]
  console.log('hello') // [!code ++]
}
```

效果:

export function foo() {
  console.log('hewwo')
  console.log('hello')
}

Focus

使用 [!code focus] 选中某一行代码,并将其聚焦,模糊显示其他行。

```ts
export function foo() {
  console.log('Focused') // [!code focus]
}
```

效果:

export function foo() {
  console.log('Focused')
}

Error Level

使用 [!code error][!code warning] 标记错误和警告

```ts
export function foo() {
  console.error('Error')  // [!code error]
  console.warn('Warning') // [!code warning]
}
```

效果:

export function foo() {
  console.error('Error')
  console.warn('Warning')
}

Highlight Word

使用 [!code word:xxx] 标记并突出显示某个单词

```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:xxx:number] 标记并突出显示最近出现number次数的某个单词。

```ts
// [!code word:options:2]
const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo) // 当前 options 不会被高亮
```

效果:

const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo) // 当前 options 不会被高亮

Whitespace

注意

该功能默认不启用,需要在 主题插件配置选项中手动开启:

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      shikiji: {
        whitespace: true
      }
    }
  })
})

显示代码块中的 空白空间 (spacetab) 。 出于UI效果考虑,仅显示 缩进部分的 空白空间。

```ts
function block() {
  space()
		table() 
}
```

效果:

function block() {
  space()
		table() 
}