How to Highlight Code Blocks Using Prism

Table of Contents

1. Introduction
2. Setting Up Prism
3. Adding Code with Pre and Code Tags
4. Conclusion

Introduction

This blog shows how to use Prism to highlight your code. Prism is a syntax highlighter for programming languages on the web.

Setting Up Prism

Go to the download page, choose the style and the supported languages you want to use, then download the CSS and JavaScript files.

Put the CSS and JavaScript files in your site:

Adding Code with Pre and Code Tags

The way Prism adds styling for a specific language is by adding a language-specific class to the code tag, as shown in the following example:

p {color: red}

The following is a list of example language classes Prism supports. I use JavaScript, CSS, HTML, and ASP.NET C# a lot, so I would add the class like the following to my code tag: language-css, language-javascript, language-aspnet, language-csharp, language-jade.

Basic usage of Prism:

Conclusion

Prism supports many modern programming languages, and you can choose the languages you want to support to minimize your file size. It is also easy to use — just add the specific language class to the code tag. I would highly recommend this JavaScript library for syntax highlighting your code.