Advertisement
HTML & CSS

Quick Tip: How to Add Syntax Highlighting to Any Project

by

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&mdash;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...

final product

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&mdash;8">
   <title>untitled</title>
   <link rel="stylesheet" href="highlighter/dessert.css" />
</head>
Desert Theme Applied

Seriously — can it get any simpler than that?

Related Posts
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    PHP
    Statamic 101Statamiclogo 400
    Statamic is a modern PHP CMS which really makes an effort to be easy and intuitive to use. From its flat-file design to its use of technologies like Markdown and YAML, you can accomplish an outstanding amount of work without writing any code at all. In this article we will take a look at the process from installation to setting up a basic portfolio.Read More…
  • Web Design
    UX
    Implementing the Float Label Form PatternForm float input retina
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…
  • Web Design
    CMS
    Organizing Ghost Theme Files and FoldersGhost files retina
    This is the second part of our Ghost theme design tutorial series. Everything from here assumes you have a foundational understanding of Ghost. If not, before continuing please take the time to read Understanding Ghost: Stages of Design).Read More…