Hexo Shiki Highlighter Live Demo

Github Repo Link: Efterklang/hexo-shiki-highlight: shiki highlighter for hexo

Basic Config

YAML

_config.yml

shiki:  light_theme: catppuccin-latte  night_theme: catppuccin-mocha  line_number: true  highlight_lang: true  highlight_title: true  highlight_wrap_toggle: true  highlight_copy: true  is_highlight_shrink: true  enable_transformers: true  language_aliases:    cc: cpp    js: javascript    py: python  exclude_languages:    - mermaid  code_collapse:    enable: true # Enable code collapse feature. Default is true.    max_lines: 29 # Maximum lines to show before collapsing. Default is 50.    show_lines: 10 # Number of lines to show when collapsed. Default is 10.    smart_scroll: true # Enable smart scroll adjustment when collapsing. Default is true

Advance Config: Transformer

Check @shikijs/transformers | Shiki for more details

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

HTML

<span class="line">  // [!code --] <span class="line diff remove"> // [!code ++]</span></span>

Type	Mark
Diff-Remove	print(A) # [!code--]
Diff-Add	print(A) # [!code++]
Highlight	print(A) # [!code highlight]
…	…

Diff

TS

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

Highlight

TS

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

WordHighlight

TS

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

Focus

TS

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

ErrorLevel

TS

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