Home » Wordpress » Alkane Code: A TinyMCE Code Editor with Prism Syntax Highlighting

Alkane Code: A TinyMCE Code Editor with Prism Syntax Highlighting

Posted on by

I’ve been looking for a simple plugin to embed code into my WordPress blog and do some syntax highlighting. But sadly I couldn’t find one, so I wrote my own.

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:

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

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

 

Comments have now been disabled. If you have a question to ask about this post please ask the community!