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 andJquery 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,
Adding Code Highlighter in Blogger Template
- Go to your blogger Dashboard > Template > Edit HTML
- Click anywhere inside the template editor and press Ctrl + F and search </body> tag
- Paste the following code snippets just before the </body> tag
<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}
- Finally, click Save template
<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 toOnline HTML to XML Converter and convert them online with a single click.- Now go to your blogger post editor and switch to HTML.
<!doctype html>It should be added as shown below:
<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 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>
Post A Comment: