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 uses jsdom 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.
• 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.