feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
243
skills/vitepress/references/features-code-blocks.md
Normal file
243
skills/vitepress/references/features-code-blocks.md
Normal file
@@ -0,0 +1,243 @@
|
||||
---
|
||||
name: vitepress-code-blocks
|
||||
description: 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:
|
||||
|
||||
````md
|
||||
```js
|
||||
export default {
|
||||
name: 'MyComponent'
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
Supports [all languages](https://shiki.style/languages) available in Shiki.
|
||||
|
||||
## Line Highlighting
|
||||
|
||||
Highlight specific lines:
|
||||
|
||||
````md
|
||||
```js{4}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Highlighted!' // Line 4 highlighted
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
Multiple lines and ranges:
|
||||
|
||||
````md
|
||||
```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:
|
||||
|
||||
````md
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Highlighted!' // [!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
## Focus
|
||||
|
||||
Blur other code and focus specific lines:
|
||||
|
||||
````md
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Focused!' // [!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
Focus multiple lines:
|
||||
|
||||
```js
|
||||
// [!code focus:3]
|
||||
```
|
||||
|
||||
## Colored Diffs
|
||||
|
||||
Show additions and removals:
|
||||
|
||||
````md
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Removed' // [!code --]
|
||||
msg: 'Added' // [!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
## Errors and Warnings
|
||||
|
||||
Color lines as errors or warnings:
|
||||
|
||||
````md
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Error', // [!code error]
|
||||
msg: 'Warning' // [!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
## Line Numbers
|
||||
|
||||
Enable globally:
|
||||
|
||||
```ts
|
||||
// .vitepress/config.ts
|
||||
export default {
|
||||
markdown: {
|
||||
lineNumbers: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Per-block override:
|
||||
|
||||
````md
|
||||
```ts:line-numbers
|
||||
// Line numbers enabled
|
||||
const a = 1
|
||||
```
|
||||
|
||||
```ts:no-line-numbers
|
||||
// Line numbers disabled
|
||||
const b = 2
|
||||
```
|
||||
````
|
||||
|
||||
Start from specific number:
|
||||
|
||||
````md
|
||||
```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:
|
||||
|
||||
````md
|
||||
::: code-group
|
||||
|
||||
```js [JavaScript]
|
||||
export default { /* ... */ }
|
||||
```
|
||||
|
||||
```ts [TypeScript]
|
||||
export default defineConfig({ /* ... */ })
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
## Import Code Snippets
|
||||
|
||||
From external files:
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.js
|
||||
```
|
||||
|
||||
With highlighting:
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.js{2,4-6}
|
||||
```
|
||||
|
||||
Specific region:
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.js#regionName{1,2}
|
||||
```
|
||||
|
||||
With language and line numbers:
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}
|
||||
```
|
||||
|
||||
In code groups:
|
||||
|
||||
```md
|
||||
::: code-group
|
||||
|
||||
<<< @/snippets/config.js [JavaScript]
|
||||
<<< @/snippets/config.ts [TypeScript]
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
## File Labels
|
||||
|
||||
Add filename labels to code blocks:
|
||||
|
||||
````md
|
||||
```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
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://vitepress.dev/guide/markdown#syntax-highlighting-in-code-blocks
|
||||
- https://vitepress.dev/guide/markdown#line-highlighting-in-code-blocks
|
||||
-->
|
||||
Reference in New Issue
Block a user