This blog entry is using Google's Prettify, which was put in place following the setup outlined, below.
Out with the Old
I've been away from Blogger for some time. After returning, I've noticed a lot has changed. So I updated my template and made a bunch of changes, which promptly broke all the syntax highlighting I configured years ago!
Of course, I then looked into the old
syntax highlighter I had. Although it has been
moved to gitHub and has some fairly recent contributions, I still decided to go with something else. Partially because it's been around since 2004 and that's ancient in internet years--back in the time when dinosaurs were surfing the net--but mainly because I'm tired of seeing that same syntax highlighter everywhere.
In with the New
I quickly stumbled on this
StackOverflow post, which had several solid responses. In my searches, I also found a site with a few "
prettify themes" which are an improvement over the default. Combining all this together, here is some sample java code to show the final product:
Final Results (Java Sample)
/**
* Reads a file into a String. The current Thread's classloader will attempt
* to load the given file as a resource and the result will be passed
* through Apache Common's utility for creating a string from a File.
*
* @param filePath The file to read.
* @return The string to enjoy.
* @throws IOException Thrown when the file cannot be found.
* @see {@link FileUtils#readFileToString(File)}
*/
public String readFileToString(final String filePath) throws IOException {
File file = FileUtils.toFile(getClass().getResource(filePath));
return FileUtils.readFileToString(file);
}
How It Was Done
If I ever fundamentally change my Blogger theme, I may have to re-apply these settings. So I'm listing the steps to do so here, for future reference:
Step 1: Go to the "
Template" section and choose the "Edit Html" button
Step 2: Cut / Paste the following lines of code under the
<head> tag:
<!-- START: added to support syntax highlighting via prettify -->
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function() {
prettyPrint();
});
</script>
<!-- END: added to support syntax highlighting via prettify -->
Step 3: Go to a
site that has prettify themes and download the CSS theme that you want
Step 4: Back in Blogger's "
Template" section, click the "
Customize" link (to the left of the "
Edit Html" link in the picture, above)
Step 5: Paste your CSS in the "
Advanced > Add CSS" section
That's it! Once setup is complete, syntax highlighting can be used with code along these lines
<pre class="prettyprint java">
public void someFunction() {
}
</pre>
