Labels

Arduino (1) Bugs (3) C (1) HTML (1) Install (3) Linux (27) Maths (1) Python (11) Raspberry Pi (4)

Monday, 29 May 2017

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 I use the google code-prettify JavaScript.
This allows code to be displayed like this:
#!/bin/sh
echo "Hello, World!"

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.rawgit.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>