Add New Syntax Highlighter for Blogger - What is that syntax Highlighter ? bloggers often share a script or piece of code to the reader or anyone who needs it for development and display web or blog. Most use blockquote as "field wrapper" of a script or piece of code and mark with some special color as an indicator or instructions. this is not syntax highlighter for blogger by google. this tutorial Share how to use syntax highlighter blogger. there are 5 syntax highlighter for blogger. how to Add code syntax highlighter in blogger. this is a best syntax highlighter for blogger.
code , for example Javascript , CSS , HTML , phyton , PHP And many more which have been classified and marked with different colors according to the type. This time, I will share an easy way to install the Syntax Highlighter is fairly easy to light and good. to follow the installation on your blog please refer to below steps:
2. Select the template and Edit
3. Enter the CSS code below the above code </ style>
Install New Syntax Highlighter for Blogger
The Syntax Highlighter is an attempt to present a script or code in a way and a better view by typeSyntax Highlighter Shortcode For Blogger
1. Sign in to Blogger2. Select the template and Edit
3. Enter the CSS code below the above code </ style>
body {
background-color:#E7E5DC;
padding:50px;
}
pre {
background-color:#eee;
color:#069;
padding:0.5em 1em;
overflow:auto;
white-space:pre;
word-wrap:normal;
font:bold 12px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
position:relative;
margin:0 0 1em;
}
pre .the-num {
position:absolute;
top:0;
bottom:0;
left:0;
padding:0.5em 0.5em 0.5em 1em;
color:#555;
background-color:#ccc;
border-right:2px solid #444;
}
pre .bracket {color:darkblue;}
pre .tag,
pre .tag .keyword,
pre .tag .attribute {color:blue;}
pre .selector {color:blue;}
pre .attribute,
pre .regexp {color:darkorange;}
pre .str {color:green;}
pre .tag .str {color:brown;}
pre .keyword {color:darkred;}
pre .comment {font-style:italic;color:#999;}
pre .num,
pre .hex {color:darkviolet;}
pre .name,
pre .important,
pre .array {color:red;}
pre .important {background-color:yellow;}
pre .doctype {color:magenta;}4. Place the following code in the above code </ Body>
<script type='text/javascript'>
// JQuery Syntax Highlighter
$undefinedwindow).loadundefinedfunctionundefined) {
$undefined'pre').eachundefinedfunctionundefined) {
var list = "undefinedtrue|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete)",
repli1 = new RegExpundefinedlist + " ", "ig"),
repli2 = new RegExpundefinedlist + "undefined ?)<span", "ig"),
$this = $undefinedthis);
$this.htmlundefined$this.htmlundefined)
.replaceundefined/undefined<br>|\n)$/ig, "")
.replaceundefined/undefined\t)/ig, " ")
.replaceundefined/"/ig, "\"")
.replaceundefined/'|'/ig, "\'")
.replaceundefined/undefined.?)'undefined.*?)'/g, "$1<span class='str'>\'$2\'</span>")
.replaceundefined/undefined.?)"undefined.*?)"/g, "$1<span class='str'>\"$2\"</span>")
.replaceundefined/undefined.?)undefined""|'')/g, "$1<span class='value'>$2</span>")
.replaceundefined/undefined#[A-F0-9]{3,6})/ig, "<span class='hex'>$1</span>")
.replaceundefined/undefined\d+undefined?!undefined.*<)))/g, "<span class='num'>$1</span>")
.replaceundefined/undefinedundefined#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>")
.replaceundefined/undefined\{|\}|\undefined|\)|\[|\])/g, "<span class='bracket'>$1</span>")
.replaceundefined/<undefined.*?)>/g, "<span class='tag'><$1></span>")
.replaceundefined/<!--undefined[\s\S]*?)-->/gm, "<span class='comment'><!--$1--></span>")
.replaceundefined/\/\*undefined[\s\S]*?)\*\//gm, "<span class='comment'>/*$1*/</span>")
.replaceundefined/[^\:]\/\/undefined.*)/g, "<span class='comment'>//$1</span>")
.replaceundefined/<\/span>\/undefined.*)\/undefined[gim]+),undefined ?)<span class='str'>/g, "</span><span class='regexp'>/$1/$2</span>, <span class='str'>")
.replaceundefinedrepli1, "<span class='keyword'>$1</span> ")
.replaceundefinedrepli2, "<span class='keyword'>$1</span>$2<span")
.replaceundefined/function<\/span> undefined.[^<]*)<span/g, "function</span> <span class='name'>$1</span><span")
.replaceundefined/undefined[\-_A-Z]+)undefined?=undefined\s+|)):undefined.undefined?!\{)*)/ig, "<span class='attribute'>$1</span>:$2$3")
.replaceundefined/h<span class='num'>undefined[1-6])<\/span>/ig, "h$1")
.replaceundefined/!important/ig, "<mark class='important'>!important</mark>")
.replaceundefined/<!undefineddoctype)undefined.*)>/ig, "<span class='doctype'><!$1$2></span>")
.replaceundefined/@<span class='attribute'>undefinedimport|page|media|charset|keyframes|font-face)<\/span>/ig, "@$1")
.replaceundefined/undefined@undefinedimport|page|media|charset|keyframes|font-face))/ig, "<span class='keyword'>$1</span>")
.replaceundefined/<span class='bracket'>\[<\/span>undefined.*)<span class='bracket'>\]<\/span>/ig, "<span class='array'>[$1]</span>")
).findundefined'.str span, .regexp span, .comment span, .doctype span, .hex span, .array span, .url span').contentsundefined).unwrapundefined);
$this.appendundefined'<div class="the-num"></div>');
// Insert the line number
var num = $this.htmlundefined).splitundefined/\n|<br>/).length,
count = 0;
for undefinedvar i = 0; i < num; i++) {
count = count + 1;
$this.findundefined'.the-num').appendundefinedcount + '.<br/>');
}
$this.cssundefined'padding-left', $this.findundefined'.the-num').outerWidthundefined)+14);
});
});
</script>5. Save changes
6. To call in the post, use the following ways of writing are like this:
<pre> ...Add Your Code Here... </pre>Good luck and helpful ...