search here and find more articles

Welcome To Infokita.Website


Tutorial Mudah Memasang Prism Syntax Highlighter di Blogger

Infokita - Kalian pasti tiaka asing lagi tentang Syntax Highlighter, tentunya digunakan untuk web ataupun blog tutorial.
Syntax Highlighter dulu saya tau ini dari website arlina , siapa yang tidak tau website tersebut yang menyediakan tutorial, tips, trik tentant blogger. Kemudian saya memakai Syntax Highlighter untuk website atau blog saya FeryZeZe.Net. 

Tutorial Mudah Memasang Prism Syntax Highlighter di Blogger
Source Image : Microsoft.com

Pertama kali silahkan buka Blogger.com > Template > Edit HTML > Kemudian terapkan kode dibawah ini sebelum kode </style>

/* 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;
}

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;
}
Setelah itu simpan 3 kode dibawah ini tepat sebelum kode </head> atau </body>

<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>


<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>


<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>
Setelah itu simpan Template tersebut.

Selanjutnya sebelum membuat postingan, kalian tambahkan atau terapkan kode berikut untuk memanggil kode di atas pada postingan Tab HTML.



<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>




0 komentar

click to leave a comment!

 

Formulir Kontak

Nama

Email *

Pesan *