Last time I was searching for a good syntax highlighter for beautifully viewing the code snippets on my blog post. Among different syntax highlighter I found out PrismJS by Lea Verou is pretty awesome.
PrismJS is a light weight and works on most of all the platform whether it is your own hosted site or any other popular CMS platform like WordPress, Blogger or Tumblr.
Installing on your page
To install PrismJS on your webpage you need to download the files
prism.css choosing your desire theme and required settings.
prism.js is your settings and CSS file
prism.css is your theme styles.
Now, upload the two files in your hosting site.
Then, you will need to link the
prism.js files in your index page. Example:
<!DOCTYPE html> <html> <head> ... <link href="themes/prism.css" rel="stylesheet" /> </head> <body> ... <!-- after all your content --> <script src="prism.js"></script> </body> </html>
Remember that to correctly work,
prism.css file should be include before the
</head> tag and
Installing on WordPress
Easily highlight your code on WordPress with WP PrismJS. Simply download & activate the plugin and a new icon on your TinyMCE editor will appear. Click on it and you will be able to enter your indented code; choose the language; specifying the maximum height of the code window and the filename.
Installing on Blogger/Tumblr
To install PrismJS on your Blogger/Tumblr blog you can upload
prism.js files on Dropbox because we cannot host file in the Blogger/Tumblr site. Then as same process above go to template edit and inculde
prism.css file link before the
</head> tag and
prism.js file link before
If you don’t like to upload the file and want to use PrismJS default theme then you can include the following two files link to install PrismJS:
<link href="http://prismjs.com/themes/prism.css" rel="stylesheet" /> <script src="http://prismjs.com/prism.js"></script>
First thing you have to escape HTML character
> to highlight syntax with PrismJS. For Example:
You can also use different tools to escape HTML character.
You have to wrap your code inside the
<pre> and the
<code> tag defining the necessary
For example to show HTML snippet define
<pre> <code class="language-markup"> <!-- YOUR RAW HTML CODE HERE --> </code> </pre>
For CSS snippet define
<pre> <code class="language-css"> /* YOUR RAW CSS CODE HERE */ </code> </pre>
With PrismJS by help of these few easy steps you get a nice highlighted code snippet in your webpage, isn’t it awesome?