Code A
<html>
<head>
<title> Prettify </title>
</head>
<body>
<h1>Prettify</h1>
</body>
</html>
Code B
<html> <head> <title> Prettify </title> </head> <body> <h1>Prettify</h1> </body> </html>Absolutely Code B. It is displayed using Prettify which is syntax highlighter.
Something about syntax highlighters and Prettify
Syntax highlighter displays code nicely in a web page. Code is displayed in different colours according to words used in it. Secondly code is numbered. Thus syntax highlighter improves readability of code. Some syntax highlighters other than Prettify are GeSHi, Pygments, GtkSourceView.
Prettify is a Google project. It is Javascript library which styles code using <code> and <pre> tags. It supports variety of languages. It automatically guesses code’s language and accordingly displays it.
Steps to use Prettify in blogger
- Go to blogger.com and sign in
- Go to your dashboard
- Click on template
- Click on Edit HTML
- Paste following just before </head> tag
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"> - Click on save template. Now you added code in your template. Now its time to test it.
- Click on New Post.
- Click on HTML tab and you will have this code: <div dir="ltr" style="text-align: left;" trbidi="on"> <br /></div></li>
- Type before <br/>
<pre class="prettyprint">
for(int i=0; i<10; i++)
{
System.out.println("i = "+i);
}
</pre>
Click on Save and then click on Preview. Your code should like below code.for(int i=0; i<10; i++) { System.out.println("i = "+i); }
How to number code in prettify?
To number your code type following code <pre class="prettyprint linenums">your code</pre> Eg
<html> <head> <title> About Myself </title> </head> <body> <h1>About Myself </h1> <p>Name: Savio Menezes <br/> Age: 22 <br/> Citizen of: India <br/> Education: BCA graduate <br/> Religion: Christianity <br/> I like: Bollywood music and movies <br/> </p> </body> </html>Note: Code will contain number on very 5th line
