Adding & Customizing Nicely-formatted Blocks of Source Code on Your Website using SyntaxHighlighter

By Gabriel Staples
Written: 21 Oct. 2016
Last Updated: 21 Oct. 2016

Related Articles:

• How To Use Basic HTML Text Formatting for Google Blogger Comments (add bold, hyperlinks, & italics to blog comments)

Other Articles:

• Arduino-like millisecond (ms) and microsecond (us)-resolution timestamps in Python: millis(), micros(), delay(), & delayMicroseconds()
• BattleBots Season 2 "Buzz" Fire Drone for Team Caustic Creations, with Team Interviews & fire-shooting Videos
• The Power of Arduino
• Restoring/Recharging Over-discharged LiPo (Lithium Polymer) Batteries!
• Parallel Charging Your LiPo Batteries
• Using the Arduino Uno’s built-in 10-bit to 16+-bit ADC (Analog to Digital Converter)--an Article on Oversampling
• Beginner RC Airplane Setup

For quite some time now I've needed a nice, clean way to post snippets of source code, such as C++, Python, or HTML, on my website here. Finally I decided to figure it out. Here's how it's done. Note that my website is hosted on Google Blogger, but your website on Wordpress or anywhere else should also work just fine with this "SyntaxHighlighter" tool by Alex Gorbatchev that I'm about to present.

First, follow these instructions here and paste the necessary pieces of code into your template: http://beendaved.blogspot.com/2015/03/working-with-syntax-highlighter-in.html.  I have installed both his "Option 1" and "Option 2," but I pretty much just use Option 1 since I like it better for my purposes. He made a little mistake for Option 1, however. He says to place it just before the "</head>" tag in your template, but you actually need to place it near the bottom of your template just before the "</body>" tag instead. You can see my comment at the bottom of his article.

Now, you can use HTML in your posts, like this...

<pre class="brush:cpp" title="test code">
int myFunc()
{
  //do something
  return 1;
}
</pre>

...to get nice, pretty, syntax-highlighted code on your blog or website post that looks like this:

Next, let's customize the colors and formatting. Looking here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), I can see the parameters I am currently using. For example, it contains:

.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
...
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #008200 !important;
}

ADVERTISEMENT:

In order from top to bottom, as shown just above, my header background color is white and my alternating code lines 1 and 2 are both white. Comments are green (#008200). Let's change all of that. Add the following code to your blogger template, at the very end of your header, just above "</head>":

<style type="text/css">
  .syntaxhighlighter {
    max-height: 550px;
    background-color: #ff0000 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
  }
  .syntaxhighlighter .line.alt1 {
    background-color: #99ff99 !important;
  }
  .syntaxhighlighter .line.alt2 {
    background-color: #99ff99 !important;
  }
  .syntaxhighlighter .comments, .syntaxhighlighter .comments a {
    color: #000082 !important;
    font-weight: bold !important;
  }
</style>

Now, in the code just above, I have set my "max-height" to 550 pixels (make a really long code block and you'll see it constrained to this height now, with a vertical slider to see it all), my header background color is now red (#ff0000), my code background color (both alternating lines) is now light green (#99ff99), and my comments are now blue (#000082) and bold. Follow this format to customize anything you see in your .css theme file found here: http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css.

Here is my final result--very different from the default look above:

Note that the "font-weight" parameter I set is simply a CSS styling you can apply. Many other options exist. See here: http://www.w3schools.com/cssref/pr_font_weight.asp.  Now, those red and green colors I just made are pretty dramatic, so I've removed the comment bold and blue changes we just made, and set the other colors to something more appropriate for my website, as you should be able to see in my code samples within this post itself.

Note: I have also posted parts of this article on StackOverflow here.

END