Shiki Highlight
Github Repo Link:
- For hexo: Efterklang/hexo-shiki-highlight
- For Markdown-exit: Efterklang/markdown-exit-shiki
Features
Inline Code
Shiki support inline code highlighting using the following syntax:
- **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:
```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]```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
| Type | Mark |
|---|---|
| Diff-Remove | print(A) # [!code--] |
| Diff-Add | print(A) # [!code++] |
| Highlight | print(A) # [!code highlight] |
| … | … |
Diff
```tsconsole.log("hewwo"); // [!code --]console.log("hello"); // [!code ++]console.log("goodbye"); // [!code --]```console.log("hewwo");console.log("hello");console.log("goodbye");Highlight
```tsconsole.log("Not highlighted");console.log("Highlighted"); // [!code highlight]console.log("Not highlighted");```console.log("Not highlighted");console.log("Highlighted");console.log("Not highlighted");WordHighlight
```ts// [!code word:Hello]const message = "Hello World";console.log(message); // prints Hello World```const message = "Hello World";console.log(message); // prints Hello WorldFocus
```tsconsole.log("Not focused");console.log("Focused"); // [!code focus]console.log("Not focused");```console.log("Not focused");console.log("Focused");console.log("Not focused");ErrorLevel
```tsconsole.log("No errors or warnings");console.error("Error"); // [!code error]console.warn("Warning"); // [!code warning]```console.log("No errors or warnings");console.error("Error");console.warn("Warning");Quote
console.log("This is a quoted code block");
Shiki Highlight