skip to Main Content
WordPress, Markdown, And Syntax Highlighting

WordPress, Markdown, and Syntax Highlighting

Markdown is a pretty neat alternatives if you are bored with the default WYSIWYG editor that wordpress has to offer, of course you could always use another 3rd-party WYSIWYG editor available for wordpress such as TinyMCE. But if you want something simple and neat, try markdown instead.

What is markdown?

Markdown is a text-to-html conversion tool, the idea of this is to write in plain text format without the need of special tagging or formatting. That’s right, in PLAIN TEXT format! For instance, in html if the writer wants a text to be bold they need to enclose the text in <b></b> or  <strong></strong> html tag, whereas using markdown, writer could simply write the text in plain text formatting enclosed with **  without worrying to convert them to valid XHTML or HTML as this will be converted automatically by markdown tool. But you may wonder, what’s the different then if you still need to enclose the texts with special symbols to make them appear in special formatting as in bold or italic? Well for comparison, consider these two short article written in html and markdown:

From the comparison above, which do you thing is more neat and clean? HTML or Markdown? I’ll leave that for you to decide. For more information about markdown, you can go to the project’s site here. More information about Markdown syntax can be found here.

Getting Markdown to work with WordPress

Now that you know what Markdown is, let’s integrate it with WordPress. There are three main components that is crucial to get Markdown working with WordPress:

  • PHP Markdown (Main component, WordPress Plugin)
  • WP-Syntax (WordPress Plugin)
  • Markdown Geshi (WordPress Plugin)

1. Installing PHP Markdown

The first and main component to get Markdown working with WordPress is PHP Markdown, written by John Gruber. PHP Markdown is available in two version, Regular version and Extra version. The difference between the two is that the extra version contains additional features that are not available in the plain Markdown Syntax, such as creation of tables, adding footnotes, and definition lists using Markdown. For WordPress, we will be using the Extra version. Grab PHP Markdown Extra from this link:

PHP Markdown – http://michelf.com/projects/php-markdown/

After you’ve finished downloading the archive/.zip file, extract only markdown.php  to wordpress plugins root directory:

wp-content/plugins/

PHP Markdown extra support additional Markdown syntax that is not available in the original Markdown. Read more about it here: PHP Markdown Extra

2. Installing WP-Syntax

The next component is WP-Syntax, a WordPress plugin that provides syntax highlighting for wide range of languages using GeSHi[1]. Grab WP-Syntax plugin from it’s wordpress plugin page:

WP-Syntax – http://wordpress.org/extend/plugins/wp-syntax/

Again, extract the contents of the archive to your WordPress plugins directory:

wp-content/plugins

3. Installing Markdown Geshi

The third and last component required is Markdown Geshi, a plugin created by Gerard van Helden. This plugin will integrate GeSHi module used by WP-Syntax plugin to Markdown plugin, hence you will be able to highlight code syntax using Markdown. Grab Markdown Geshi from its github page:

Markdown Geshi – https://github.com/drm/Markdown_Geshi

Download markdown-geshi.php  from the link above and save it to wordpress plugin folder:

wp-content/plugins/

4. Wrapping it up

All three components/plugins should be in your WordPress plugin directory at this point. You WordPress plugin directory should somewhat looks like this:

Activate all three plugins from WordPress Dashboard, under Plugins page. You need to activate the following plugins:

  •  Markdown Extra
  • Markdown Geshi
  • WP-Syntax

The next step is to disable visual editor to allow the use of Markdown for writing posts. To do this, go to Your Profile page from WordPress Dashboard and tick the Disable the visual editor when editing box and update your profile. The default WYSIWYG editor in post or page editing should now be replaced with simple editor. But don’t worry, you can use Markdown syntax to create and edit your post now.

5. Syntax Highlighting

Now that you’re able to use Markdown to edit and create post in WordPress, using GeSHi to highlight languages syntax is as easy! Remember that earlier we had setup all the required components to get syntax highlighting working in Markdown by using GeSHi module from WP-Syntax plugin. Hence, all you need to do is to place #!language@linenumber tag to your code block. Consider the following example:

By adding #!html4strict@1  tag to the code block above, the html code will be highlighted using GeSHi, but the shebang tag itself will not be shown when converted to XHTML/HTML. Let’s take a closer look at the shebang tag above:

#!html4strict@1

The text html4strict in the shebang above is the language type used for highlighting. Hence, if you want to display PHP code, you would replace html4strict with php. Next, the number 1 in the shebang above determine the starting line number in the code block, hence if you want your starting line number to start from ten, you would replace number 1 with 10. As simple as that!

So now that you know how to use the shebang tag to highlight language code, what are the languages supported by GeSHi? There are a lot actually, here are the list of the supported languages[2]:

6. Further Customization

By default, PHP Markdown will apply to both your wordpress posts and comments. To apply PHP Markdown only for posts, edit the markdown.php  file and look for MARKDOWN_WP_COMMENTS  and set the value to false . Similarly, if you want to apply PHP Markdown only for comments, look for MARKDOWN_WP_POSTS  and set the value to false.

P.S: This post is created using Markdown 😀

Update on 19 October 2015: I’m no longer using markdown for posts and the original post has been updated from markdown syntax to standard wordpress syntax (HTML) 😛


[1]: More information about GeSHi can be found here: http://qbnz.com/highlighter/

[2]: List of supported languages taken from WP-Syntax Plugin page: http://wordpress.org/extend/plugins/wp-syntax/other_notes#Supported-Languages

  • Thanks for your exhaustive howto. I used codehighlighter and wp-markdown-syntax-highlight plugins so far. But they were both very slow and the output (mean its CSS) wasn’t really “eye friendly”.

    Now, 10 minutes later, everything is fine. 🙂 

    Best regards, Dirk

    • No problem.. I’m glad I could share it…

Back To Top
Close search
Search