代码高亮

VitePress 基于 Shiki 提供强大的语法高亮，支持数百种编程语言与主题，并具备行高亮、行号、Diff 高亮、代码分组等增强功能。

基础语法高亮

JavaScript

function greet(name) {
  return `你好，${name}!`
}

const message = greet('世界')
console.log(message)

TypeScript

interface User {
  id: number
  name: string
  email: string
}

function createUser(userData: Partial<User>): User {
  return {
    id: Date.now(),
    name: userData.name || '匿名',
    email: userData.email || ''
  }
}

Vue

<!-- Vue 组件示例 -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="increment">计数：{{ count }}</button>
  </div>
  </template>

<script setup>
import { ref } from 'vue'

const msg = ref('你好，VitePress!')
const count = ref(0)

const increment = () => {
  count.value++
}
  </script>

<style scoped>
.hello {
  text-align: center;
  padding: 20px;
}
</style>

CSS

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
}

.button {
  background: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.button:hover {
  background: #369870;
}

行高亮与行号

单行高亮

function processData(data) {
  const result = data.map(item => item * 2)  // 高亮此行
  return result.filter(item => item > 10)
}

多行高亮

const config = {  // 高亮第 1 行
  name: '我的应用',
  version: '1.0.0',  // 高亮第 3-4 行
  author: '张三'
}

行区间

export default {
  data() {
    return {
      message: '你好',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

Diff 高亮

function processData(data) {
-  const result = data.map(item => item * 2)
+  const result = data
+    .filter(item => item > 0)
+    .map(item => item * 2)
  return result
}

行内代码与代码分组

行内代码

为行内代码设置语言：const message = 'Hello'

代码分组

对比不同实现：

JavaScript

function fibonacci(n) {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

TypeScript

function fibonacci(n: number): number {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

Python

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

性能建议

优化大体积代码块

对体积较大的代码示例，建议采用导入方式：

// 导入大型代码示例
import largeFile from '@/examples/large-file.js'

按需加载

按需加载示例组件：

// 按需加载组件
const LazyComponent = () => import('./LazyComponent.vue')

最佳实践

指定语言

始终为代码块指定语言以获得更好的高亮：

// 推荐 - 指定了语言
const message = 'Hello'

// 不推荐 - 未指定语言
const message = 'Hello'

合理使用行高亮

行高亮应当用于强调关键逻辑：

function processUser(user) {
  // 校验用户数据
  if (!user.name || !user.email) {  // 高亮校验
    throw new Error('用户数据无效')
  }
  return user
}

注释

为示例代码添加有意义的注释：

// 计算数组元素之和
function sum(arr) {
  return arr.reduce((acc, val) => acc + val, 0)
}

// 示例
const numbers = [1, 2, 3, 4, 5]
const total = sum(numbers) // 返回 15

支持的语言

VitePress 支持数百种编程语言，包括但不限于：

• JavaScript/TypeScript
• Python
• Java
• C/C++
• Rust
• Go
• PHP
• Ruby
• Swift
• Kotlin
• 等等……

完整列表请参见 Shiki 文档。