Tutorial

Get Beautiful Syntax Highlighting For Your Website Code with PrismJS

Draft updated on Invalid Date

Chris on Code

Get Beautiful Syntax Highlighting For Your Website Code with PrismJS

This tutorial is out of date and no longer maintained.

Introduction

For websites like ours, code blocks and pre tags are necessities. Making these code blocks look good and function well is a big part of having your tutorial or example understood and easily digestible by your users.

We’ve been asked quite a few times what tool we use for syntax highlighting here at Scotch. Here it is!

Today we’ll be looking at a great tool that some of you may have heard of: PrismJS. Prism is a simple, lightweight, and easy-to-use syntax highlighter. It is easily customizable and has support for some plugins to extend its functionality.

Here’s a quick example:

    <p>For websites like ours, <code>code</code> blocks and <code>pre</code> tags are necessities. Making these code blocks look good and function well is a big part of having your tutorial or example understood and easily digestible by your users.</p>

    <p>We've been asked quite a few times what tool we use for syntax highlighting here at Scotch. Here it is!</p>

    <p>Today we'll be looking at a great tool that some of you may have heard of: <a href="http://prismjs.com" target="_blank">PrismJS</a>. Prism is a simple, lightweight, and easy-to-use syntax highlighter. It is easily customizable and has support for some plugins to extend its functionality.</p>

Major Features

Lightweight Only 2kb minified and gzipped
Good Practices To be semantically correct when writing code, you should be using the actual code tag. Some other highlighters just tell you to use pre. Prism makes you use both for good code. It also uses the HTML5 recommended way of defining a language using class="language-xxxx".
Browser Support IE9+, Firefox, Chrome, Safari, and most mobile browsers
Easy to Extend Prism’s plugin architecture lets you extend the project.
Smart Highlighting Has support for embedded, nested, and inline languages (like CSS inside of HTML)
Line Highlights Exactly what you’d think. Also ranges of lines. (Plugin)
Invisible Characters Show tabs and line breaks (Plugin)
Invisible Characters Show tabs and line breaks (Plugin)
Autolink URLs and Emails Also use Markdown links in comments (Plugin)

Implementing Prism into your site is an extremely easy process. Just link to the css and the js files and start highlighting!

Go get your download from the Prism website.

Download Prism

Once you have the files you have configured Prism to your needs, download and include the files into your project.

Now we will include these files in our project.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Look At Me Prism-ing</title>

        <link rel="stylesheet" href="css/prism.css">

        <script src="js/prism.js"></script>
    </head>
    <body>

    </body>
</html>

That’s it. Now we are ready to use Prism.

Usage

After you have included the necessary files, using Prism is very easy. All you have to do is add a pre and code tag to your site. Then add a class to your code tag and you have beautiful syntax highlighting.

    <pre>
        <code class="language-markup">

            look at my html stuff here

        </code>
    </pre>

Just like that, you have beautiful syntax highlighting. Notice how we use language-markup to highlight HTML files. Here are the different classes to use for the different languages.

Language	Class
HTML	language-markup
CSS	language-css
JavaScript	language-javascript
CoffeeScript	language-coffeescript
PHP	language-php
Ruby	language-ruby
Go	language-go

Plugins

Prism lets you extend the features using plugins and it has some great ones ready to go.

Line Highlight

Highlight a specific line in your code. Use the data-line attribute on your pre tag.

    <pre data-line="4, 6, 10-13">
        <code class="language-css">
            body                            { background:#F2F2F2; }
            h1, h2, h3, h4, h5, h6          { font-family:'Raleway'; }
            .container                      { width:90%; }
        </code>
    </pre>

Line Numbers

Add line numbers to your code blocks. Do this by adding a class to your pre tag.

pre class="line-numbers"

Other Plugins

Show Invisibles Show the tabs and spaces
Autolinker Automatically link URLs and emails
WebPlatform Docs
File Highlight Fetch an external file and highlight it

Conclusion

Using Prism is a quick and easy way to get beautiful syntax highlighting for your code. There are other alternatives out there, but we feel that Prism does the job well and is incredibly easy to use.

If you have any favorite tools for showing off code or anything similar, sound off in the comments.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors