Friday, October 21, 2016

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

ADVERTISEMENT:

Subscribe by Email! (via FeedBurner)
By Gabriel Staples
Written: 21 Oct. 2016
Last Updated: 21 Oct. 2016

Related Articles:
Other Articles:
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

***Subscribe by Email! (via FeedBurner)***

2 comments:

  1. Hey man

    when i try to follow the steps from the http://beendaved.blogspot.com/2015/03/working-with-syntax-highlighter-in.html I start getting errors on my template.

    Did you get any such errors?

    ReplyDelete
    Replies
    1. I don't remember getting any errors, but it's been too long for me to remember now anyway, as this is a one-time thing I had to do and then it's done. I do remember it took me a long time to figure it all out though, which is why I wrote this article.

      Delete

Thanks for your comment or question! If it is a question, I will try to get back to you quickly. Notice to spammers: I personally remove all spam promptly and report spammers to Google, so please don't do it.

Note: some HTML tags are allowed in your comments. To learn how to add bold (<b>...</b>), italics (<i>...</i>), or hyperlinks (<a href="URL">NAME</a>) to your comments, read here.

~Sincerely, Gabriel Staples.

P.S. Yo hablo español también. Je parle français aussi. (I speak Spanish & French too).