Using SELF HOSTED Google Code Prettify

To show source code

Posted by paul on 2013.11.07

Using SELF HOSTED Google Code Prettify to show source code

After setting up my website to use Google Code Prettify (documented here) using prettify JS file hosted on googlecode.com, I noticed my pages were sometimes waiting for code from googlecode.com to load. Sometimes the wait time was quite noticeable. To solve this, I decided to self host Google Prettify files. This tutorial is for setting up Google Code Prettify for the first time on a (plain html/css) website.

You will first create test-local.html and then integrate self-hosted Prettify script to easily show source code snippet on your html page. Finally I will show how to add customized formatting (font, font-size) of your choice to the source snippet using prettify-addon.css (created by you). The step for adding prettify-addon.css was included in my previous post about Google Code Prettify also but I will still mention it here for those who skipped my previous post.

Assumptions

  1. You have followed my post on setting up prettify using files hosted on googlecode.com. Not required but helpful.
  2. After this, all files used by prettify script will be hosted on your own web server instead of googlecode.com. The js files will be kept in http://yoursite.com/assets/js/prettify/ (replace yoursite.com with your own). The css files will be kept in http://yoursite.com/assets/css/prettify/ AND http://yoursite.com/assets/css/
  3. Test-local.html is at the root directory of http://yoursite.com/.
  4. I keep my js and css files in http://yoursite.com/assets/js/ AND http://yoursite.com/assets/css/. Your choice though.
  5. How web URL and folders line up. Kinda obvious but mentioning it for the sake of beginners.
    • http://yoursite.com/assets/js/ -> ~/codes/yoursite/assets/js
    • http://yoursite.com/assets/css/ -> ~/codes/yoursite/assets/css
  6. In my previous post on Google Code Prettify, I mentioned you can dev/use Prettify even if the html/css files are on your local HD. However when it comes to self-hosting Prettify, you can only use a real world web server to qa/use. Something to keep in mind.

Create html file, test-local.html

I am reusing test1.html created at the end of my previous post about Google Code Prettify and renamed it as test-local.html.

<!DOCTYPE html>
<html>
<head>
<title>test1.html</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<link href="prettify-addon.css" type="text/css" rel="stylesheet" />
</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>

Download prettify files

  1. Download prettify-4-Mar-2013.tar.bz2.
  2. Do not download minified file (prettify-small-4-Mar-2013.tar.bz2) because run_prettify.js in the minified file is pretty much impossible to edit (which is necessary for self hosting). You can always minify run_prettfy.js yourself after editing necessary parts.
  3. Unzip prettify-4-Mar-2013.tar.bz2 and you should see google-code-prettify with a few subfolders. The files you will use are in 2 folders: src and styles.

Copy .js files

  1. On your dev website (because you never edit directly on your live site) OR local folder containing the files, create a folder to hold the prettify js files:
  2. http://yoursite.com/assets/js/prettify/ OR (~/codes/yoursite/assets/js/prettify/)
  3. Copy the content of (NOT the folder src) of google-code-prettify/src/ over to assets/js/.
  4. google-code-prettify/src/ -> http://yoursite.com/assets/js/prettify/ OR
    google-code-prettify/src/ -> ~/codes/yoursite/assets/js/prettify/
  5. There are a few dozen .js files and 1 .css file to copy.

Copy css files for skinning

  1. On your dev website (or local directory), create a folder to hold the prettify css files:
  2. http://yoursite.com/assets/css/prettify/ OR (~/codes/yoursite/assets/css/prettify/)
  3. Copy the four CSS files (NOT the folder styles itself) in google-code-prettify/styles/ over to assets/css/.
  4. google-code-prettify/styles/ -> http://yoursite.com/assets/css/prettify/ OR
    google-code-prettify/styles/ -> ~/codes/yoursite/assets/css/prettify/

Edit run_prettify.js

  1. All references about googlecode.com need to be stripped out from run_prettify.js.
  2. Edit run_prettify.js by opening http://yoursite.com/assets/js/prettify/run_prettify.js (or ~/codes/yoursite/assets/js/prettify/run_prettify.js) with a text editor (ex.: Sublime or TextMate).

Replace value of LOADER_BASE_URL

  1. The default value of var LOADER_BASE_URL is:
  2. 'https://google-code-prettify.googlecode.com/svn/loader';
    var LOADER_BASE_URL =
        'https://google-code-prettify.googlecode.com/svn/loader';
    
  3. First, comment out that line: 'https://google-code-prettify.googlecode.com/svn/loader';
  4. Next, insert your URL to assign a new value to LOADER_BASE_URL so you end up with following:
  5. var LOADER_BASE_URL =
    'http://yoursite.com/assets/js/prettify';
    
    //'https://google-code-prettify.googlecode.com/svn/loader';

Replace /skins/

  1. Comment out line that contains: + '/skins/' + encodeURIComponent(skins[i]) + '.css');
  2. skinUrls.push(LOADER_BASE_URL
    + '/skins/' + encodeURIComponent(skins[i]) + '.css');
    
  3. Insert a line so it looks like below:
  4. skinUrls.push(LOADER_BASE_URL
    //        + '/skins/' + encodeURIComponent(skins[i]) + '.css');
    + '/assets/css/prettify/' + encodeURIComponent(skins[i]) + '.css');
  5. Above change means you need to keep all .css from downloaded Prettify files in
  6. http://yoursite.com/assets/css/prettify/

Update test-local.html

Edit test-local.html so it uses self-hosted Prettify files.
Before

<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<link href="prettify-addon.css" type="text/css" rel="stylesheet" />
.....
.....

After

<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<script src="assets/js/prettify/run_prettify.js"></script>
<link href="assets/css/prettify-addon.css" type="text/css" rel="stylesheet" />
.....
.....

test-local.html in final form

<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<script src="assets/js/prettify/run_prettify.js"></script>
<link href="assets/css/prettify-addon.css" type="text/css" rel="stylesheet" />

</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>

Check test-local.html

If you have been editing the files on local HD, upload the edited files to http://yoursite.com/.

  1. file: test-local.html -> http://yoursite.com/test-local.html
  2. directory: assets/ -> http://yoursite.com/assets/
  3. Remember assets/ includes 2 subfolders: js & css

Open http://yoursite.com/test-local.html and you should be able to see the html file with source code properly presented. If in Chrome, enable Developer Tools view and you should see your website does NOT download anything from googlecode.com. You may already have prettify-addon.css working properly to customize the source codes. If so, you can stop here. If not and you would like a little better formatting of source code blocks, follow rest of procedures to add prettify-addon.css.

Add custom styling to source code

Create prettify-addon.css

  1. Create prettify-addon.css and add following code. You can reuse prettify-addon.css created in previous post. I recommend keeping prettify-addon.css at http://yoursite.com/assets/css/prettify-addon.css
  2. .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;
    }

Use prettify-addon.css

Check test-local.html is as shown below so it is aware of prettify-addon.css.
*actually this was done earlier on this very tutorial here and you should not have to edit test-local.html.

<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<script src="assets/js/prettify/run_prettify.js"></script>
<link href="assets/css/prettify-addon.css" type="text/css" rel="stylesheet" />
.....
.....

Note prettify-addon.css is not in
http://yoursite.com/assets/css/prettify/
BUT in
http://yoursite.com/assets/css/.

I did this because prettify-addon.css is not from Googlecode but I created it by myself. The choice is up to you.

Final test

Open http://yoursite.com/test-local.html in a web browser and you should see that the source code block has better formatting.

That's it!