How do I make my source code look nice in blogs? Answer: Syntax Highlighting

As I’m launching my fullstack lab online boot camp, I’ll be posting advice I give to student on here for all to share.

The topic of syntax highlighting came up since pasting code in a blog on it’s own look plain/boring… below is some quick steps to accomplishing this goal of having nicely hightlighted code.


Steps to be able to show code in your blog with highlighted syntax that I’d use…

1. Download/install WordPress plugin ‘Syntax Highlighter MT’
2. Test posting code that will be highlighted like this below..

.ulCircle {
list-style-type: circle;
}

.ulSquare {
list-style-type: square;
}

3. Reference these pages for instructions & other languages you may need to highlight respectively.

http://www.megatome.com/syntaxhighlightermt/
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Note: If you just search ‘Syntax Highlighter’, you’ll have many options. No need to use the one I used – Syntax Highlighter MT. I see it doesn’t have many votes but I think it must be a new version. ‘Crayon Syntax Highlighter’ may be another option as it has high ratings but I haven’t tested it. Below is a screenshot of other options I saw…

Syntax Highlighting

Other Syntax Highlighting Options