Easy Code Syntax Highlight on Blogger Dynamic Views (or everywhere you need!)

We were redesigning the Crux Blog this week, to adopt the new Blogger's Dynamic Views feature. We were very happy with all amazing layouts it provides and the simplicity of the edition tool. But one little thing was boring us: we were not able to highlight pieces of code in our posts, like we could do using Blogger's simple templates.
This was because the Dynamic Views do not allow us to edit the HTML template, so we could not import any JavaScript API to do the highlight job. After a little brainstorm session and few failed attempts, we can now highlight our code using a single line of JavaScript.
If you want to use the same solution, you just need to:
- Open your post using the Blogger's HTML editor;
- Create a tag PRE and assign the CSS class related to the desired language (brush:java or brush:xml);
- Paste your source code inside this PRE tag;
- Import the loader at the final of your post;
- To install the CSS styles, required by SyntaxHighlighter, you will need to do this step only once: open the Blogger's Advanced Layout Designer and access the CSS editor. Copy and paste the contents of the following files:
Here is an example of a post using SyntaxHighligher:
<pre class="brush:java"> public class SyntaxHighlighterWorksFineHere { public static void main(String[] args) { System.out.println("Yes!"); } } </pre> <script src="http://crux-framework-tools.googlecode.com/(...)/highlightLoader.js">
The URL of the script was truncated just for preserving the layout... it is too long to fit the box. The complete URL is:
http://crux-framework-tools.googlecode.com/svn/trunk/misc/highlight/highlightLoader.js
It is nice to emphasize that you just need to include this script once in each post, no matter how many blocks of code it contains.
How It Works
We compiled the SyntaxHighlighter library (by Alex Gorbachev. Thank you, Alex!) using Google's Closure Compiler Service.
This compilation was necessary to:
- Join highlighter Core, Java Brush and XML Brush in a single script file;
- Minimize the code;
- Append one line of code to automatically call the highlighter main function once script is loaded (
SyntaxHighlighter.highlight() method).
Subscribe to:
Post Comments
(
Atom
)
Hi, It says:
ReplyDeleteSyntaxHighlighter
Can't find brush for: python
How to install Python brush.
pls check my post.
http://nugjii.blogspot.com/2012/01/python-on-symbian.html
Seriously nice work here guys. I also added the instructions to my blog and linked back to yours since I'm using it.
ReplyDeleteHow to add more brush??
ReplyDeletecan i am put in your loader?
How to highlight code in C language? brush:C is not working. For java ,its working perfectly fine. Looking forward to your reply.
ReplyDeletebrush:php?
ReplyDeleteTo all those asking for the extra brushes: you need to include the right brushes in the compiled js in Google Closure Compiler.
ReplyDeleteIt would be nice that someone would give some guidance on this. I am not very familiar with Javascript and it's hacky things
DeleteI have written a quick blog post for you to complete the task at hand :)
Deletehttp://www.maartenmensink.nl/2012/08/how-to-syntax-hightlighting-on-blogger.html
Great post!
ReplyDeleteYou saved my life :D
ReplyDeleteThanks, bro!
There's a workaround for dynamic views:
ReplyDeletehttp://stackoverflow.com/a/12854822/279307
Hi, This is Chandrika from Chennai. I have read your blog and I got some knowledgeable information through this blog. Really useful blog. Keep update your blog.
ReplyDeleteRegards...
Java Training in Chennai
Thank you so much for sharing this informative blog. Your technical information is really useful for me. Keep update your blog.
ReplyDeleteRegards..
PHP Training in Chennai