hexo-shiki-plugin

1.0.26 • Public • Published

Hexo Shiki Plugin

NPM Version Build Status Hexo Version License

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 a 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)
  );
}

Package Sidebar

Install

npm i hexo-shiki-plugin

Weekly Downloads

41

Version

1.0.26

License

MIT

Unpacked Size

22.9 kB

Total Files

11

Last publish

Collaborators

  • nova1751