Best Syntax Highlighter for WordPress 2024: EnlighterJS

EnlighterJS is by far, the BEST syntax highlighter for WordPress. Open source, written in pure javascript, Git available, developers reply to request, great community. Using it can be as simple as adding a single script and style to your website, choosing the elements you wish to highlight, and EnlighterJS takes care of the rest.

Back in 2017, I already showcased this plugin, and it’s still the best 7 years later!

• Designed to work in all modern browsers (not server-side)
• Encapsulated, standalone library – zero dependencies (no MooTools, no jQuery!)
• 40 supported languages/formats
• 12 high quality themes
• Inline Syntax highlighting
• Codegroups to displays multiple code-blocks within a tab-pane
• Point out special lines of code
• Ultra small footprint: 45KB JS (all languages) + 10KB CSS (single theme; all themes 60KB)
• Highlight all codeblocks on your page with a single command

Compared to ALL the other syntax highlighter plugins, it’s the simplest, easiest, strongest, and richest. Integrates BOTH in Gutenberg and TinyMCE.

No complicated shortcodes, no complex `<pre>` tags to add, just click and paste your code and boom done:

Okay, it also embeds shortcodes, but look how simple they are:

[ js ]// JS comment 
var element = document.createElement("script");[ /js ]

Result:

// JS comment
var element = document.createElement("script");

• Enlighter (enlighter, standard) – Enlighter’s default Theme

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Classic (classic) – SyntaxHighlighter inspired

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Bootstrap (bootstrap4) – Bootstrap 4 inpired themes, high contrast

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Beyond (beyond) – BeyondTechnology Theme

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Godzilla (godzilla) – A MDN inspired Theme

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Eclipse (eclipse) – Eclipse inspired

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• MooTwo (mootwo) – Inspired by the MooTools Website

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Droide (droide) – Modern, minimalistic

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Minimal (minimal) – Bright, High contrast

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Atomic (atomic) – Dark, Colorful

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Dracula (dracula) – Dark, using official draculatheme colorscheme

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Rowhammer (rowhammer) – Light, Transparent, divided rows

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

• Monokai

// Javascript code and comment example
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}

Hey, I hear what you are thinking… The fonts look like this crap old Courrier New, doesn’t it? Well, you can change each theme’s font, size, color, for each block, comments, absolutely anything!

Here is my new custom favorite: Beyond + Inconsolatas font + size 1em:

// Javascript code and comment example 
function downloadJSAtOnload() { 
  var element = document.createElement("script"); 
  element.src = "defer.js"; 
  document.body.appendChild(element);
}

This plugin is incredible:

Technical Features of EnlighterJS

• Ultrafast Tokenizer Engine based on priorized regular expressions
• Second-Stage-Tokenizer for optimized performance
• Full customizable themes written in less
• Themes available as single css files to reduce footprint
• Views based on JSX
• Minimal, embedded DOM library
• gulp based build system
• ES6 code transpiled via babel and build with rollup.js

The cons of using EnlighterJS

It would not be fair and biased to not talk about the drawback or bugs or whatnot. I haven’t found any bug, but:

• It’s true that this plugin can be a bit heavy for your pages to load, without a proper cache enabled on your proxy or web server. Make sure you at least defer the script.
• Also, as of today April 11th 2024, it’s been 1 year since the last update. WordPress will warn you about it as it should, but you can see with this page that it still works just fine.

The Competition for Syntax Highlighters

There are maybe a dozen other similar plugins, none of them are worth mentioning. I have tested 6 of them, and they all lack in various ways. The other 6 are for Gutenberg block editor which I do not use. Zero stars for that. You think Classic editor is dead? Think again.

• ABAP (abap)
• Apache HTTPD (apache)
• Assembly (assembly, asm)
• AVR Assembly (avrassembly, avrasm)
• Windows Batch/Bat (bat,batch,cmd) I personally submitted this one 😎
• C/C++ (c,cpp, c++)
• C# (csharp)
• CSS (css)
• Cython (cython)
• CordPro (cordpro)
• diff (diff)
• Dockerfile (docker, dockerfile)
• Generic (generic, standard) – default highlighting scheme
• Groovy (groovy)
• Go (go, golang)
• HTML (html)
• Ini (ini, conf)
• Java (java)
• Javascript (js, javascript, jquery, mootools, ext.js)
• JSON (json)
• JSX (jsx)
• Kotlin (kotlin)
• LATEX (latex)
• LESS (less)
• lighttpd (lighttpd)
• LUA (lua)
• MariaDB (mariadb)
• Markdown (gfm, md, markdown)
• Matlab/Octave (octave, matlab)
• MSSQL (mssql)
• NGINX (nginx)
• NSIS (nsis)
• Oracle Database (oracledb)
• PHP (php)
• Powerhsell (powershell)
• Prolog (prolog)
• Python (py, python)
• PureBasic (purebasic, pb)
• QML (qml)
• R (r)
• RAW (raw) – raw code without highlighting with EnlighterJS container styles!
• RouterOS/SwitchOS (routeros)
• Ruby (ruby)
• Rust (rust)
• Scala (scala)
• SCSS (scss, sass)
• Shellscript (shell, bash)
• Generic SQL (sql)
• Squirrel (squirrel)
• Swift (swift)
• Typescript (typescript)
• VHDL (vhdl)
• VisualBasic (visualbasic, vb)
• Verilog (verilog)
• XML (xml, html)
• YAML (yaml)

Wrapping Up

EnlighterJS is not only the best syntax highghter plugin for WordPress, it’s also a GREAT community: the team of maintainers is awesome, and will accept your PR if you ask and submit it properly! They are nothing like the commies from Linuxserver.io.

What are you waiting for? Go ahead and install it!