Aug 10·3 min· PV

Shiki Code Highlighting Test

How Shiki renders inline code, code blocks, and transformer markers in my Hexo blog, for checking styles and layout edge cases.

CSS·Shiki·Markdown

To keep the page itself lighter, I no longer put “source / preview” tabs next to each example. If you want the raw Markdown, preview index.md 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: print("Hello, World")
JavaScript: console.log("Hello, World")
HTML: <h1>Hello, World!</h1>
Rust: fn main() { println!("Hello, World!"); }
Shell: echo "Hello, World!"

Code Blocks

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

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 usageprint(fibonacci(10)) # Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Layout Edge Cases

Test 1: Long Code

## One LineSo, 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 LinesSo, so you think you can tellHeaven from Hellblue skies from painCan you tell a green fieldfrom a cold steel rail?A smile from a veil?Do you think you can tell?And did they get you to tradeyour heroes for ghosts?Hot ashes for trees?Hot air for a cool breeze?Cold comfort for change?And did you exchangea walk on part in the warfor a lead role in a cage?How I wish, how I wish you were hereWe're just two lost souls swimming in a fish bowlyear after yearRunning over the same old groundWhat have you found?The same old fearsWish 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
```
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	`print(A) # [!code --]`
Diff-Add	`print(A) # [!code ++]`
Highlight	`print(A) # [!code highlight]`
Word	`# [!code word:Hello]`
Focus	`print(A) # [!code focus]`
ErrorLevel	`print(A) # [!code error]`

See @shikijs/transformers | Shiki for more markers.

Diff

console.log("hewwo");console.log("hello");console.log("goodbye");

Highlight

console.log("Not highlighted");console.log("Highlighted");console.log("Not highlighted");

Word Highlight

const message = "Hello World";console.log(message); // prints Hello World

Focus

console.log("Not focused");console.log("Focused");console.log("Not focused");

Error Level

console.log("No errors or warnings");console.error("Error");console.warn("Warning");console.log("Info");