Hexo plugin for code highlighting by prism.js, supporting JSX syntax
Switch branches/tags
Nothing to show
Clone or download
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


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: