hexo-filter-highlight
Introduction
Highlight plugin using highlight.js for Hexo. This plugin not highlight when generating, you must highlight your code in front-end.
Optionally, if you using Backtick Code Block style to insert code block, close the default highlight of hexo, your page will display unnormally, you can use this plugin to instead.
You can visit my blog to see the highlight result.
Feautre
- Using highlight.js freely
- Trim indent of code block
- Code line numbering support
- Code block copy support
Install
$ npm install hexo-filter-highlight --save
Then set enable: false
to turn off the hexo highlight in _config.yml
under blog.
Config
backend
config _config.yml
under your blog
# hexo-filter-plugin (https://github.com/Jamling/hexo-filter-highlight) config## highlight in frontend, the plugin (backend) just do some prepare work.## you need to read the docs on https://github.com/Jamling/hexo-filter-highlight to getting starthljs:enable: true #true to enable the pluginline_number: frontend # add line_number in frontend or backend (not recommend, have bugs in special hexo version)trim_indent: backend # trim the indent of code block to prettify output. backend or front-end (recommend)copy_code: true # show copy code in caption.label:left: Coderight: ':'copy: Copy Code
frontend
Import highlight js and style css in your <head></head>
Then add highlight script after document loaded, such as under document.onready().
- Simply
;
- Normally, insert following script after the document loaded
var trim_indent = true; var line_number = true; // enable highlight
- Advancely
Last add your css to control the code block and line number. See nova.scss under Nova theme.
Refer
See My Blog for more information.
License
MIT