A beautiful hexo code block highlight plugin based on shiki
npm install hexo-shiki-plugin
>
alt="NPM Version"
/>
>
alt="Build Status"
/>
>
alt="Hexo Version"
/>
>
alt="License"
/>
> A code highlight plugin based on shiki,built for hexo.You can go to my blog for preview.
1. Intall the plugin.
``bash`
yarn add hexo-shiki-plugin
2. Setup config.
yml`
shiki:
theme: one-dark-pro
> [!WARNING]
> To avoid conflicts with the native code highlight plugin,please disable the native plugins.
>
> `yml`
> highlight:
> enable: false
> prismjs:
> enable: false
>
>
> for versions,please add a additional line,leave syntax_highlighter to empty,just like below.`
>
> yml`
> syntax_highlighter:
>
> this plugin has four themes built in,you can choose one of theme to display:
>
> - one-dark-pro
> -
> -
> -
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.
`yml`
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:
`css``
: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)
);
}