What is markdown?

Alright, you’ve got your own blog where you enjoy sharing your thoughts with your friends and the rest of the world. That’s quite nice! But, if you are a developer/coder of any kind, you’d probably want to use your keybaord more than your mouse. You’re used to shortcuts, commands, and keystrokes. If you are also a Linux user, your more used to this type of workflow. So, I guess Markdown is more suited towards those of us who enjoy the keyboard, yet do not want the verbosity of HTML, styles, and so on. It enables you to write documents with minimal tags that will get translated somehow to a valid HTML document, together with the necessary styles that will make it pretty. If you don’t know what Markdown is you can read about it here https://en.wikipedia.org/wiki/Markdown. If you want a live example, well, you can have a look at any Readme.md file in any repository on GitHub that contains one.

Using a markdown editor in WordPress

You can use Markdown your the default WordPress editor. Notice that I am not referring to blogs hosted on wordpress.com.

Markdown Editor plugin

A quick search on Google for Markdown editors for WordPress will yield not so many results. The one that I chose (and am currently using to write this post) is Markdown Editor plugin by SEO Themes. It can be downloaded from this link https://wordpress.org/plugins/markdown-editor/. Alternatively, you can just go to your plugins page, add new, and search for markdown editor. It will probably come as the first result.

But, the plugin adds it’s own syntax-highlighting styles!

That’s what I spent a whole day trying to find a workaround for. Markdown allows you to add code blocks easily in your document (or post). You can just place the code snippet between three backticks. For example:

ls -l | grep *.txt

The parser would automatically convert the above code to styled HTML. So, what’s the problem now? the problem is that sometimes you want a different style for your code. Perhaps different colors, themes, may be support for other languages, you get the point.

I want to use PrismJS

There are plenty of WordPress plugins that provide excellent code highlighting. Almost all of them integrate with the default WordPress post editor by adding some buttons or dropdowns that will allow the user to choose the language, style, the presence of line numbers, and so on. I personally like PrismJS from https://prismjs.com/. It supports so many languages that I cannot list them here. It also has a number of plugins for things like line-highligh, copy and others. However, if you installed Prism plugin (or any similar one), you will not be able to make use of its integration with the editor. Remember, you switched your editor to Markdown. The good news is, PrismJS will parse the HTML produced for code snippets by the Markdown plugin. You’ll just have to make a simple tweak: Instead of using the standard way of inserting code snippets in a markdown document (see the example above), you will just precede the language name with “language-”. For example, the above snippet may be modified fit Prism requirements as follows:

ls -l | grep *.text

Now remains one final problem to solve for Prism to correctly parse and style your code snippet: prevent the Markdown Editor plugin from parsing code snippets by default.

Disabling Markdown Editor code highlight in favor of Prism

The Markdown Editor plugin offers the ability to turn off parsing code snippets. It will still parse your markdown, converting it to valid and styled HTML, but it will bypass any code snippets. This can be done by editing the functions.php file in your theme directory. So, for example, if you are using a theme called “activation”, then the functions.php file will be located in wp-content/themes/activation/functions.php. You will need to add the following to this file:

add_filter( 'markdown_editor_highlight', '__return_false' );
add_filter( 'markdown_editor_clipboard', '__return_false' );

Now, you can use Prism to style your code snippets the way you like, while still using markdown as your editing language instead of HTML.