Cara Memasang Syntax Highlighting ala Akmalfiles.top

By -
Cara Memasang Syntax Highlighting
Highlight.js adalah salah satu syntax highlighting yang cukup ringan serta dapat membaca otomatis bahasa kodenya sehingga kita tidak perlu repot menambahkan class pada tag kodenya, cukup dengan menulis <pre><code>.........</code></pre>. Highlight.js kini mendukung 152 bahasa pemograman dengan 72 style yang bisa kita pilih sesuai selera.
Untuk mulai memasang Highlight.js, silahkan ikuti langkah-langkahnya di bawah ini.
1. Langkah Pertama
Salin Css Dibawah Ini
/*Railscasts-like style (c) Visoft, Inc. (Damien White)*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #232323;
  color: #e6e1dc;
}

.hljs-comment,
.hljs-quote {
  color: #bc9458;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag {
  color: #c26230;
}

.hljs-string,
.hljs-number,
.hljs-regexp,
.hljs-variable,
.hljs-template-variable {
  color: #a5c261;
}

.hljs-subst {
  color: #519f50;
}

.hljs-tag,
.hljs-name {
  color: #e8bf6a;
}

.hljs-type {
  color: #da4939;
}


.hljs-symbol,
.hljs-bullet,
.hljs-built_in,
.hljs-builtin-name,
.hljs-attr,
.hljs-link {
  color: #6d9cbe;
}

.hljs-params {
  color: #d0d0ff;
}

.hljs-attribute {
  color: #cda869;
}

.hljs-meta {
  color: #9b859d;
}

.hljs-title,
.hljs-section {
  color: #ffc66d;
}

.hljs-addition {
  background-color: #144212;
  color: #e6e1dc;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: #600;
  color: #e6e1dc;
  display: inline-block;
  width: 100%;
}

.hljs-selector-class {
  color: #9b703f;
}

.hljs-selector-id {
  color: #8b98ab;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-link {
  text-decoration: underline;
}







2. Langkah Kedua

Silahkan copy kode javascript di bawah ini di atas kode </body>




<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script>

//<![CDATA[

function downloadJSAtOnload(){var e=document.createElement("script");e.src="http://go.akmaldz.tk/highlight.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

</b:if>


Ini juga akan otomatis membaca tag <i rel="pre"> pada komentar blogger dan menampilkannya dengan tampilan Highlight.js seperti pada postingan.







Comments

Post a Comment

Popular posts from this blog

Tutorial Flashing/Instal Ulang Asus Zenfone C

By -
Image
Tutorial Flashing Hp Asus Zenfone C  - Jika kemarin saya sudah sempatkan posting mengenai cara Rooting Hp Asus Zenfone C ini yang mungkin dicari dan banyak di butuhkan oleh pengguna/user zenfone c tersebut, Nah setelah selesai cara rooting tersebut adakalanya saya pun melengkapi mengenai Cara Flashing/Install Ulang Hp Asus Zenfone C menggunakan PC pada artikel yang saya share ini. Sebelumnya anda sudah tahu kan mengenai proses Flashing pada Smartphone Android ini, jika belum tahu proses Flashing itu merupakan proses dimana mengembalikan keadaan ponsel dalam keadaan baru seperti asal pabrikannya yang rusak/error karena adanya kerusakan Software bukan hardware, dibantu dengan adanya file Firmware (software full) khusus perangkat tersebut yang memang sudah di siapkan pada pihak tertentu untuk memperbaiki/Fix produknya. Salah satu contoh seperti halnya anda melakukan Install Ulang pada perangkat komputer/PC anda yang bersistem Operasi windows, nah dari situ kurang lebih proses F...
Read more

Alat Input, Output, dan Proses Komputer

By -
Image
Alat Input, Output, dan Proses Komputer Alat Input             Alat input adalah alat-alat yang berfungsi untuk memasukan data atau perintah dari luar sistem ke dalam suatu memori dan prosesor untuk diolah guna menghasilkan informasi yang diperlukan. Macam-Macam Alat Input Komputer No Gambar Alat Nama Alat Fungsi 1. Keyboard Berfungsi memasukkan huruf, angka, karakter khusus serta sebagai media bagi user (pengguna) untuk melakukan perintah-perintah lainnya yang diperlukan. 2. Mouse Berfungsi untuk memindahkan pointer atau kursosr secara cepat serta mengatur posisi kursor di layar 3. Scanner Berfungsi untuk mengopi atau menyalin gambar atau teks yang kemdian disimpan dalam memori komputer. Scanner sebenarnya terbagi atas beberapa jenis menurut fungsinya. ada yang berfungsi memindai tulisan dan men...
Read more

The Good Dinosaur (2015)

By -
Image
Dalam dunia di mana dinosaurus dan manusia hidup side-by -side , sebuah Arlo Apatosaurus bernama membuat sahabat manusia tidak mungkin . Direktur : Peter Sohn Penulis : Bob Peterson ( konsep dan pengembangan asli) , Peter Sohn ( cerita ) | 5 kredit lebih lanjut » Bintang : Jeffrey Wright , Frances McDormand , Maleah Nipay - Padilla Subtitle Indo Klik disini Download Kilk Disini Sumber Nagreg Film  
Read more