Mempercantik tampilan tag code dengan  Prism.js

Mempercantik tampilan tag code dengan Prism.js

Kali ini penulis akan membahas tentang bagaimana mempercantik tampilan code dengan menggunakan prism.js. Sebelum memulai dangan bagaimana cara penggunaan nya ada baik nya kita mengatahui terlebih dahulu apa itu prism. Menurut developer nya prism adalah "Prism adalah stabilo sintaksis yang ringan dan dapat diperluas, dibangun dengan standar web modern. Ini digunakan di ribuan situs web, termasuk beberapa yang Anda kunjungi setiap hari". Beginilah cara kita menggunakan prism pada website kita : 

  1. Download terlebih dahulu prism di website nya.
  2. Kemudian masukan baris perintah berikut untuk memanggil prims.js
    <link rel="stylesheet" href="prism/prism.css">  
    <script src="prism/prism.js"></script>
  3. Pastikan lokasi prism.js.dan prism.css telah sesuai lokasi nya
  4. Setelah itu gunakan tag pre dan tag code untuk menampilkan kode yang akan di tampilkan di website
    <pre class=" language-php"><code>  
    </code></pre>​
  5. Berikut adalah contoh penggunaan prism
    <pre class=" language-php"><code class=" language-php">
    $builder = $db->table('biodata');
    $builder->select('nama, alamat');
    $query = $builder->get();
    </code></pre>
    
  6. Contoh di akan tampil seperti ini
    $builder = $db->table('biodata');
    $builder->select('nama, alamat');
    $query = $builder->get();​
  7. atau akan terlihat seperti ini Contoh Prism.js

Nah itu lah contoh bagaimana cara penggunaan prism.js untuk mempercantik tampilan website anda

Artikel Menarik Lainnya
Java Script, CSS

loading...