Wordpress

Adding Syntax Highlighting to WordPress

As I started to write these posts I realised that my code blocks didn’t look as good as I’ve seen on other sites. On other sites I’ve seen syntax highlighting and line numbers.

As I’m using WordPress is was super simple. I found a plugin called SyntaxHighlighter Evolved. Straight out of the box it has:

  • Colour Themes
  • Line Numbers which don’t get in the way of copying and pasting
  • The ability to highlight a section or sections of the code snippet
  • A choice of programming languages

Once the plugin is installed it’s as simple as choosing the SyntaxHighlighter Code option as the block type in a post and choosing the correct language from the menu.

Then you get these cool looking code blocks:

Javascript

function coolLookingBlock() {
   console.log("Don't I look great?");
}

coolLookingBlock();

Python

def cool_looking_block():
   print("Don't I look great?")

cool_looking_block()

SQL

SELECT "Don't I look great?";