Using Google Code Prettify

To show source code

Posted by paul on 2013.11.07

Using Google Code Prettify to show source code

So you want to present source codes on your website using the formatting shown in the image below?

I will show you how to get it done with Google Code Prettify. The documentation of the projection is good but in case someone has issues with it, here's a more detailed howto.

In my tutorial, you will create an html file (test1.html) & a css file (prettify-addon.css). You will first create test1.html without any source code initially and then you will walk through steps to add a short source code snippet. Finally I will show how to add customized formatting (font, font-size) to the source snippet using prettify-addon.css.

Create test1.html

Open 2 text editor windows (not tabs) side by side, a web browser, and Finder. Arrange all 4 windows side by side so you can view them all at once.

In the first text editor, copy and paste in following lines. Save it as test1.html.

<!DOCTYPE html>
<html>
<head>
<title>test1.html</title>
</head>
<body>
<p>
Hi.
</p>
</body>
</html>
    

Open test1.html with a web browser. You should see a simple web page.

test1.html

Insert a line for run_prettify in test1.html

Copy and paste following line between <head> and </head>:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=default"></script>

test1.html after adding run_prettify.js

<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=default"></script>
</head>
<body>
<p>
Hi.
</p>
</body>
</html>

    

You can also download run_prettify.js to your own web server and host it from there.

Typing in     & l t ;     in order to show '<'

Important. When you want to show '<' on html pages, you actually need to type in following when using Google Code Prettify:

    &lt;

    

The 4 characters are:

  1. ampersand symbol
  2. letter l
  3. letter t
  4. ;

This issue isn't just limited to Google Code Prettify. I tried out SyntaxHighlighter and it also has the the same requirement. It's just the way HTML works. This little requirement threw me off a bit.

Again, if you would like to show this on your html file:

<p>
Hello.
</p>

    

You actually need to type this in your html file:

&lt;p>
Hello.
&lt;/p>

    

Insert source code in test1.html

Let's proceed with inserting source code in test1.html. Insert following following code. The first and last lines are important. They are the lines that specify where the source code starts and stops.
Source code below

<pre class="prettyprint linenums">
    &lt;p>
        First paragraph.
    &lt;/p>
    &lt;p>
        Second paragraph.
    &lt;/p>
</pre>
    

Test1.html after adding source code

What test1.html should look like after you added your source code you want to present.

<!DOCTYPE html>
<html>
<head>
<title>test1.html</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=default"></script>
</head>
<body>
<p>
Hi.
</p>

<strong>Source code below</strong> <br />
<pre class="prettyprint linenums">
    &lt;p>
        First paragraph.
    &lt;/p>
    &lt;p>
        Second paragraph.
    &lt;/p>
</pre>

</body>
</html>
    
    

View test1.html in web browser

Refresh your web browser and you should see:

test1-after-code

Add your own style

In the previous image, you will notice that the source code section takes up full width of the browser window. So it needs some CSS styling.

Create prettify-addon.css

In the second text editor, type in following code and save it as prettify-addon.css.:

.prettyprint {
    margin-left: 2.5em;
    margin-right: 2.5em;
    font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
    background-color: gainsboro;
}
    

Tell test1.html to use prettify-addon.css file.

In test1.html add following line to use css file:
<link href="prettify-addon.css" type="text/css" rel="stylesheet" />

Before

    . . .
    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=default"></script>
    . . .
    

After

. . .
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=default"></script>
<link href="prettify-addon.css" type="text/css" rel="stylesheet" />
. . .
    

Refresh web browser

Refresh your web browser and you should see:

test1-after-code

Now the source code box is not taking up 100% of the width but with some empty space. You will also see better looking font being used for the source code.

That's it!