hexo-shiki-plugin
v1.0.27
Published
A beautiful hexo code block highlight plugin based on shiki
Downloads
225
Maintainers
Readme
Hexo Shiki Plugin
A code highlight plugin based on shiki,built for hexo.You can go to my blog for preview.
Installation
- Intall the plugin.
yarn add hexo-shiki-plugin
- Setup config.
shiki: theme: one-dark-pro
[!WARNING] To avoid conflicts with the native code highlight plugin,please disable the native plugins.
highlight: enable: false prismjs: enable: false
for
hexo>=7.0.0
versions,please add a additional line,leavesyntax_highlighter
to empty,just like below.syntax_highlighter:
Usage
this plugin has four themes built in,you can choose one of theme to display:
one-dark-pro
material-theme-palenight
github-light
github-dark
If you choose a theme other than one of the built-in themes,the plugin will use the one-dark-pro
codeblock style,and load the specific theme code.You can load more code highlight themes in Themes.
There are some other features ported from hexo-theme-butterfly.The available settings are below:
[!NOTE] If you want to enable the code block beautify config, please make sure your website has introduced the font-awesome icon set.
shiki:
theme: github-light # highlight-theme
line_number: true # whether to show the line_number
beautify: false # whether to add highlight tool true or false
highlight_copy: true # copy button
highlight_lang: false # show the code language
highlight_height_limit: 360 # code-block max height,unit: px
is_highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
copy: # copy message
success: 'Copy Success'
error: 'Copy Error'
no_support: 'Browser Not Support'
[!NOTE] Since shiki support a lot of beautiful themes,you can add your own cutom css files to cusomize your codeblock style,here is an example:
:root {
--hl-color: #e1e4e8;
--hl-bg: #24292e;
--hltools-bg: #1f2428;
--hltools-color: #c5c5c5;
--hlnumber-bg: #24292e;
--hlnumber-color: #444d56;
--hlscrollbar-bg: #32383e;
--hlexpand-bg: linear-gradient(
180deg,
rgba(36, 41, 46, 0.6),
rgba(36, 41, 46, 0.9)
);
}