Get Beautiful Syntax Highlighting For Your Website Code

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.

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

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