此页内容

特性支持

pengzhanbo

665字约2分钟

2024-04-04

主题在代码高亮功能上，进一步支持了更多的特性，它们能够帮助你的代码块更加具备表达力。

在代码块中实现行高亮

在 [lang] 之后紧跟随 {xxxx} ，可以实现行高亮，其中 xxx 表示要高亮的行号。

输入：

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

输出：

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

除了单行之外，还可以指定多个单行、多行，或两者均指定：

多行：例如 {5-8}、{3-10}、{10-17}
多个单行：例如 {4,7,9}
多行与单行：例如 {4,7-13,16,23-27,40}

输入：

```js{1,4,6-8}
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}
```

输出：

export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}

也可以使用 // [!code highlight] 注释实现行高亮。

输入：

```js
export default {
  data () {
    return {
      msg: 'Highlighted!' // [!code highlight]
    }
  }
}
```

输出：

export default {
  data() {
    return {
      msg: 'Highlighted!'
    }
  }
}

代码块中聚焦

在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。

此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数。

输入：

```js
export default {
  data () {
    return {
      msg: 'Focused!' // [!code focus]
    }
  }
}
```

输出：

export default {
  data() {
    return {
      msg: 'Focused!'
    }
  }
}

代码块中的颜色差异

在某一行添加 // [!code --] 或 // [!code ++] 注释将会为该行创建 diff，同时保留代码块的颜色。

输入：

```js
export default {
  data () {
    return {
      msg: 'Removed', // [!code --]
      msg: 'Added' // [!code ++]
    }
  }
}
```

输出：

export default {
  data() {
    return {
      msg: 'Removed',
      msg: 'Added'
    }
  }
}

高亮“错误”和“警告”

在某一行添加 // [!code warning] 或 // [!code error] 注释将会为该行相应的着色。

输入：

```js
export default {
  data () {
    return {
      msg: 'Error', // [!code error]
      msg: 'Warning' // [!code warning]
    }
  }
}
```

输出：

export default {
  data() {
    return {
      msg: 'Error',
      msg: 'Warning'
    }
  }
}

代码块中词高亮

输入：

```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:options:2] 会高亮显示近两个 options。

输入：

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

输出：

const options = { foo: 'bar' }
options.foo = 'baz'
console.log(options.foo) // 这个不会被高亮显示

代码块中的空白符

将空白字符（Tab 和空格）渲染为可见状态。

渲染每行代码行前的空格：

输入：

```xml whitespace
<catalog>
    <book>
        <title>Everyday Italian</title>
    </book>
</catalog>
```
```

输出：

<catalog>
    <book>
        <title>Everyday Italian</title>
    </book>
</catalog>

渲染每行代码行前的 Tab ：

输入：

```xml whitespace
<catalog>
	<book>
		<title>Everyday Italian</title>
	</book>
</catalog>
```

输出：

<catalog>
	<book>
		<title>Everyday Italian</title>
	</book>
</catalog>

还可以在 theme.plugins.shiki 中全局启用 whitespace 功能：

.vuepress/config.ts

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