Code Blocks

Code blocks display formatted code with syntax highlighting, powered by Shiki (same as VS Code). This guide covers all the features available.

Basic Syntax

Wrap code in triple backticks with an optional language identifier:

```javascript
const greeting = 'Hello, World!';
console.log(greeting);
```

Result:

const greeting = 'Hello, World!';
console.log(greeting);

Supported Languages

Common languages include:

Code Block Titles

Add a filename or title using the title attribute:

```js title="app.js"
import express from 'express';
const app = express();
app.listen(3000);
```

Result:

import express from 'express';
const app = express();
app.listen(3000);

Line Numbers

Show line numbers with showLineNumbers:

```js showLineNumbers
const a = 1;
const b = 2;
const c = 3;
```

Result:

 1const a = 1;
 2const b = 2;
 3const c = 3;

Start from a specific line with startLineNumber:

```js showLineNumbers startLineNumber=10
// This starts at line 10
const x = 1;
```

Line Highlighting

Highlight specific lines using curly braces:

```js {2,4}
const a = 1;
const b = 2;  // highlighted
const c = 3;
const d = 4;  // highlighted
```

Result:

const a = 1;
const b = 2;
const c = 3;
const d = 4;

Line Ranges

Specify ranges with a hyphen:

```js {1-3}
// Lines 1-3 highlighted
const x = 1;
const y = 2;
const z = 3;
```

Insert and Delete Markers

Mark lines as added or removed:

```js ins={2} del={4}
const a = 1;
const b = 2;  // inserted (green)
const c = 3;
const d = 4;  // deleted (red)
```

Result:

const a = 1;
const b = 2;
const c = 3;
const d = 4;

Text Markers

Highlight specific text within code:

```js "console"
console.log('Hello');
console.error('Error');
```

Result:

console.log('Hello');
console.error('Error');

Insert and Delete Text

Mark text as added or removed:

```js ins="log" del="error"
console.log('Hello');
console.error('Error');
```

Diff Syntax

Use the diff language for diff-style code:

```diff
+ added line
- removed line
  unchanged line
```

Result:

 added line
 removed line
 unchanged line

Diff with Syntax Highlighting

Combine diff with language highlighting using lang:

```diff lang="js"
+ const x = 1;
- const x = 2;
  const y = 3;
```

Result:

 const x = 1;
 const x = 2;
 const y = 3;

Combining Features

Combine multiple features:

```js title="utils.js" showLineNumbers {3-5}
// Utility functions

export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}
```

Result:

 1// Utility functions
 2
 3export function add(a, b) {
 4    return a + b;
 5}
 6
 7export function subtract(a, b) {
 8    return a - b;
 9}

Inline Code

For inline code within text, use single backticks:

Use the `console.log()` function to debug.

Result: Use the console.log() function to debug.

Feature Summary

Best Practices

1. Always specify the language - Enables syntax highlighting
2. Use titles for file references - Helps readers understand context
3. Keep code concise - Show only relevant code
4. Highlight important lines - Draw attention to key parts
5. Use diff for changes - Show what's added/removed clearly

Related Features

• Terminal Output - Display command-line examples
• Annotations - Add explanatory notes to code