Skip to content
Hexo plugin for code highlighting by prism.js, supporting JSX syntax
Branch: master
Clone or download

Latest commit

Snowgan and ele828 Modified: src/index.js (#45)
Hexo filter type 'after_post_render' have registered 'excerpt.js' filter by default which will generate page.excerpt and page.more variables.
As default highlight is disabled, these two variables cannot be highlighted correctly.
So set PrismPlugin priority to make sure it executed first, and then execute the 'excerpt.js' filter.
Latest commit 1f133ff Aug 8, 2018


Type Name Latest commit message Commit time
Failed to load latest commit information.
src Modified: src/index.js (#45) Aug 8, 2018
.editorconfig Add editorconfig file Jun 3, 2017
.gitignore Refactor && fix duplicate assets Feb 20, 2017 Add 'no-assets' option to load assets outside the plugin (#44) Jul 16, 2018
package-lock.json Small changes && release Jun 3, 2017
package.json bumped version to 2.3.0 Aug 1, 2018

Hexo-Prism-Plugin NPM

Since highlight.js didn't support JSX syntax properly, I wrote this plugin to replace Hexo's default code highlight plugin.


npm i -S hexo-prism-plugin


Firstly, you should edit your _config.yml by adding following configuration.

  mode: 'preprocess'    # realtime/preprocess
  theme: 'default'
  line_number: false    # default false
  custom_css: 'path/to/your/custom.css'     # optional

After that, check highlight option in _config.yml. Make sure that default code highlight plugin is disabled.

  enable: false

Finally, clean and re-generate your project by running following commands:

hexo clean
hexo generate


  • mode:

    • realtime (Parse code on browser in real time)
    • preprocess (Preprocess code in node)
  • theme:

    • default
    • coy
    • dark
    • funky
    • okaidia
    • solarizedlight
    • tomorrow
    • twilight
    • atom-dark
    • base16-ateliersulphurpool.light
    • cb
    • duotone-dark
    • duotone-earth
    • duotone-forest
    • duotone-light
    • duotone-sea
    • duotone-space
    • ghcolors
    • hopscotch
    • pojoaque
    • vs
    • xonokai
  • line_number:

    • true (Show line numbers)
    • false (Default, Hide line numbers)
  • no_assets

    • true (Stop loading asset files)
    • false (Default, load script and stylesheets files)


You can check out prism-themes project for additional theme preview:

Supported languages

You could find the supported languages here:



You can’t perform that action at this time.