Cara Membuat Prism Highlighter Pada Blogger

Cara Membuat Prism Highlighter Pada Blogger

Prism Highlight - Merupakan cara yang dapat anda lakukan bagi anda yang memiliki website atau blog tentang tutorial yang memakai sebuah Syntax (Baris kode) yang mengharuskan anda mencantumkan kode beserta caranya didalam blogger anda. Sedangkan kata Highlight sendiri adalah arti untuk sebuah kode yang dapat berwarna apabila memiliki arti yang penting, biasanya setiap warna berbeda maka berbeda pula fungsi yang di gunakan, contoh keluaran akan berwarna hijau, dan komentar akan berwarna abu-abu dan lain sebagainya.
Hal demikian akan menjadi hal yang menarik tentunya untuk pengunjung dari website anda karena melihat warna-warna yang berbeda sehingga mereka bisa membedakan setiap berbagai fungsi, atau bisa dikatakan tidak monoton. kode yang support untuk pewarnaan adalah kode sebagai berikut ini :

• HTML (xml,PHP,HTML,xHTML)
• CSS
• JavaScript (Java,JavaScript)
• jQuery

Diatas merupakan kode dasar yang biasa semua programmer website pakai, untuk pengkodean aplikasi seperti C, C++, Python, Pascal, VB dan masih banyak yang lainnya dan masih dalam proses pengembangan oleh pengembang.
Berikut ini merupakan langkah yang dapat anda lakukan untuk membuat Prism Highlighter pada Website dan Blog kita :

• Pertama, Anda harus masuk kedalam blogger atau website.
• Kedua, Masuk ke template > kemudian pilih mode "HTML"

Kemudian cari kode " </style> " kemudian pasang kode tepat diatasnya.
Seperti berikut ini :

---- KODE ----
</style>

Dibawah ini adalah kodenya, "Ketuk dua kali untuk sellect semua code".

/* 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[type='CSS']:before {
    background-color: #00a1d6;
}

pre[type='HTML']:before {
    background-color: #3cc888;
}

pre[type='Javascript']:before {
    background-color: #75d6d0;
}

pre[type='Jquery']:before {
    background-color: #e5b460;
}

NB: "Mungkin didalam template website/blogger anda akan mempunyai banyak "</style>", anda dapat mencoba satu-persatu sampai benar-benar ngefek kedalam website/blog anda. adapun anjuran saya biasanya </style> untuk artikel terdapat ditengah antara para </style>. apabila kondisi yang anda hadapi mempunyai satu style maka anda tidak mengalami kendala."

• Kemudian, Langkah berikutnya adalah dengan memasang kode tepat di atas kode "</head>", maka akan jadi seperti dibawah ini :

--- KODE ---
</head>

Dibawah ini adalah kodenya, "Ketuk dua kali untuk menyeleksi semua kode".

<script rel='nofollow' src='https://cdn.rawgit.com/Arlina-Design/redvision/cab7a72d/prisma.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>

• Kemudian Save settingan yang sudah anda lakukan dengan menekan tombol save pada HTML.

Semua cara diatas sudah anda lakukan dengan baik, maka pemasangan Syntax Highlighter sudah sukses terinstall dengan baik pada website atau blog anda.

Langkah terakhir adalah dengan memanggi settingan yang sudah anda lakukan dengan beberapa fungsi panggilan berikut ini :

Apabila anda memakai kode berbasis (xml,PHP,HTML,xHTML)
Gunakan kode berikut ini :

<pre title="Bebas Sesuai Keinginan Anda" type="HTML"><code class="language-markup">

--- KODE SCRIPT (xml,PHP,HTML,xHTML) ANDA ---

</code></pre>

Apabila anda memakai kode berbasis CSS
Gunakan kode berikut ini :

<pre title="Bebas Sesuai Keinginan Anda" type="CSS"><code class="language-css">

--- KODE SCRIPT CSS ANDA ---

</code></pre>

Apabila anda memakai kode berbasis (Java,JavaScript)
Gunakan kode berikut ini :

<pre title="Bebas Sesuai Keinginan Anda" type="Javascript"><code class="language-javascript">

--- KODE SCRIPT (Java,JavaScript) ANDA ---

</code></pre>

Apabila anda memakai kode berbasis jQuery
Gunakan kode berikut ini :

<pre title="Bebas Sesuai Keinginan Anda" type="Jquery"><code class="language-javascript">

--- KODE SCRIPT JQuery ANDA ---

</code></pre>

NB: "4 Kode Pemanggil diatas ini anda dapat Anda terapkan pada saat anda menulis artikel, anda dapat memasukannya pada tab "HTML" dan bukan pada tab "Compose" pada saat menulis. Untuk kode anda harus terlebih dahulu di Parse terlebih dahulu agar dapat dibaca pada postingan anda supaya tidak menyebabkan error, PARSE KODE DISINI dan setelah anda memarse kode maka anda dapat meletakan diatara fungsi pemanggil kode diatas".

Berikut ini adalah contohnya :

<pre title="BEBAS" type="Jenis kode"><code class="language-jenis kode">
--- KODE YANG SUDAH DI PARSE ---
</code></pre>

Bagaimana?
Keren bukan?


Itulah cara untuk membuat Prism Syntax Kode Script Highlighter Dan Bercahaya Warna-Warni.
Apabila anda mengalami masalah atau kendala maka anda dapat bertanya di kolom komentar dibawah artikel yang sudah disediakan dengan sopan dan baik.
Semoga dapat membantu dan dan memecahkan masalah yang anda hadapi didalam Cara Memberi Warna Pada Kode Syntax Script Di Blogger Atau Website.
Sekian dan Terimakasih.