UrduBloggingHub | Informatvie Blog About SEO & Blogging: Installing Prism Syntax Highlighter in Blogger

Highlighting code is quite necessary for me since I always add some reference to my codes I provide. This highlighter helps me to explain my code to my readers much effectively, since they highlight the keywords in the code.

I have seen many renowned blogger using this plugin to highlight their code. Prism syntax is very different from any other syntax highlighter out there because of it features it provide. I need to highlight code which includes HTML, CSS and JavaScript mainly. If I need any other code to highlight I could simply download that plugin and add to the core code that is already present in that particular page.

That means my plugin by default will only highlight HTML CSS and JavaScript codes. If required some other code language to highlight I can simply add that plugin in that particular page. This methods lead decrease in the size code which is for me 8KB to 9KB including CSS code which is quite low compared to prettify.


So if you are using prettify or any other syntax highlighter I would highly recommend you to shift to Prism right now and decrease your page view.

Instructions to follow:

1. Go to Blogger Dashboard→Your Blog
2. Click Template→Click Edit HTML tab
3. Find anywhere inside template </style> or ]]></b:skin>

CSS Code:

/ * CSS Prism Syntax Highlighter * /
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: # 2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}
pre :: before {
    font-size: 16px;
    content: attr (title);
    position: absolute;
    top: 0;
    background-color: # eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: # fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}
pre :: after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: # fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}
pre: hover :: after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}
code {
    font-family: Consolas, Monaco, '
    Andale Mono ',' Courier New ', Courier, Monospace;
    line-height: 16px;
    color: # 88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}
pre code {
    display: block;
    background: none;
    border: none;
    color: # e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}
.token.punctuation code {
    color: #ccc;
}
pre code .token.punctuation {
    color: #fafafa;
}
.token.comment code, code .token.prolog, .token.doctype code, code .token.cdata {
    color: # 777;
}
.namespace code {
    opacity: .8;
}
.token.property code, code .token.tag, .token.boolean code, code .token.number {
    color: # e5dc56;
}
.token.selector code, .token.attr code-name, code .token.string {
    color: # 88a9ad;
}
.token.selector pre code, pre .token.attr code-name {
    color: #fafafa;
}
pre code .token.string {
    color: # 40ee46;
}
.token.entity code, code .token.url, pre-css .language .token.string, pre .style .token.string {
    color: #ccc;
}
.token.operator code {
    color: # 1887dd;
}
.token.atrule code, code .token.attr-value {
    color: # 009 999;
}
.token.atrule pre code, pre code .token.attr-value {
    color: # 1baeb0;
}
.token.keyword code {
    color: # e13200;
    font-style: italic;
}
.token.comment code {
    font-style: italic;
}
.token.regex code {
    color: #ccc;
}
.token.important code {
    font-weight: bold;
}
.token.entity code {
    cursor: help;
}
pre marks {
    background-color: # ea4f4e! important;
    color: # fff! important;
    padding: 2px;
    border-radius: 2px;
}
code mark {
    background-color: # ea4f4e! important;
    color: # fff! important;
    padding: 2px;
    border-radius: 2px;
}
pre code mark {
    background-color: # ea4f4e! important;
    color: # fff! important;
    padding: 2px;
    border-radius: 2px;
}
.comments pre {
    padding: 10px 10px 15px 10px;
    background: # 2c323c;
}
.comments pre :: before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: # f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: # fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}
.comments pre :: after {
    font-size: 11px;
}
.comments pre code {
    color: # eee;
}
.comments pre.line-numbers {
    padding-left: 10px;
}
pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}
pre.line-numbers> code {
    position: relative;
}
.line-numbers-numbers .line-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -MS-user-select: none;
    padding: 0;
}
.line-numbers-rows> span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}
.line-numbers-rows> span: before {
    content: counter (linenumber);
    color: # 999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}
pre [Data-codetype = 'CSSku']: before {
    background-color: # 00a1d6;
}
pre [Data-codetype = 'HTMLku']: before {
    background-color: # 3cc888;
}
pre [Data-codetype = 'JavaScriptku']: before {
    background-color: # 75d6d0;
}
pre [Data-codetype = 'JQueryku']: before {
    background-color: # e5b460;
}

Step 2:

After that save 2 below code just before the </body> or </head>

<Script>
$ ('Pre'). Attr ('class', 'line-numbers');
Prism.hooks.add ("after-highlight", function (e) {var n = 1 + e.code.split ("\ n"). length; var r; lines = new "+ (ParseInt (t.getAttribute (" data-start "), 10) -1)} e.element.appendChild (r)})
</ Script>

<Script type = 'text / javascript'>
var pres = document.getElementsByTagName (& quot; pre & quot;);
for (var i = 0; i & lt; pres.length; i ++) {
  pres [i] .addEventListener (& quot; & quot ;, DblClick function () {
    var selection = getSelection ();
    var range = document.createRange ();
    range.selectNodeContents (this);
    selection.removeAllRanges ();
    selection.addRange (range);
  }, False);
}
</ Script>

• Save template.You have successfully inserted this plugin.

When you create a new post, apply the code below caller on the post HTML Tab

Code for Post:

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)