This time I will share the
article " How to Install Prism
Syntax Highlighter in Blogger " This method is commonly used by every
blogger when it wants to distribute java script code, CSS, jQuery in every post
when we needed a box to store the code to make it look neat and exciting..and
now I have implemented the code as a supporting feature of this blog. Then I
mix with numbering feature
How to Install Prism Syntax Highlighter in Blogger
1. Ok
just, please go to Blogger Templates
>> Edit HTML >> Then
copy and apply the code below before the </ style>
CSS - Go Widget
/* CSS Syntax Highlighter with numbering feature */
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;
}
code .token.punctuation {
color: #ccc;
}
pre code .token.punctuation {
color: #fafafa;
}
code .token.comment,code .token.prolog,code
.token.doctype,code .token.cdata {
color: #777;
}
code .namespace {
opacity: .8;
}
code .token.property,code .token.tag,code
.token.boolean,code .token.number {
color: #e5dc56;
}
code .token.selector,code .token.attr-name,code .token.string
{
color: #88a9ad;
}
pre code .token.selector,pre code .token.attr-name {
color: #fafafa;
}
pre code .token.string {
color: #40ee46;
}
code .token.entity,code .token.url,pre .language-css
.token.string,pre .style .token.string {
color: #ccc;
}
code .token.operator {
color: #1887dd;
}
code .token.atrule,code .token.attr-value {
color: #009999;
}
pre code .token.atrule,pre code .token.attr-value {
color: #1baeb0;
}
code .token.keyword {
color: #e13200;
font-style:
italic;
}
code .token.comment {
font-style:
italic;
}
code .token.regex {
color: #ccc;
}
code .token.important {
font-weight:
bold;
}
code .token.entity {
cursor: help;
}
pre mark {
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 .line-numbers-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;
}
2. After that save 3 code below right before the </ body> or </ head>
Javascript
<script src=' http://www.geocities.ws/usmankurniawan/Go-widget-Syntax-Highlighter.js
' type='text/javascript'/>
Javascript - Go Widget
jQuery
jQuery - Go Widget
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var
t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var
n=1+e.code.split("\n").length;var
r;lines=new
Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber
"+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
jQuery
jQuery - Go Widget
<script type='text/javascript'>
var pres =
document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection =
getSelection();
var range =
document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>
3.
Save the template.
4.
And
then when you create a new post, apply the calling code below to post HTML Tab
HTML - Go Widget
<pre title="HTML" data-codetype
="HTMLku"><code class="language-markup"> ... HTML (already
in `escape`) here ...
</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">
... JavaScript code
here ... </code></pre>
<pre title="jQuery" data-codetype
="JQueryku"><code class="language-javascript"> ...
jQuery code here...
</code></pre>
May be useful...