Sneak peak of new code snippet plugin for WordPress

Writing code examples inside the WordPress editor is a lousy experience with most plugins. Most of them involve writing down shortcodes, using clunky input dialogs and messing with spacing because tab functionality doesn’t work properly. Syntax highlighter implementations also tend to be onerous, they are often clunky and bloaty and load too much stuff. In fact I was so fed up with existing plugins that I stopped posting code tutorials on this site.

Ever since Tinymce got updated to the v4+ branch new things have become possible with the editor. One of the coolest things is the ability to live preview shortcode output right inside the (visual) editor, as well as easily adding a graphical user interface for these shortcodes. It is an order of magnitude more user-friendly. I don’t think any of the existing code plugins have jumped on board the live-preview train yet, so I decided to implement a solution myself.

I made some nice progress with a plugin I have dubbed ‘Code Shower’. Below is a sneak peak.

here’s an example of how a (css) code snippet looks on the front-end:

.excited {
	font-weight: bold;
	font-size: 3em;
}

And here is a screenshot of how it looks inside the familiar WordPress post editor:

And below is what the graphical interface looks like when inserting a new code snippet. It still needs some polish, but it should give you an idea.

There is still some work to do. Right now I am testing the plugin and it does have a dependency on a commercial plugin I’ve developed called Super Content Widget Pro. I’m probably going to make a it free for customers of Super Content Widget Pro, but we’ll see. Would you be interested in a plugin like this? Let me know.