Any coder posting source code on a blog, or on his website, needs a proper syntax highlighting tool that will make his code readable. I have been using the HTML <code> tag for some time, but it does nothing more than rendering the text in a fixed width font. So after some time of researching to remove this handicap from my source code containing pages, I came across a way to put some beauty to my code: google-code-prettify. I was googling for a code beautifier, but Google decides to name it a
Let's give it a try and see if it works.
First, go ahead and download the distribution. This will allow you to make changes to the CSS and play with the design if you don't like what you see. Then add the following lines of code before the opening <head> tag to your HTML document.
Now, when you want a syntax highlighted piece of code on your website, you have to enclose your code snippet with the following tags :
The code can be further prettified by putting line numbers into our code snippets. To do that, we will use the attribute
The line numbers shown are multiples of 5.
The prettifier will guess the programming language that your code is in. If you want to specify the programming language of your source code on your own, you use the language extension in the
prettifier. Oh, well. Never mind.
Let's give it a try and see if it works.
int answerToLife(String question) {
return 42;
}
In this post you will find simple steps that will lead you to set up syntax highlighting on your site.
Configuration
First, go ahead and download the distribution. This will allow you to make changes to the CSS and play with the design if you don't like what you see. Then add the following lines of code before the opening <head> tag to your HTML document.
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>If you haven't downloaded the distribution, you can link to the files from google's repository:
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>The next thing you have to do is to include
onload="prettyPrint()" in the <body> tag of your document.<body onload="prettyPrint()">Great. You are good to go.
Now, when you want a syntax highlighted piece of code on your website, you have to enclose your code snippet with the following tags :
<pre class="prettyprint"> #code snippet goes here <pre>
What about Line Numbers?
The code can be further prettified by putting line numbers into our code snippets. To do that, we will use the attribute
linenums:(line no. to start counting from)>.<pre class="prettyprint linenums:101">
// This is the starting line 101.
void myMethod( int counter) {
if(counter == 0) return;
else {
System.out.println(""+counter);
myMethod(--counter);
System.out.println(""+counter);
return;
}
}
<pre>
results with// This is the starting line 101.
void myMethod( int counter) {
if(counter == 0) return;
else {
System.out.println(""+counter);
myMethod(--counter);
System.out.println(""+counter);
return;
}
}
The line numbers shown are multiples of 5.
Specifying Programming Language
The prettifier will guess the programming language that your code is in. If you want to specify the programming language of your source code on your own, you use the language extension in the
prettyprint class:<pre class="prettyprint lang-java"> The lang-* class specifies the language file extensions. File extensions supported by default include "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl". </pre>
1 comment:
Thanks. A very useful post
Post a Comment