How did I formatted these text on the web page? Did I change font color of each words on the text? No there is a easy method to do that. Thanks to google code prettify on google code.
This is the method that you should follow to format your source code snippets in an html page.
You can simply download their zip file and add those source file to your web page by uploading to the hosting server.
But I will explain an easy way to do that using online resources itself without downloading and uploading.
Step 1
Okay first you have to add reference CSS and JavaScript file to your web page's head section. Copy following code to head section on your web page.
<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'/>
If you are a google blogger you should copy the above code to blog's layout head section.
Here we use their online resource of CSS and JavaScript file to load styles and functions to our web page.
Step 2
Now just only one initialization for our code formatter. Copy the following code to body tag on your page.
You should use the layout as same as previous step, if you are a google blogger.
onload="prettyPrint()"
As an example
<body onload="prettyPrint()">
Step 3
Now just surround your text which you want to format with code or pre tag and set the Prettier class to specify the language. that is all. following example show you how to do that.
Example -
Normal text of your source code is,
//This is JAVA source code
import java.util.Scanner;
class keyboardDemo {
public static void main(String[] arg) {
//read from System.in = normally keyboard
Scanner keyboard = new Scanner(System.in);
System.out.print("Enter two integers : ");
int x;
//read the inputs
x=keyboard.nextInt();
}
}
Now surround this text with code tag and particular style on your HTML source code.
<code class="prettyprint lang-java">
//This is JAVA source code<br />
import java.util.Scanner;<br />
class keyboardDemo {<br />
public static void main(String[] arg) {<br />
//read from System.in = normally keyboard<br />
Scanner keyboard = new Scanner(System.in);<br />
System.out.print("Enter two integers : ");<br />
int x;<br />
//read the inputs<br />
x=keyboard.nextInt();<br />
}<br />
}<br />
</code>
Now you can see the formatted source code as follows on your web page,
//This is JAVA source code
import java.util.Scanner;
class keyboardDemo {
public static void main(String[] arg) {
//read from System.in = normally keyboard
Scanner keyboard = new Scanner(System.in);
System.out.print("Enter two integers : ");
int x;
//read the inputs
x=keyboard.nextInt();
}
}
If you need you can surround code with a div tag to change background color and wrapping style.
My div tag looks like this,
<div style="background: none repeat scroll 0% 0% rgb(209, 206, 206); border: 2px none; overflow: auto; white-space: nowrap;">
</div>
Now final styled text is,
//This is JAVA source code
import java.util.Scanner;
class keyboardDemo {
public static void main(String[] arg) {
//read from System.in = normally keyboard
Scanner keyboard = new Scanner(System.in);
System.out.print("Enter two integers : ");
int x;
//read the inputs
x=keyboard.nextInt();
}
}Code prettify support several language for style them. To change the language that you need to style just change the class of the style to your language.
For JAVA,
<code class="prettyprint lang-java">
Example -
//This is JAVA source code
import java.util.Scanner;
class keyboardDemo {
public static void main(String[] arg) {
Scanner keyboard = new Scanner(System.in);
System.out.print("Enter two integers : ");
int x;
}
}For xml,
<code class="prettyprint lang-xml">
Example -
<project default="final" name="yourProjectName">
<target name="final" description="this is a function to echo some text">
<echo message="Hello world..."/>
</target>
</project>
For HTML,
<code class="prettyprint lang-html">
Example -
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
You can refer this page for further more support languages. So that's all have fun with this!
No comments:
Post a Comment