Is there any way to change style of the source code that you include in the web page with simple method? Yes, there is. If you read my previous posts such as
hibernate operations,
ant build file, you can see the way my source codes are presented. Key words, variable names, and class names, etc are formatted according to the language that source code belongs.
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!
Click on Tools-> Options to open Options dialog box on Netbeans then go to PHP tab and set the php.exe file location (I am using xampp server, your path also will be similar to "F:\xampp\php\php.exe" if you use xampp, or if you use wamp server your path will similar to "F:\wamp\bin\php\php5.4.12\php.exe")
