How to Display Source Code in HTML

-Last updated Monday, April 1st, 2013

When I did my first programming tutorial on Dart (can be found here: http://www.informatics-tech.com/Dart/dart-programming-tutorial-part-1-introduction.html) I was annoyed that browsers would ignore all the formatting I gave my code. Instead of having a nicely indented program, I would end up with an unreadable paragraph of text, like this C++ "Hello World!" example:

#include <iostream>
using namespace std;
void main()
{
cout << "Hello World!" << endl; cout << "Welcome to C++ Programming" << endl;

}

Fortunately, there's an easy solution to this problem.

Step One - Using the <Pre> Tag

First of all, when enclosing the text you want to use as code, use the <pre></pre> tags. This stands for preformatted and basically means that the text will preserve its lines and spaces when rendered by the browser. This allows us to keep our indenting. Here's our "Hello World!" program using the <pre> tag:

#include <iostream>
using namespace std;
void main()
{
	cout << "Hello World!" << endl;
	cout << "Welcome to C++ Programming" << endl; 
}

Step Two - Syntax Colouring

There are many free tools that allow you to implement syntax colouring on your webpage. I chose Google Code Prettify since it's very easy to use and it's also client-side (doesn't bog down your server). To install Prettify, I recommend you watch this tutorial:

Basically, once you've downloaded Prettify, copy the "src" folder into your project and rename it to something meaningful, such as "highlighter". Then, you need to import prettify.css and prettify.js into your HTML page.

Between the opening and closing <head> tags, add this line:

<link rel="stylesheet" href="highlighter/prettify.css" />

You'll also need to copy the following two lines of code just before your closing </body> tag:

<script src="highlighter/prettify.js"></script>
<script>prettyPrint();</script>

Note: You might need to change the file paths depending on where you put them in your project.

Next, you need to replace your code's <pre> tag with <pre class="prettyprint">.

Now let's take a look at our C++ "Hello World!" example:

#include <iostream>
using namespace std;
void main()
{
	cout << "Hello World!" << endl;
	cout << "Welcome to C++ Programming" << endl; 
}

Pretty neat eh?

Step Three - Making our Code Responsive

You only need to follow this step if you have a responsive website. Otherwise, it's just waste of time.

The <pre> tag has one major disadvantage: it doesn't wrap when the screen is too small to display the entire line. Instead, you end up with this:

Pre tag problem

There are two simple solutions to this problem. First of all, if you want your text to wrap, add this code to your CSS file:

pre {   
white-space: pre-wrap;       /* css-3 */   
white-space: -moz-pre-wrap;  /* Mozilla */   
white-space: -pre-wrap;      /* Opera 4-6 */   
white-space: -o-pre-wrap;    /* Opera 7 */   
word-wrap: break-word;       /* Internet Explorer 5.5+ */  
}

The other solution is to add a maximum width to the text. If a certain line is too long to display in said width, a scrollbar will be added. I recommend this solution since it doesn't mess up your formatting. To implement it, add this code to your CSS file (where width defines the maximum length of a line before the scrollbar appears):

pre {
overflow: auto;
width: 500px;
}

I hope this article was helpful!

-Icosebyte

Informatics-Tech