hexo-prism-plus
v2.2.0
Published
Better code block highlighting using Prism with full server-side rendering supporting most Prism plugins
Downloads
425
Readme
hexo-prism-plus
Better code block highlighting with Prism for Hexo.
Features
- Exposes the full power of Prism with an elegent interface in markdown.
- Control classes, styles and data attributed on generated elements.
- Use presets to manage different use cases with ease.
- Full server-side rendering supporting most Prism plugins.
- Unlike other Prism SSR solutions which breaks most plugins,
hexo-prism-plus
usesjsdom
to render the full HTML markup and then uses a clever client-side hydration to reattach event handlers, so most plugins works normally. - Simply set desired Prism plugin names in the config,
hexo-prism-plus
takes care of the rest.
- Unlike other Prism SSR solutions which breaks most plugins,
- Additional tag plugin similar to the original
include_code
tag, but with all enhanced features.
Demo
All code blocks in my blog are generated by this plugin. Please go and take a look. The source code is available on Github.
Installation
npm i -S hexo-prism-plus
This will install hexo-prism-plus
and add it as a dependency in your package.json
.
The default highlight is automatically disabled, so no more change is needed.
Note: this plugin uses server-side rendering combined with client-side hydration, and thus it ships with its own copy of prismjs. Make sure you disable any other prismjs related config in your theme to avoid conflicts.
Usage
See wiki for detailed description for both inline options and site options.
Backtick Code Block
Just write code using fenced code block syntax as usual.
Additional options for Prism can be specified either inline or using a preset defined inside the site config file _config.yml
.
```python preset=mypreset lineno=True line=1-4,7
# some code
```
Tag Plugin
To insert code snippets from file with Prism highlight, use
{% includecode /path/to/file [inline options] %}
/path/to/file
is relative to code_dir
in _config.yml
.
And inline options take the same format as those used in backtick code blocks.