Working with code fences & blocks

Backend edit screen

HighlightJS is used by default with EasyMDE on the admin edit screen to handle code blocks also known as fences. You can easily add a snippet code by using the backtick character like this :

Screenshot — Example of using backticks to output a PHP snippet code

When using the sidebar live preview, default colors will be used like this:

Frontend theme rendering

On the frontend, you can use the syntax highlighter of your choice. The extension does not provide an automatic way to highlight code snippets. Some themes are already bundled with such features.

You can use existing WordPress plugins to add colors and make snippets more readable to your visitors :

Example with the geshi color syntax used on this site:

if ( isset( $you ) && $you === 'Awesome' ) {

  echo 'It looks like you are already awesome !';

```
}
```

Prismatic by Jeff Star

The plugin works straightforward only with the following settings.

From the plugin settings, in the general tab choose the highlight.js library like this:

And save your changes.

Them from the Highlight.js tab you have to enable the no-prefix option like this:

By checking the No Prefixes option’s checkbox and saving your changes.

That should work on the firt try. 🎉

WP-GeSHi-Highlight by Jan-Philip Gehrcke

This is the plugin used on this site. A bit old but do the work pretty well with decent HTML tags and no fancy features. Many languages are supported by default but you can’t customize the colors for example.

The plugin does not work by default and you need to active the integration from the “AutoPlugs” tab. After installing the plugin, make sure the compatibility layer is enabled from the Markup Markdown’s settings page:

Click the checkbox if need be and press the “Update” button to save your changes.

Any snippet code should be rendered properly now !

CodeMirror Blocks by Vicky Agravat

I added a plug for this plugin following a user request on the forum. Originally made for the Gutenberg block editor, most of the features are supported – not all of them – and should work properly. The snippet rendered on the frontend is boosted with more advanced options like line numbers, colors, copy feature, etc…

After installing the plugin make sure to activate the related plug so the rendering could be triggered on the frontend:

That’s all !

Feel free to let a message on the forum if you find another plugin that could be play nice with markdown and I will look to check what’s possible.