Get Beautiful Syntax Highlighting For Your Website Code

Chris Sevilleja
👁️ 51,689 views
💬 comments

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 digestable 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.

Table of Contents

    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 digestable 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, Chorme, 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)

    Who Uses It?

    logo-smashing
    logo-ala
    logo-mdn
    logo-wpd
    logo-typeplate

    And don't forget yours truly! We use Prism right here on Scotch.

    Getting Started

    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.

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

    prismjs-download

    Now we will include these files into 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

    Themes

    Prism lets you configure your download with a few different themes.

    Default

    prism-theme-default

    Dark

    prism-theme-dark

    Funky

    prism-theme-funky

    Okaida

    prism-theme-okaidia

    Twilight

    prism-theme-twilight

    Coy

    prism-theme-coy

    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

    Syntax Highlighting at Its Best

    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.

    Chris Sevilleja

    173 posts

    Co-founder of Scotch.io. Slapping the keyboard until something good happens.