Quick Tip: How to Add Syntax Highlighting to Any Project
Tutorial Details
- Topic - Syntax Highlighting
- Difficulty - Easy
- Format - Screencast
In this lesson, we’ll use a JavaScript based syntax highlighter to quickly add a syntax highlighting functionality to any web project — even on a simple HTML page!
Step 1 — Download the Source Code
You can download the syntax highlighter source files here.
Step 2 — Drag the src Directory into your Project
I generally rename this folder to highlighter. Don’t delete anything within here, unless you don’t anticipate using some of the language specific JavaScript files.
Step 3 — Import the Necessary Files
Within your HTML file (or whichever page is responsible for displaying your view), import both the prettify.css and prettify.js files.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf—8"> <title>untitled</title> <link rel="stylesheet" href="highlighter/prettify.css" /> </head> <body> <script src="highlighter/prettify.js"></script> </body> </html>
Notice how we’ve placed our script at the bottom of the page, just before the closing body tag. This is always a smart move, as it improves performance.
Next, we need something to work with! The syntax highlighter will search for either a pre or code element that has a class of prettyprint. Let’s add that now.
<pre class="prettyprint">
(function() {
var jsSyntaxHighlighting = 'rocks';
})();
</pre>
Step 4 — Calling the prettyPrint() Function
The last step is to execute the prettyPrint() function. We can place this bit of code at the bottom of the page as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>
<pre class="prettyprint">
(function() {
var jsSyntaxHighlighting = 'rocks';
})();
</pre>
<script src="highlighter/prettify.js"></script>
<script>prettyPrint();</script>
</body>
</html>
If we now view the page in the browser…
Well that was easy! But, as a final bonus step, what if we want to change the highlighter theme? In that case, it all comes down to editing the stylesheet how you see fit. Even better, there are a handful of stylesheets in the theme gallery that you’re free to use. I personally like the Desert theme. To apply it, copy the CSS from the link above, create a new stylesheet in your project, and paste the CSS into it. Next, update the stylesheet include from within the head section of your document.
<head> <meta charset="utf—8"> <title>untitled</title> <link rel="stylesheet" href="highlighter/dessert.css" /> </head>
Seriously — can it get any simpler than that?
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
- http://coderbay.com Coderbay
- http://codecanyon.net/user/RikdeVos/portfolio/?ref=RikdeVos Rik de Vos
- http://www.5jc.net huarong
- http://mimrankhan.com M.Imran Khan
- http://thetechtime.com rax
- V
- V
- http://evanrelf.com Evan Relf
- http://edwinhollen.com edwinhollen
- Kyle Smith
- mukarram
- irengba
- http://www.github.com/dotink/inkwell Matthew J. Sahagian
- Zsolt Ébel
- Fabien
- http://www.encoder2002.com Daniel Sitnik
- http://www.regalsweb.com John
- http://acedesigns.co.za Anele
- http://www.umbraprojekt.pl mingos
- http://www.jeffadams.co.uk Jeff Adams
- http://danlamanna.com Dan LaManna
- http://www.nouveller.com/ Benjamin Reid
- http://8gramgorilla.com 8 Gram Gorilla
- Gaurav Porwal
- Gaurav Porwal
- http://www.isshtechnosoft.com/ flyer
- Torzonhot
- Dexter Nierva
- Dexter
- Morphius
- http://www.e-cart.dk Torben Gross
- Badia
- http://rtyrggythy.ru ПКАвшнрепвпшлневлрл ронпа ллггн апе енднгп гндл пдгнекащлгн пдшгнп гнлд нна глн длгонп зжгш еп гнднгп гна лгнр дгн глн алгон гнп гнаглд пд
- bhagwat
- Sagar
- luis alberto
- http://www.facebook.com/osc4life Jim Clarke