Primary Navigation

Highlighting Syntax (Embed Code) in WordPress.

If you would like to embed highlighted code that looks pretty like it does in your text editor, such as Sublime Text, this is the post for you. Check out the sample below to see what i’m talking about, then read on.

If you aren’t working in WordPress I would go straight to Googles solution which is Google Prettify, that seems to be the most popular choice by far. If you are writing on a WordPress site like this, you will need another solution, since the WordPress CMS doesn’t play nicely with the other kids.

There are two way to accomplish this that I would recommend (not in order of preference, each of these methods has their own advantage):

#1

Github Gists – If you are into Github, or you think that people will actually be forking what you are working on, you will want to checkout Github Gists. They are basically embedable Github code files, that will link back to your profile and can then be shared with others.

#2

Method two would be to get the AWESOME plugin called Crayon Syntax Highlighter which blows all the other plugins i’ve seen for this out of the water. Check out this excellent sample and some screenshots below.

Crayon makes this really easy in a lot of way. For starters you get a Crayon button right in your WYSIWYG, so you don’t have to put in any <pre> or <code> tags manually yourself.

which then leads you to an excellent pop-up with all the options you could ever dream of. You get to paste in your code, select the language from the dropdown menu, add a title, pick a color scheme and tweak other items like max width. They really couldn’t make it any easier.

I’ll go ahead and show 3 different color scheme samples but that is basically it. None of the other plugins I tested even came close to this level of functionality, and could only be described as “busted”. Hope this helps.