How to Hightlight Code Block by Use Prism

This blog shows how to use prism to hightlight your code.

Prism is a syntax highlighter for your program languages with web.

Go to the download page, choose the style, support languages you want to use, then download the css and javascript.

1. put the css and javascript to your site.

  <link href="/styles/vendor/prism.css" rel="stylesheet">
  <script src="/js/vendor/prism.js"></script>

2. add the code with pre, code tag

the way prism add style for specific language is you add the language specific class to the code tag as following example.

<pre><code class="language-css">p {color: red} </code></pre>

Following are list of the example language prism support so far, I'm using javascript, css, html, asp.net C# a lot. So I would put the class like following at my code tag class. language-css, language-javascript, language-aspnet, language-csharp, language-jade.

basic usage about prism

Prism support lots of modern program language, you could choose the language you want to support so able to minimal your file size. Also, easy to use by just adding the specific language's class to the code tag. I would highly recommand this javascript library for syntaxhigh your code.