---
title: Shiki Highlight
date: 2025-08-11
excerpt: Hexo Shiki Highlighter Demo
tags:
- CSS
- Shiki
- Markdown
cover: https://assets.vluv.space/cover/FrontEnd/shiki.webp
---
> [!NOTE]- Github Repo Link:
>
> - For hexo: [Efterklang/hexo-shiki-highlight](https://github.com/Efterklang/hexo-shiki-highlight)
> - For Markdown-exit: [Efterklang/markdown-exit-shiki](https://github.com/Efterklang/markdown-exit-shiki)
## Features
### Inline Code
Shiki support inline code highlighting using the following syntax:
```markdown
- **Plain**: `printf("Hello, World")`
- **Python**: `{python} print("Hello, World")`
- **JavaScript**: `{javascript} console.log("Hello, World")`
- **HTML**: `{html} Hello, World!
`
- **Rust** `{rust} fn main() { println!("Hello, World!"); }`
- **Shell**: `{shell} echo "Hello, World!"`
```
- **Plain**: `printf("Hello, World")`
- **Python**: `{python} print("Hello, World")`
- **JavaScript**: `{javascript} console.log("Hello, World")`
- **HTML**: `{html} Hello, World!
`
- **Rust** `{rust} fn main() { println!("Hello, World!"); }`
- **Shell**: `{shell} echo "Hello, World!"`
### Code Blocks
Standard Markdown code blocks are also supported:
````markdown
```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]
```
````
```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]
```
### Transformer
Check [@shikijs/transformers | Shiki](https://shiki.style/packages/transformers) for more details
Shiki支持通过标记为代码块设置 classes。例如，在注释中添加 `[!code--]`，Shiki 将为该改行代码对应的 span 元素中添加 `diff` class
| Type | Mark |
| ----------- | ----------------------------------- |
| Diff-Remove | `{py} print(A) # [!code--]` |
| Diff-Add | `{py} print(A) # [!code++]` |
| Highlight | `{py} print(A) # [!code highlight]` |
| ... | ... |
#### Diff
````md
```ts
console.log("hewwo"); // [\!code --]
console.log("hello"); // [\!code ++]
console.log("goodbye"); // [\!code --]
```
````
```ts
console.log("hewwo"); // [!code --]
console.log("hello"); // [!code ++]
console.log("goodbye"); // [!code --]
```
#### Highlight
````md
```ts
console.log("Not highlighted");
console.log("Highlighted"); // [\!code highlight]
console.log("Not highlighted");
```
````
```ts
console.log("Not highlighted");
console.log("Highlighted"); // [!code highlight]
console.log("Not highlighted");
```
#### WordHighlight
````md
```ts
// [\!code word:Hello]
const message = "Hello World";
console.log(message); // prints Hello World
```
````
```ts
// [!code word:Hello]
const message = "Hello World";
console.log(message); // prints Hello World
```
#### Focus
````md
```ts
console.log("Not focused");
console.log("Focused"); // [\!code focus]
console.log("Not focused");
```
````
```ts
console.log("Not focused");
console.log("Focused"); // [!code focus]
console.log("Not focused");
```
#### ErrorLevel
````md
```ts
console.log("No errors or warnings");
console.error("Error"); // [\!code error]
console.warn("Warning"); // [\!code warning]
console.log('Info') // [\!code info]
```
````
```ts
console.log("No errors or warnings");
console.error("Error"); // [!code error]
console.warn("Warning"); // [!code warning]
console.log("Info"); // [!code info]
```