建站: code highlight by expressive-code • CCM

📌 自定义插件#

Focus 插件#

使用 focus={3-5} 参数或行内 // [!focus] 注释，指定行高亮聚焦，其他行淡化：

1
function calculateTotal(items) {
2
  let total = 0
3
  for (const item of items) {       // ← 第3行 聚焦
4
    total += item.price * item.quantity  // ← 第4行 聚焦
5
  }                                  // ← 第5行 聚焦
6
  return total
7
}

行内注释方式（// [!focus] 会被自动移除）：

1
function processData(data) {
2
  const validated = validateInput(data)
3
  const transformed = transformData(validated)
4
  const result = saveToDatabase(transformed)
5
  return result
6
}

Python 风格（# [!focus]）：

1
def calculate_fibonacci(n):
2
    if n <= 1:
3
        return n
4

5
    a, b = 0, 1
6
    for _ in range(2, n + 1):
7
        a, b = b, a + b
8

9
    return b

Footnotes 插件#

使用 // [!note:N] 注释内容 添加代码脚注：

1
import express from 'express'1️⃣
2
import cors from 'cors'3️⃣
3

4
const app = express()2️⃣
5

6
app.use(cors())
7
app.use(express.json())4️⃣
8

9
app.listen(3000)

1️⃣Express Web 框架
2️⃣创建实例
3️⃣跨域处理
4️⃣解析 JSON

自动编号（// [!note] 不指定编号）：

1
import pandas as pd1️⃣
2
import numpy as np2️⃣
3

4
df = pd.read_csv('data.csv')3️⃣
5
df['norm'] = df['value'] / df['value'].max()4️⃣
6

7
print(df.head())

1️⃣Pandas 数据分析库
2️⃣NumPy 数组计算
3️⃣读取 CSV 文件
4️⃣归一化处理

📌 原生功能演示#

基础代码块#

.flex {
  display: flex;
}

Astro
MDX

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

import MdxRepl from '@/custom/components/user/MdxRepl.astro'

折叠代码块#


5 collapsed lines
1
// All this boilerplate setup code will be collapsed
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// This part of the code will be visible by default
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // You can have multiple collapsed sections
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // This will remain visible
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// All this code until the end of the block will be collapsed again
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

行高亮标记#

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

带标签的行标记#

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

行号控制#

1
// This code block will show line numbers
2
console.log('Greetings from line 2!')
3
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

多语言示例#

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

1
name: HelloWorld
2
description: A simple Java program
3
version: 1.0.0
4
mainClass: HelloWorld
5
dependencies:
6
  - java: 11

fatal: refusing to merge unrelated histories

1
{
2
  "name": "HelloWorld",
3
  "description": "A simple Java program",
4
  "version": "1.0.0",
5
  "mainClass": "HelloWorld",
6
  "dependencies": {
7
    "java": "11"
8
  }
9
}

1
def hello_world():
2
    print("Hello, World!")

ANSI 颜色#

[1;4mStandard ANSI colors:[0m
- Dimmed:     [2;30m Black [2;31m Red [2;32m Green [2;33m Yellow [2;34m Blue [2;35m Magenta [2;36m Cyan [2;37m White [0m
- Foreground: [30m Black [31m Red [32m Green [33m Yellow [34m Blue [35m Magenta [36m Cyan [37m White [0m
- Background: [40m Black [41m Red [42m Green [43m Yellow [44m Blue [45m Magenta [46m Cyan [47m White [0m
- Reversed:   [7;30m Black [7;31m Red [7;32m Green [7;33m Yellow [7;34m Blue [7;35m Magenta [7;36m Cyan [7;37m White [0m

.starlight-icons/*
!.starlight-icons/safelist.json

console.log('hi')