Hexo Shiki Plugin

A code highlight plugin based on shiki,built for hexo.You can go to my blog for preview.

Installation

1. Intall the plugin.

   yarn add hexo-shiki-plugin

2. 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,leave syntax_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)
  );
}