I’ve been looking for a WordPress code editor with Prism syntax highlighting to embed code into my WordPress blog. Sadly I couldn’t find one that worked well with the classic (TinyMCE) editor, so I wrote my own called Alkane Code.

I tried Crayon Syntax Highlighter but this hasn’t been maintained for over 3 years, the syntax highlighting didn’t work well with the theme I was using, and it didn’t allow inline code like this.

I tried EnlighterJS too, but I found it to be buggy when editing (not adding) code. Once you’ve added code via the popup dialog, you then had to make amendments inline in the TinyMCE code editor.  And it felt clunky and didn’t work as well as expected.

Finally I stumbled on the TinyMCE Code Sample plugin demo.  It provided a simple mechanism to add syntax-highlighted code when combined with the Prism.js Syntax Highlighter.

The trouble is though, it didn’t permit inline code, it had a couple of bugs in it (for example it wouldn’t permit language classes containing a hyphen such as ‘visual-basic’ etc), and it was a little bloated because it integrated with Prism.js and tried to highlight code in the TinyMCE editor itself.  Due to it being integrated with Prism.js it also added language classes to the <pre> tags, and I prefer to just add them to the code tag (Prism will add them to the <pre> tag at run time).

I didn’t want any of this.  I just wanted something lightweight that simply added code using the correct semantics, that could then be rendered using any external syntax highlighter (in my case, just Prism.js for now.  But one day maybe highlight.js too.).

Here’s a demo of it appearing in the TinyMCE editor:

And here’s an example of some block code syntax highlighting (there are multiple themes available – see here):

.alkaneclass
{
    background-color:#00ff00;
}

#alkaneid
{
   font-color:#ff0000;
   border:1px solid #000;
}

If you are looking for a WordPress code editor with Prism syntax highlighting then give Alkane Code a try!