How to format code within web pages

When displaying code within web pages it can be hard to read if it hasn’t been separated from the other text and images on the page. To get around this problem you can use google code-prettify JavaScript.

This allows code to be displayed like this:

To implement this within your HTML you need to add the following lines of HTML:

At the start of your page:

<script src="https://cdn.example.com/google/code-prettify/master/loader/run_prettify.js"></script><script>

Then whenever you want to display code:

<pre class="prettyprint">
#!/bin/sh
echo "Hello, World!"
</pre>