Prism syntax highlighting for your website code

Categories:  web
Labels:  html, javascript

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.

example-html-image
Prism Demo - Default Theme (html)

example-html-Okaidia-theme-image
Prism Demo - Okaidia Theme (html)

Customized Download System

Prism has support for 61 languages, including all the web design languages we’re using in our demos. When you download Prism, however, you don’t have to bring in all these languages; you can choose only the ones you need. You can also choose the theme you want to use, then the required JavaScript and CSS will be generated for you.

After selecting the theme and languages you want, download your JS and CSS files at the bottom of the download page.

If you decide you want to use a different theme, just make a new theme selection from the top of the page and download the regenerated stylesheet.

Deployment Method

  1. Load the JavaScript file and CSS file from your customized build. 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.

  1. Wrap each code block in a pre element, and then in a code element inside it, using the class of the code element to specify language:
<pre>
	<code class="language-javascript">
		// code 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

Links

Related Posts:

Social Profiles

This web accept cryptocoin donations
BTC address, LTC, ETH, DASH, Uphold:
Why donations?