---
title: 'Advanced rehype-pretty-code & Shiki Examples'
date: '2025-08-29'
excerpt: 'Every Shiki transformer with Source (literal markup) then Result (live render) — diff, highlight, focus, word IDs, and CodeTabs.'
tags: ['rehype-pretty-code', 'shiki', 'transformers', 'mdx', 'code']
---

In-depth examples of rehype-pretty-code + Shiki transformers. Each section shows **Source** (what you type) then **Result** (styled output).

For non-code MDX components, see the [content authoring guide](/blog/guides/content-authoring).

## How Source works

To document a fence without it becoming the live example, wrap it in a **longer** outer fence (four backticks + `mdx`). Do not escape with `\````.

---

## Inline code

Inline code is unaffected by transformers and uses the shared `code` component.

**Source**

````mdx
Inline code like `console.log('hello')` stays compact.
````

**Result**

Inline code like `console.log('hello')` stays compact.

---

## Diff (`[!code ++]` / `[!code --]`)

Marks added and removed lines (`transformerNotationDiff`, v3 matching).

**Source**

````mdx
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
````

**Result**

```ts
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
```

Removed lines get a red tint; added lines green. The `<pre>` gains `has-diff`.

---

## Error / warning (`[!code error]` / `[!code warning]`)

`transformerNotationErrorLevel`.

**Source**

````mdx
console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]
````

**Result**

```ts
console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]
```

---

## Line highlight (meta `{…}`)

Highlight ranges via fence meta. Prefer `showLineNumbers` when teaching line ranges.

**Source**

````mdx
`ts showLineNumbers {1-2}
console.log('Highlighted line 1')
console.log('Highlighted line 2')
console.log('Not highlighted')
````

**Result**

```ts showLineNumbers {1-2}
console.log('Highlighted line 1')
console.log('Highlighted line 2')
console.log('Not highlighted')
```

### Multiple ranges

**Source**

````mdx
`js showLineNumbers {1} {3-4}
function helloWorld() {
    // this is a comment
    let greeting = 'Hello World!'
    console.log(greeting)
}
````

**Result**

```js showLineNumbers {1} {3-4}
function helloWorld() {
    // this is a comment
    let greeting = 'Hello World!'
    console.log(greeting)
}
```

---

## Word highlight (`/word/`)

`transformerNotationWordHighlight` via fence meta.

**Source**

```mdx
`ts /Hello/
const message = 'Hello World'
console.log(message) // prints Hello World
console.log('Hello again') // not highlighted
```
**Result**

```ts /Hello/
const message = 'Hello World'
console.log(message) // prints Hello World
console.log('Hello again') // not highlighted
```

### Function name

**Source**

```mdx
`js showLineNumbers /helloWorld()/
function helloWorld() {
    // this is a comment
    let greeting = 'Hello World!'
    console.log(greeting)
}
```

**Result**

```js showLineNumbers /helloWorld()/
function helloWorld() {
    // this is a comment
    let greeting = 'Hello World!'
    console.log(greeting)
}
```

### Word + custom ID

Unlimited highlight variants via IDs (`/greeting/#mySpecialHighlight`). Style `#mySpecialHighlight` in CSS if needed.

**Source**

```mdx
`js showLineNumbers /greeting/#mySpecialHighlight
function helloWorld() {
    // this is a comment
    let greeting = 'Hello World!'
    console.log(greeting)
}
```

**Result**

```js showLineNumbers /greeting/#mySpecialHighlight
function helloWorld() {
    // this is a comment
    let greeting = 'Hello World!'
    console.log(greeting)
}
```

Both occurrences of `greeting` highlight. To target only the second, add the occurrence index after the second slash:

**Source**

```mdx
`js showLineNumbers /greeting/2#mySpecialHighlight
function helloWorld() {
    // this is a comment
    let greeting = 'Hello World!'
    console.log(greeting)
}
```

**Result**

```js showLineNumbers /greeting/2#mySpecialHighlight
function helloWorld() {
    // this is a comment
    let greeting = 'Hello World!'
    console.log(greeting)
}
```

---

## Focus (`[!code focus]` / `[!code focus:N]`)

`transformerNotationFocus` dims non-focused lines.

**Source**

```mdx
console.log('Not focused')
console.log('Not focused')
console.log('Not focused')
// [!code focus:2]
console.log('Focused line 1')
console.log('Focused line 2')
console.log('Not focused')
console.log('Not focused')
console.log('Not focused')
```

**Result**

```ts
console.log('Not focused')
console.log('Not focused')
console.log('Not focused')
// [!code focus:2]
console.log('Focused line 1')
console.log('Focused line 2')
console.log('Not focused')
console.log('Not focused')
console.log('Not focused')
```

Focused lines stay bright; the `<pre>` gains `has-focused`.

---