WordPress: How to make a custom Enlighter theme for code highlighting

According to this page:
https://wordpress.org/support/topic/custom-background-color-5/

The regular Enlighter plugin themes are stored in this minified css file:

/wp-content/plugins/enlighter/resources/EnlighterJS.min.css

and the css files for the Enlighter plugin themes can be found here:

/wp-content/plugins/enlighter/views/themes/

for example:

/wp-content/plugins/enlighter/views/themes/mootwo.css

However, to create a new custom Enlighter css theme and have it show up in the Enlighter plugin options, I must create a new folder called “enlighter” and place my new css file there. For example:

/wp-content/themes/<your-wp-theme>/enlighter/<yourtheme>.css

What I need to do to test this is to make a copy of one of the existing themes and rename it, add it to this new location, and replace all references to the theme name from inside the css. After restarting WordPress, the new theme should show up as an option in the Enlighter plugin.

I made a copy of the enlighter.css file, renamed it to chris.css, and copied it here:

\wp-content\themes\hemingway-rewritten-wpcom\enlighter\chris.css

Leave a Reply