Syntax Highlighting for your website
Syntax Highlighting for your website
You have let’s say a blog, like this one you are reading right now, and you will post code snippets on it. You want your readers to see that clear and highlighted not just plain text because is hard to read for the eye of a programmer.
Google code pretify.
You can download this tool from here. It has various themes that you can choose from and it is really simple to use also.
Installation.
You have two files that you downloaded. One is a css file and another one is a js file. The css file should be included between your <head></head> tags like this:
1 |
<link rel="stylesheet" href="highlighter/prettify.css" /> |
The js must be included before the enclosing body tag like this:
1 |
<script src="highlighter/prettify.js"></script> |
The syntax highlighter will search for a “pre"
or “code"
element in your page that has a class of prettyprint
. Let’s see an working example:
1 2 3 4 5 6 7 8 9 10 |
<pre class="prettyprint"> (function() { var myFirstVariable= 'bla-bla'; var mySecondVariable= 'bla2-bla2'; function doSomething() { console.log('bla3-bla3'); } })(); </pre> |
Next, we want to call the “prettyprint” function that highlights the code inserted between “pre” or “code” tags. We do that after we included the “prettify.js” in the bottom of our page like this:
1 |
<script>prettyPrint();</script> |
That’s it ! You will obtain a highlighted syntax on your website. You can even change your theme by modifying the css, or by choosing from a already existing theme repository from here.