Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

3.3 KiB

Raw Blame History

name, description

name	description
vitepress-code-blocks	Syntax highlighting, line highlighting, colored diffs, focus, and line numbers

Code Blocks

VitePress uses Shiki for syntax highlighting with powerful code block features.

Syntax Highlighting

Specify language after opening backticks:

```js
export default {
  name: 'MyComponent',
};
```

Supports all languages available in Shiki.

Line Highlighting

Highlight specific lines:

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

Multiple lines and ranges:

```js{1,4,6-8}
// Line 1 highlighted
export default {
  data() {
    return {      // Line 4
      msg: 'Hi',
      foo: 'bar', // Lines 6-8
      baz: 'qux'
    }
  }
}
```

Inline highlighting with comment:

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

Focus

Blur other code and focus specific lines:

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

Focus multiple lines:

// [!code focus:3]

Colored Diffs

Show additions and removals:

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

Errors and Warnings

Color lines as errors or warnings:

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

Line Numbers

Enable globally:

// .vitepress/config.ts
export default {
  markdown: {
    lineNumbers: true,
  },
};

Per-block override:

```ts:line-numbers
// Line numbers enabled
const a = 1
```

```ts:no-line-numbers
// Line numbers disabled
const b = 2
```

Start from specific number:

```ts:line-numbers=5
// Starts at line 5
const a = 1  // This is line 5
const b = 2  // This is line 6
```

Code Groups

Tabbed code blocks:

::: code-group

```js [JavaScript]
export default {
  /* ... */
};
```

```ts [TypeScript]
export default defineConfig({
  /* ... */
});
```

:::

Import Code Snippets

From external files:

<<< @/snippets/snippet.js

With highlighting:

<<< @/snippets/snippet.js{2,4-6}

Specific region:

<<< @/snippets/snippet.js#regionName{1,2}

With language and line numbers:

<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}

In code groups:

::: code-group

<<< @/snippets/config.js [JavaScript]
<<< @/snippets/config.ts [TypeScript]

:::

File Labels

Add filename labels to code blocks:

```js [vite.config.js]
export default defineConfig({});
```

Key Points

Use // [!code highlight] for inline highlighting
Use // [!code focus] to focus with blur effect
Use // [!code ++] and // [!code --] for diffs
Use // [!code error] and // [!code warning] for status
:line-numbers and :no-line-numbers control line numbers per block
@ in imports refers to source root
Code groups create tabbed interfaces

3.3 KiB Raw Blame History