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 wantStep 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>
No comments:
Post a Comment