vuepress-theme-plume/skills/vuepress-plume-markdown/resources/code-features.md

Code Block Features

VuePress Plume theme provides rich code block features via Shiki highlighter.

Code Title

Add title="filename.ext" after the language:

```json title="package.json"
{
  "name": "vuepress-theme-plume"
}

## Line Numbers

Theme shows line numbers by default. Control via `codeHighlighter.lineNumbers`:

```typescript title=".vuepress/config.ts"
export default defineUserConfig({
  theme: plumeTheme({
    codeHighlighter: {
      lineNumbers: true, // [!code ++]
    },
  }),
})

Per-block control:

• :line-numbers - Enable line numbers
• :no-line-numbers - Disable line numbers
• :line-numbers=2 - Start from line 2

```ts:line-numbers
// Line numbers enabled
const line2 = 'This is line 2'

// Line numbers disabled
const line3 = 'This is line 3'

// Line numbers start from 2
const line3 = 'This is line 3'

## Line Highlighting

### Bracket Syntax

```markdown
```ts{1,3,5-7}
// Line 1 highlighted
// Line 2 normal
// Line 3 highlighted
// Line 4 normal
// Line 5-7 highlighted

Formats:
- Single line: `{4}`
- Multiple lines: `{5-8}`, `{3-10}`
- Multiple single lines: `{4,7,9}`
- Combined: `{4,7-13,16,23-27,40}`

### Comment Syntax

```markdown
```ts
const a = 1
const b = 2 // [!code highlight]
const c = 3

## Line Focus

Focus a line and dim others:

```markdown
```ts
const a = 1
const b = 2 // [!code focus]
const c = 3

Focus multiple lines:

```markdown
```ts
const a = 1 // [!code focus:3]
const b = 2
const c = 3
const d = 4

## Diff Highlighting

Show code changes:

```markdown
```ts
const oldVal = 'value' // [!code --]
const newVal = 'value' // [!code ++]

## Warning and Error

```markdown
```ts
const warning = 'caution' // [!code warning]
const error = 'failed' // [!code error]

## Word Highlight

Highlight specific words:

```markdown
```ts
// [!code word:config]
const config = {}
console.log(config)

Highlight with count limit:

```markdown
```ts
// [!code word:api:2]
const api = {}
const apiClient = {}
const apiKey = {} // Not highlighted

## Whitespace Visibility

Show tabs and spaces:

```markdown
```ts:whitespace
const a = 1

Global enable:

```typescript title=".vuepress/config.ts"
export default defineUserConfig({
  theme: plumeTheme({
    codeHighlighter: {
      whitespace: true, // [!code ++]
    },
  }),
})

When enabled globally, use :no-whitespace to disable per block.

Collapsed Lines

Collapse long code blocks (default from line 15):

```ts:collapsed-lines
// Lines after 15th will be collapsed

// Lines after 10th will be collapsed

Global enable:

```typescript title=".vuepress/config.ts"
export default defineUserConfig({
  theme: plumeTheme({
    codeHighlighter: {
      collapsedLines: true, // [!code ++]
    },
  }),
})

When enabled globally, use :no-collapsed-lines to disable per block.

Combining Features

Multiple features can be combined:

```ts:title="example.ts":line-numbers {2,4}
const a = 1
const b = 2 // [!code ++]
const c = 3
const d = 4 // [!code focus]

## Language-Specific Comments

Different languages use different comment syntax:

| Language | Highlight | Focus | Diff Add | Diff Remove |
|----------|-----------|-------|----------|-------------|
| JS/TS/JSX/TSX | `// [!code highlight]` | `// [!code focus]` | `// [!code ++]` | `// [!code --]` |
| Python/Ruby/YAML | `# [!code highlight]` | `# [!code focus]` | `# [!code ++]` | `# [!code --]` |
| CSS/SCSS | `/* [!code highlight] */` | `/* [!code focus] */` | `/* [!code ++] */` | `/* [!code --] */` |
| HTML/XML | `<!-- [!code highlight] -->` | `<!-- [!code focus] -->` | `<!-- [!code ++] -->` | `<!-- [!code --] -->` |
| Bash/Shell | `# [!code highlight]` | `# [!code focus]` | `# [!code ++]` | `# [!code --]` |
| SQL | `-- [!code highlight]` | `-- [!code focus]` | `-- [!code ++]` | `-- [!code --]` |
| Rust | `// [!code highlight]` | `// [!code focus]` | `// [!code ++]` | `// [!code --]` |
| Go | `// [!code highlight]` | `// [!code focus]` | `// [!code ++]` | `// [!code --]` |

## Global Configuration

```typescript title=".vuepress/config.ts"
export default defineUserConfig({
  theme: plumeTheme({
    codeHighlighter: {
      lineNumbers: true, // Enable line numbers globally
      whitespace: false, // Show whitespace globally
      collapsedLines: false, // Collapse lines globally
      theme: { light: 'github-light', dark: 'github-dark' },
      languages: ['js', 'ts', 'vue', 'bash', 'json'],
      twoslash: false, // TypeScript twoslash
    },
  }),
})