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 trueAdvance Config: Transformer
Check @shikijs/transformers | Shiki for more details
Hexo Shiki 支持通过标记为代码块设置 classes。例如，在注释中添加 [!code--]，可为改行代码对应的 span 元素中添加 diff remove 两个 class
HTML
<span class="line"><span class="line diff remove">| 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 WorldFocus
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') Hexo Shiki Highlighter Live Demo