Cara Membuat Prims Syntax Highlighter Berwarna Terbaru di Blog

Cara Membuat Prims Syntax Highlighter Berwarna Terbaru di Blog


Cara Membuat Prims Syntax Highlighter Berwarna Terbaru di Blog
Cara Membuat Prims Syntax Highlighter Berwarna Terbaru di Blog
Hai Abang ganteng kali ini kita akan membahas Cara Membuat Prims Syntax Highlighter Berwarna Terbaru di Blog .Tutorial seperti ini memang sudah banyak aliaas berjibun di google namun tujuan Bangnof menulis ini agar mempermudah jika Bangnof sendiri lagi membutuhkan tutorial ini sekaligus bisa berbagi dengan Abang Abang ganteng sekalian. Jika Abang seorang bloger yang biasa menulis tutorial terutama tentang blog itu sendiri maka Syntax Highlighter atau kotak script ini sangat lah di butuhkan.

Sebenar nya blogger sudah menyediakan pre code namun dengan tampilan sangan sederhana nah agar mempercantik tampilan maka di ciptakan lah Syntax Highlighter  seperti gambar di atas. Kotak script ini di temukan di blog Arlina Design . yang merupakan hasil kombinasi dari Syntax Highlighter Kang ismed dan Penomoran yang di buat oleh kompi ajaib.

Selain mempercantik barisan kode . script Syntax Highlighter yang di share di sini adalah agar para pembaca lebih mudah dalam mengenal jenis kode yang di berikan oleh penulis. dan pngunjung akan merasa nyama membaca konten yang kia berikan.



PENGERTIAN SYNTAX HIGHLIGHTER

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS,Php serta bahasa program lain nya.
Membahas mengenai keunggulan Syntax Highlighter atau kotak script ini, tentu akan berkontribusi penuh pada tampilan blog atau website sobat, sobat bisa buktikan sendiri dengan mencobanya. Dari segi design, kotak script ini sangat simpel dan tentunya mengutamakan design kerapian, dan dipadukan dengan warna-warna yang beragam menambah kesan indah pada tampilannya. Dengan kekontrasan warna pada setiap jenis kata dari text secript yang ditampilkan, akan membuat pengunjung blog sobat menjadi semakin betah dan menyukai blog sobat.

Bagaimana Bang? berminat dan tertarik memasang Syntax Highlighter atau kotak script ini pada blog sobat? Ayo langsung saja kita praktekan Cara Membuat Prims Syntax Highlighter Berwarna Terbaru di Blog

TUTORIAL MEMASANG SYNTAX HIGHLITER

 Cara Membuat Prims Syntax Highlighter Berwarna Terbaru di Blog
  • Langkah pertama buka akun BLOGGER kalian.
  • Pilih  Tema  lalu pilih Edit Html dan masukan code di bawah ini tepat di </style> atau ]]></b:skin>

  • Buka Blogger > Template > Edit HTML
   Lalu paste tepat diatas code ini ]]></b:skin>
 /* 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;
}
  •  Selanjutnya sobat Salin Kode dibawah ini dan terapkan tepat diatas 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>
  • Lalu simpan themplate abang

Cara memasang Prims Syntax Highlighter pada artikel

  • langkah petama abang masuk ke blog abang .buka artikel baru atau edit.
  • kemudian masuk e tab html
  • masuka code pembungkus ini.
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... masukan kode HTML yang sudah di parse di sini ... </code></pre>

<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... masukan kode CSS di sini ... </code></pre>

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... masukan kode JavaScript yang sudah di parse di sini ... </code></pre>

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... masukan kode jQuery yang sudah di parse di sini ... </code></pre>
  • masukan script yang sudah di parse di dalam kodde tersebut. tapi sebelum nya abang bisa memparse scipt di sini
okterima kasih sudah berkunjung di sni semoga artikel ini bisa beguna bagi abang abang semua.

tag

  • Cara Membuat Prims Syntax Highlighter Berwarna Terbaru di Blog .
  • Cara Membuat  Syntax Highlighter Berwarna keren banget.
  • Cara Membuat Prims Syntax Highlighter Berwarna Terbaru di Blog   sesuai script.
Baca Juga
SHARE
BangNof.com
Hai. saya Bangnof seorang yang baru belajar ngeBlog

Related Posts

Subscribe to get free updates

Posting Komentar

in artikel ni