Prism Syntax Highlighter Shortcode For BlogSpot Blogs

Code Highlighter For Blogger Post

Installing the code highlighter in your blogger template is the process of highlight the codes in your blogger posts. In this post, i will show you a step by step guide to get this code install in your blogger template. After installing this gadget, you can make your blogger posts more attractive and beautiful. This code highlighter is created with CSS and Jquery which is also know as syntax highlighter or shortcode. In one of my most clicked tutorial, i shared an another Syntax Highlighter for blogger and if you want to install that gadget in your blogger, your can checkout this here.

Pay Attention: How to Create HTML Sitemap In Blogger Blogs

Demo

Click here

Adding Syntax Highlighter Shortcode to Blogger Template

Go to your blogger Dashboard > Template > Edit HTML
Click anywhere inside the template editor and press Ctrl + F and search </body>
Paste the following code snippets just before the </body>

<script type='text/javascript'> //<![CDATA[ !function(){for(var n=document.getElementsByTagName("pre"),e=n.length,a=0;e>a;a++){n[a].innerHTML='<span class="line-number"></span>'+n[a].innerHTML+'<span class="cl"></span>';for(var s=n[a].innerHTML.split(/\n/).length,r=0;s>r;r++){var l=n[a].getElementsByTagName("span")[0];l.innerHTML+="<span>"+(r+1)+"</span>"}}}(); //]]> </script>

Now search for the ]]></b:skin> tag and paste the following code snippets just above the it.

.tl-dropcap{float:left;display:block;font-size:50px;line-height:50px; background-color:#e5192c;color:white;text-align:center; margin:9px 13px 0 0; padding:2px 13px 5px 13px;font-family:Verdana,Geneva,sans-serif;text-transform:uppercase;} .tl-dropcap.dcap2{webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%} .tl-dropcap.dcap3{background:none;font-weight:900;font-size:75px;line-height:65px} pre{background-color:#F5F5F5;color:#333; position:relative;padding:0 7px; margin:15px 0 10px;overflow:auto;word-wrap:normal;white-space:pre;position:relative} pre[data-codetype]{padding:37px 1em 5px} pre[data-codetype]:before{content:attr(data-codetype); display:block;position:absolute; top:-5px;right:0;left:0; background-color:#F1F1F1; padding:7px;color:#FFFFFF;webkit-box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;-moz-box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;box-shadow:rgba(0,0,0,0.117647) 0 1px 3px;} pre[data-codetype="HTML"]{color:#6d6e70} pre[data-codetype="CSS"]{color:#00a78e} pre[data-codetype="JavaScript"]{color:#8a7967} pre[data-codetype="JQuery"]{color:#fd5c63} pre[data-codetype="HTML"]:before{background-color:#6d6e70} pre[data-codetype="CSS"]:before{background-color:#00a78e} pre[data-codetype="JavaScript"]:before{background-color:#8a7967} pre[data-codetype="JQuery"]:before{background-color:#fd5c63} pre[data-codetype="HTML"] span.line-number{border-right: 2px solid #6d6e70;} pre[data-codetype="CSS"] span.line-number{border-right: 2px solid #00a78e;} pre[data-codetype="JavaScript"] span.line-number{border-right: 2px solid #8a7967;} pre[data-codetype="JQuery"] span.line-number{border-right: 2px solid #fd5c63;} pre code,pre .line-number{display:block;color:#666666} pre .line-number{color:#666666;min-width:1em} pre .line-number span{display:block} pre .line-number span:nth-child(even){background-color:#EEEEEE} pre .cl{display:block;clear:both} pre .line-number{float:left;margin:0 1em 0 -1em;border-right:2px solid #666666 ; text-align:right} pre .line-number span{padding:0 .8em 0 1em} .button,input.button{position:relative;display:inline-block; margin-right:1em;margin-bottom:1.34em;padding:0.667em 2em; border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em; border-radius:0.333em; background-color:rgba(84,87,102,1); color:#FFFFFF!important; text-decoration:none!important; text-transform:uppercase;font-size:0.778em!important; line-height:1.714em!important;cursor:pointer} .button,input.button{-webkit-transition: background-color 0.3s linear,color 0.3s linear;-moz-transition: background-color 0.3s linear,color 0.3s linear;transition: background-color 0.3s linear,color 0.3s linear} .button:hover,input.button:hover{border-bottom:none; background-color:rgba(84,87,102,0.9)} .button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)} .button i{margin-right:0.667em; vertical-align:middle;line-height:1em!important} .button.red,input.button.red{background-color:rgba(253,104,91,1)} .button.red:hover,input.button.red:hover{background-color:rgba(253,104,91,0.9)} .button.orange,input.button.orange{background-color:rgba(250,111,87,1)} .button.orange:hover,input.button.orange:hover{background-color:rgba(250,111,87,0.9)} .button.yellow,input.button.yellow{background-color:rgba(254,205,94,1)} .button.yellow:hover,input.button.yellow:hover{background-color:rgba(254,205,94,0.9)} .button.green,input.button.green{background-color:rgba(161,210,110,1)} .button.green:hover,input.button.green:hover{background-color:rgba(161,210,110,0.9)} .button.mint,input.button.mint{background-color:rgba(79,206,173,1)} .button.mint:hover,input.button.mint:hover{background-color:rgba(79,206,173,0.9)} .button.aqua,input.button.aqua{background-color:rgba(85,193,231,1)} .button.aqua:hover,input.button.aqua:hover{background-color:rgba(85,193,231,0.9)} .button.blue,input.button.blue{background-color:rgba(96,158,234,1)} .button.blue:hover,input.button.blue:hover{background-color:rgba(96,158,234,0.9)} .button.purple,input.button.purple{background-color:rgba(171,148,233,1)} .button.purple:hover,input.button.purple:hover{background-color:rgba(171,148,233,0.9)} .button.pink,input.button.pink{background-color:rgba(234,137,191,1)} .button.pink:hover,input.button.pink:hover{background-color:rgba(234,137,191,0.9)} .button.white,input.button.white{background-color:rgba(255,255,255,1); color:#545766!important} .button.white:hover,input.button.white:hover{background-color:rgba(255,255,255,0.9)} .button.grey,input.button.grey{background-color:rgba(170,178,188,1)} .button.grey:hover,input.button.grey:hover{background-color:rgba(170,178,188,0.9)} .button.dark-grey,input.button.dark-grey{background-color:rgba(84,87,102,1)} .button.dark-grey:hover,input.button.dark-grey:hover{background-color:rgba(84,87,102,0.9)} .button.transparent,input.button.transparent{border:2px solid rgba(84,87,102,1); background-color:transparent; color:rgba(84,87,102,1)!important} .button.transparent:hover,input.button.transparent:hover{border:2px solid rgba(84,87,102,1);background-color:rgba(84,87,102,1); color:#fff!important} .button.transparent.red,input.transparent.button.red{border:2px solid rgba(253,104,91,1);color:rgba(253,104,91,1)!important} .button.transparent.red:hover,input.button.transparent.red:hover{border:2px solid rgba(253,104,91,1); background-color:rgba(253,104,91,1);color:#fff!important} .button.transparent.orange,input.transparent.button.orange{border:2px solid rgba(250,111,87,1);color:rgba(250,111,87,1)!important} .button.transparent.orange:hover,input.button.transparent.orange:hover{border:2px solid rgba(250,111,87,1);background-color:rgba(250,111,87,1);color:#fff!important} .button.transparent.yellow,input.transparent.button.yellow{border:2px solid rgba(254,205,94,1); color:rgba(254,205,94,1)!important} .button.transparent.yellow:hover,input.button.transparent.yellow:hover{border:2px solid rgba(254,205,94,1);background-color:rgba(254,205,94,1); color:#fff!important} .button.transparent.green,input.transparent.button.green{border:2px solid rgba(161,210,110,1);color:rgba(161,210,110,1)!important} .button.transparent.green:hover,input.button.transparent.green:hover{border:2px solid rgba(161,210,110,1); background-color:rgba(161,210,110,1);color:#fff!important} .button.transparent.mint,input.transparent.button.mint{border:2px solid rgba(79,206,173,1);color:rgba(79,206,173,1)!important} .button.transparent.mint:hover,input.button.transparent.mint:hover{border:2px solid rgba(79,206,173,1); background-color:rgba(79,206,173,1);color:#fff!important} .button.transparent.aqua,input.transparent.button.aqua{border:2px solid rgba(85,193,231,1);color:rgba(85,193,231,1)!important} .button.transparent.aqua:hover,input.button.transparent.aqua:hover {border:2px solid rgba(85,193,231,1); background-color:rgba(85,193,231,1);color:#fff!important} .button.transparent.blue,input.transparent.button.blue{border:2px solid rgba(96,158,234,1);color:rgba(96,158,234,1)!important} .button.transparent.blue:hover,input.button.transparent.blue: hover{border:2px solid rgba(96,158,234,1); background-color:rgba(96,158,234,1);color:#fff!important} .button.transparent.purple,input.transparent.button.purple{border:2px solid rgba(171,148,233,1);color:rgba(171,148,233,1)!important} .button.transparent.purple:hover,input.button.transparent.purple:hover {border:2px solid rgba(171,148,233,1); background-color:rgba(171,148,233,1); color:#fff!important} .button.transparent.pink,input.transparent.button.pink{border:2px solid rgba(234,137,191,1); color:rgba(234,137,191,1)!important} .button.transparent.pink:hover,input.button.transparent.pink:hover{border:2px solid rgba(234,137,191,1); background-color:rgba(234,137,191,1); color:#fff!important} .button.transparent.white,input.transparent.button.white{border:2px solid rgba(255,255,255,1);color:rgba(255,255,255,1)!important} .button.transparent.white:hover,input.button.transparent.white:hover{border:2px solid rgba(255,255,255,1); background-color:rgba(255,255,255,1);color:#545766!important} .button.transparent.grey,input.transparent.button.grey {border:2px solid rgba(170,178,188,1); color:rgba(170,178,188,1)!important} .button.transparent.grey:hover,input.button.transparent.grey:hover{border:2px solid rgba(170,178,188,1); background-color:rgba(170,178,188,1);color:#fff!important} .button.transparent.dark-grey,input.transparent.button.dark-grey{border:2px solid rgba(84,87,102,1);color:rgba(84,87,102,1)!important} .button.transparent.dark-grey:hover,input.button.transparent.dark-grey:hover {border:2px solid rgba(84,87,102,1); background-color:rgba(84,87,102,1); color:#fff!important} .alert-del-btn{position:absolute;top:12px;right:15px;font-size:19px;font-weight:700;font-family:initial;cursor:pointer} .alert-del-btn:before{content:"\f00d";font-family:FontAwesome;font-weight:400;font-size:15px;color:rgba(0,0,0,0.3)} .alert-del-btn:hover:before{color:rgba(0,0,0,0.4)} .alert-content{margin-left:95px} .alert-message{position:relative;display:block; background-color:#FAFAFA; padding:12px 20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px; border-radius:2px;color:#2f3239;border:1px solid} .alert-message p{margin:0!important; padding:0;line-height:22px;font-size:13px;color:#2f3239} .alert-message span{font-size:14px!important} .alert-message i{font-size:18px;line-height:20px;margin-right:5px} .alert-message.success{background-color:#c1faa8; border-color:#9cff70;color:#6db74c} .alert-message.success a,.alert-message.success span{color:#1d9d74} .alert-message.error{background-color:#ffcdc7; border-color:#fdb1a8;color:#ff391f} .alert-message.error a,.alert-message.error span{color:#378FFF} .alert-message.warning{background-color:#fff4bb; border-color:#fc6;color:#e99b00} .alert-message.warning a,.alert-message.warning span{color:#8a6d3b} .alert-message.alert{background-color:#bceeff; border-color:#8ae1ff;color:#21c2f8} .alert-message.alert a,.alert-message.alert span{color:#F55D5D} .tl-accordion{margin:10px 0} .tl-accordion>span{display:block;padding:7px 15px; background:#464646;color:#fff;font-weight:600;border-bottom:1px solid #eeeeee;cursor:pointer;transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out} .tl-accordion>span.active,.tl-accordion>span:hover{color:#e5192c} .tl-accordion>div{background:#F5F5F5; padding:20px} .tl-tabs{margin:10px} .tl-tabbtn{overflow:auto} .tl-tabbtn span{padding:8px 25px; background:#464646;font-size:13px;display:block;font-weight:600;color:#fff;float:left;cursor:pointer;transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out} .tl-tabbtn span.active,.tl-tabbtn span:hover{background:#e5192c; color:#fff} .tl-tabcontent{margin:0 0 10px 0;padding:20px; background-color:#F5F5F5} .post-body blockquote{border-left:3px solid #e5192c;margin:15px; padding:10px 20px;line-height:26px;} .widget .post-body ul{margin:15px 0;} .widget .post-body li{line-height:26px} ul.tl-custom-li{list-style:none;list-style-type:none} ul.tl-custom-li li:before{font-family:FontAwesome;content:'\f105'; padding-right:10px;margin-left:-16px;line-height:26px;font-size:14px} ul.tl-custom-li.tl-arrow-li li:before{content:'\f105'} ul.tl-custom-li.tl-check-li li:before{content:'\f00c'} ul.tl-custom-li.tl-cross-li li:before{content:'\f00d'} ul.tl-custom-li.tl-multi-li li:before{display:none;} ul.tl-custom-li.tl-multi-li li .fa{padding-right:10px; margin-left:-16px;line-height:26px;font-size:14px} .tl-cols{position:relative;overflow:hidden} .tl-second-col{padding-left:25px} .tl-first-col{padding-right:25px} .tl-col3-1{padding-right:25px}.tl-col3-2{padding:0 25px}.tl-col3-3{padding-left:25px} .tl-col4-1{padding-right:12.5px}.tl-col4-2,.tl-col4-3{padding:0 12.5px}.tl-col4-4{padding-left:12.5px} abbr[title]{border-bottom:1px dotted} big{text-transform:uppercase;font-weight:600} code{position:relative;top:-1px;border:none; background-color:#F1F1F1;padding:2px 6px} .tl-sitemap {text-align: left;} thead{background:#e5192c;color:#fff} table{width:100%} thead td{padding:10px;border:none;margin:0} tbody td{padding:7px;background:#F5F5F5} .tl-sitemap a{color:#222222} .tl-sitemap a:hover{color:#e5192c}

And, click Save template

Now, whenever you create a new post, add the follow HTML caller codes.

<pre data-codetype="HTML">HTML-code-goes-here</pre>
<pre data-codetype="CSS">CSS-code-goes-here</pre>
<pre data-codetype="JavaScript">JavaScript-code-goes-here</pre>
<pre data-codetype="JQuery">JQuery-code-goes-here</pre>

How to Use Code Highlighter in Blogger Posts?

Whenever, you publish the codes in your blog posts, convert the codes that you wish to publish from HTML into XML format. In case, if you don't know how to convert HTML into XML go to Online HTML to XML Converter and convert them online with a single click.

Go to your blogger post editor and switch to HTML.

I assume, you want to highlight the following JavaScript codes:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sample Page</title> </head> <body> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>

It should be added as shown below:

<pre data-codetype="HTML"><!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Sample Page</title> </head> <body> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet.</p> </body></html></pre>

When you finish you blogger post, click Compose and next click Publish as usual.

If you need further help, feel free to contact me via comments. I am 24/7/364 online.