Hexo Shiki Highlighter Live Demolqip

2025-08-11/Dev/FrontEnd约466字PV

Hexo Shiki Highlighter Live Demo

Github Repo Link:

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} <h1>Hello, World!</h1>`- **Rust** `{rust} fn main() { println!("Hello, World!"); }`- **Shell**: `{shell} echo "Hello, World!"`
  • 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

Standard Markdown code blocks are also supported:

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

Transformer

Check @shikijs/transformers | Shiki for more details

Shiki支持通过标记为代码块设置 classes。例如，在注释中添加 [!code--]，Shiki 将为该改行代码对应的 span 元素中添加 diff class

TypeMark
Diff-Removeprint(A) # [!code--]
Diff-Addprint(A) # [!code++]
Highlightprint(A) # [!code highlight]
……

Diff

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

Highlight

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

WordHighlight

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

Focus

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

ErrorLevel

MD
```tsconsole.log("No errors or warnings");console.error("Error"); // [!code error]console.warn("Warning"); // [!code warning]```
TS
console.log("No errors or warnings");console.error("Error");console.warn("Warning");

Quote

TS
console.log("This is a quoted code block");

Hexo Shiki Highlighter Live Demo

https://vluv.space/shiki_highlight/

Author

GnixAij

Posted on

2025-08-11

Updated on

2025-12-20

License under