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:
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.
- 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.
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.
That’s it. Now we are ready to use Prism.
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.
look at my html stuff here
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 |
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.
body { background:#F2F2F2; } h1, h2, h3, h4, h5, h6 { font-family:'Raleway'; } .container { width:90%; }
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
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.
