√ Menciptakan Kotak Script Prism Syntax Highlighter Di Blog

Mungkin bagi kau yang menciptakan blog mengenai tutorial yang membutuhkan coding, tentu kenal dengan Script Prism Syntax Highlighter.

Kemarin, newbie ibarat aku belum kenal nama-nama ibarat itu, sehingga aku search di google dengan keyword Kotak Script dan ternyata yang keluar dari hasil pencarian bukanlah yang aku harapkan :D 

Oke mungkin kau ingin memakai apa yang aku maksud, jadi eksklusif saja

• Masuk ke BLOGGER > Edit HTML > Masukkan isyarat dibawah ini sebelum </style>

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

• Copy isyarat dibawah ini dan Paste kan sebelum </body>

  <script src='https://uminabdilah.googlecode.com/svn/prism.js' type='text/j4vascript'/>   <script> $(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;); Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)}) </script>  <script type='text/j4vascript'> 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> 

• Simpan Template
• Ketika menciptakan post, letakkan isyarat pemanggil nya di Tab HTML, bukan COMPOSE

 <pre title="√ Membuat Kotak Script Prism Syntax Highlighter di Blog" data-codetype ="HTMLku"><code class="language-markup"> ... isyarat HTML di sini ... </code></pre> <pre title="√ Membuat Kotak Script Prism Syntax Highlighter di Blog" data-codetype ="CSSku"><code class="language-css"> ... isyarat CSS di sini ... </code></pre> <pre title="√ Membuat Kotak Script Prism Syntax Highlighter di Blog" data-codetype ="JavaScriptku"><code class="language-j4vascript"> ... isyarat JavaScript di sini ... </code></pre> <pre title="√ Membuat Kotak Script Prism Syntax Highlighter di Blog" data-codetype ="JQueryku"><code class="language-j4vascript"> ... isyarat jQuery di sini ... </code></pre>   

Sumber http://umin-abdilah.blogspot.com