Tutorial

Get Beautiful Syntax Highlighting For Your Website Code with PrismJS

Draft updated on Invalid Date
    Default avatar

    By 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

    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 us


    About the authors
    Default avatar
    Chris on Code

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel