Integrate Prism Syntax Highlighter to Blogger

Prism is a really cool, simple and lightweight syntax highlighter. Prism supports bunch of languages and 6 different themes by today. First, see how prism looks.


public class Main {
    public static void main(String[] args) {
        System.out.println("This is how prism looks");
    }
}

Download Prism JS

Hop into prismjs official website to download the required stuff
Go to Download page
You can download the development or minified version. Since we are going to use it straight away, we need the minified version
Select a theme from Themes section. You can see a live preview at the bottom of the page
In the Languages section , select all the languages you need to be included in your syntax highlighter
There are bunch of Plugins, select whatever you need, as per your requirement.
Finally, use DOWNLOAD CSS and DOWNLOAD JS buttons to download both .css and .js files.

Host Prism JS

Now we have to add these js and css files to blogger template. To do this, blogger needs to read these files through a cdn (Content Delivery Network).
Simply, CDN makes available web content to the users, in our case its our js and css files. The downloaded files should be available online, where blogger can read them from the hosted location.
We can use dropbox to host our js and css files and its free !!!
Create a dropbox account and upload prism files to the Public folder. I have created a separate folder named CDN, and uploaded the two prism files
A default CDN for prism js is available here, but here you cannot get the advantage of the customizations provided by prism. That is the reason of hosting your own prism in dropbox

Add Prism JS to Blogger

Now we are ready to add Prism to blogger. Go to your blog's Template section. Click on the Backup / Restore button to download the full working template. By doing this, you can restore the template if something goes wrong.
Now click on Edit Html button. This will take you to the blogger template editor.
Locate the </head> tag and add following lines immediate before the </head> tag


<link href='https://dl.dropboxusercontent.com/u/55229039/CDN/prism_custom.css' rel='stylesheet' type='text/css'/>


<script src='https://dl.dropboxusercontent.com/u/55229039/CDN/prism_custom.js' type='text/javascript'/>

These two links should get from the files we just uploaded to dropbox .
Go to your file hosted location in dropbox and click on each of the file and click "Copy public link…" option to get their public link. Add them to your <link> and <script> tags.

Now save the template and preview it to be sure everything works fine and same as earlier
If everything goes well, we are done with adding prism to Blogger. Now we simply have to use it in our code.

Using Prism JS to highlight syntax

Cannot think of a simpler way to highlight syntax. Its just the below code


<pre><code class="language-xxx">### Your code here ###</code></pre>

The "xxx" is language-xxx should be replaced with the relevant language alias. If it is css

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

When you are pasting the code make sure it is encoded properly. If you paste the code to the blog post editor directly when it is in the "Compose" mode, it will encode the code automatically. Or else you can use a tool like this to encode your code.

Prism JS language aliases

I have mentioned below, all the language aliases available as per today. You can find them here too.
But, keep in mind, to get the language support, you should select that specific language when you are downloading prism libraries.
Now, we are done. Make your blog a beauty with Prism !!! I would like to hear from you.

Markup - markup

CSS - css

C-like - clike

JavaScript - javascript

ActionScript - actionscript

Apache Configuration - apacheconf

AppleScript - applescript

ASP.NET (C#) - aspnet

AutoHotkey - autohotkey

Bash - bash

C - c

C# - csharp

C++ - cpp

CoffeeScript - coffeescript

CSS Extras - css-extras

Dart - dart

Eiffel - eiffel

Erlang - erlang

F# - fsharp

Fortran - fortran

Gherkin - gherkin

Git - git

Go - go

Groovy - groovy

Haml - haml

Handlebars - handlebars

Haskell - haskell

HTTP - http

Ini - ini

Jade - jade

Java - java

Julia - julia

LaTeX - latex

Less - less

LOLCODE - lolcode

Markdown - markdown

MATLAB - matlab

NASM - nasm

NSIS - nsis

Objective-C - objectivec

Pascal - pascal

Perl - perl

PHP - php

PHP Extras - php-extras

PowerShell - powershell

Python - python

R - r

React JSX - jsx

reST (reStructuredText) - rest

Rip - rip

Ruby - ruby

Rust - rust

SAS - sas

Sass (Scss) - scss

Scala - scala

Scheme - scheme

Smalltalk - smalltalk

Smarty - smarty

SQL - sql

Stylus - stylus

Swift - swift

Twig - twig

TypeScript - typescript

Wiki markup - wiki

YAML - yaml

Techy Tunes

Welcome to Techy Tunes !

Follow Me