---
title: Shiki Code Highlighting Test
date: 2025-08-11
excerpt: How Shiki renders inline code, code blocks, and transformer markers in my Hexo blog, for checking styles and layout edge cases.
tags:
  - CSS
  - Shiki
  - Markdown
cover: https://assets.vluv.space/cover/FrontEnd/shiki.webp
updated: 2026-07-08 21:22:50
lang: en
i18n:
  cn: /shiki_highlight
  translation: 2
---

To keep the page itself lighter, I no longer put "source / preview" tabs next to each example. If you want the raw Markdown, preview <a href="index.md">index.md</a> in the same directory from the article info popup.

## Inline Code

Shiki supports language markers on inline code. Plain inline code stays as is; to highlight by language, prefix the content with `{language}`.

- **Plain**: `printf("Hello, World")`
- **Python**: `{python} print("Hello, World")`
- **JavaScript**: `{javascript} console.log("Hello, World")`
- **HTML**: `{html} <h1>Hello, World!</h1>`
- **Rust**: `{rust} fn main() { println!("Hello, World!"); }`
- **Shell**: `{shell} echo "Hello, World!"`

## Code Blocks

The highlighter can also read code block titles, like `fibonacci.py` below.

```python fibonacci.py
def fibonacci(n):
    fib_sequence = [0, 1]
    while len(fib_sequence) < n:
        fib_sequence.append(fib_sequence[-1] + fib_sequence[-2])
    return fib_sequence


# Example usage
print(fibonacci(10)) # Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
```

### Layout Edge Cases

#### Test 1: Long Code

```md
## One Line

So, so you think you can tell Heaven from Hell blue skies from pain Can you tell a green field from a cold steel rail? A smile from a veil? Do you think you can tell? And did they get you to trade your heroes for ghosts? Hot ashes for trees? Hot air for a cool breeze? Cold comfort for change? And did you exchange a walk on part in the war for a lead role in a cage? How I wish, how I wish you were here We're just two lost souls swimming in a fish bowl year after year Running over the same old ground What have you found? The same old fears Wish you were here

---

## Multiple Lines

So, so you think you can tell
Heaven from Hell
blue skies from pain
Can you tell a green field
from a cold steel rail?
A smile from a veil?
Do you think you can tell?

And did they get you to trade
your heroes for ghosts?
Hot ashes for trees?
Hot air for a cool breeze?
Cold comfort for change?
And did you exchange
a walk on part in the war
for a lead role in a cage?

How I wish, how I wish you were here
We're just two lost souls swimming in a fish bowl
year after year
Running over the same old ground
What have you found?
The same old fears
Wish you were here
```

#### Test 2: Lists

With incorrect indentation, a code block breaks out of the list hierarchy.

- This is a list item
  - This is a nested sub-item, followed immediately by a code block

    ```python
    def hello_world():
        print("hello")
    ```

## Transformer Markers

Shiki's transformers can generate extra styles from comment markers. For example, adding `[!code --]` in a comment marks that line as removed; `[!code ++]` marks it as added.

| Type        | Marker                              |
| ----------- | ----------------------------------- |
| Diff-Remove | `{py} print(A) # [!code --]`        |
| Diff-Add    | `{py} print(A) # [!code ++]`        |
| Highlight   | `{py} print(A) # [!code highlight]` |
| Word        | `{py} # [!code word:Hello]`         |
| Focus       | `{py} print(A) # [!code focus]`     |
| ErrorLevel  | `{py} print(A) # [!code error]`     |

See [@shikijs/transformers | Shiki](https://shiki.style/packages/transformers) for more markers.

### Diff

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

### Highlight

```ts
console.log("Not highlighted");
console.log("Highlighted"); // [!code highlight]
console.log("Not highlighted");
```

### Word Highlight

```ts
// [!code word:Hello]
const message = "Hello World";
console.log(message); // prints Hello World
```

### Focus

```ts
console.log("Not focused");
console.log("Focused"); // [!code focus]
console.log("Not focused");
```

### Error Level

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