Integrate Google Prettify in Html page
Google Prettify
is embedded script that makes source-code snippets prettier in HTML. Syntax highlighting is one of the basic needs of the website that feature programming code. Something that makes source-code snippet prettier. Google’s Prettify is free and lightweight script that makes your code awesome.
This step-by-step guide explains the techniques that you can use to easily embed the Google Prettify script in your website.
index.php
js
--run_prettify.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<title>Google Prettify</title>
<script src="js/run_prettify.js"></script>
</head>
<body>
<pre class="prettyprint">
# Your code snippet
&?php
/**
* Test Class for Google Prettify
*/
class ClassName extends AnotherClass
{
function __construct(argument)
{
# code...
}
}
?>
</pre>
</body>
</html>
|
All you need to do is download google prettify script and save it to js folder as run_prettify.js. Download Prettify script from here. Now, Include JavaScript into your webpage in <head> tag. Put code snippets in <pre class="prettyprint"> html tag and it will be pretty printed automatically.
Do not forget to encode greater than sign (>) or lower than sign (<) in code snippet. You can also use <pre>, <code> or <xmp> elements with the “prettyprint” class.
Google Prettify provides verious skins for code snippets. You can use different skins by adding skin parameter in url.
Example:
<script src="js/run_prettify.js?skin=sunburst"></script>
“sunburst” is default skin provided by Google Prettify.
The linenums class with prettify tag tells the prettyprinter to insert an <ol> element and <li> elements around each line so that you get line numbers.
<code class="prettyprint linenums">
You can add line numbering start at specific number by adding line number with linenums class.
Example:
<code class="prettyprint linenums:10">
The class linenums:10 makes line numbering starts with 10.
I hope that you found this best script.
JASON
I was just finding lightweight syntax highlighter and this is the best one. Thanks Gopal for this awesome article.
By the way, how can i create custom theme in Google Prettify?
Gopal Joshi
Article for creating custom theme in Google Prettify will be published soon
Ronald a. Spinabella
That’s an awesome post!