Memasang syntax highlighter di website

Syntax highlighter adalah sebuah tool yang digunakan untuk mempercantik tampilan kode yang ada di konten website. Tampilan yang cantik tersebut akan memudahkan pembaca website dalam memahami kode-kode yang ditampilkan. Di bawah ini akan disampaikan cara pemasangan syntax highlighter di website. Kode-kode syntax highlighter tersebut merupakan syntax highlighter dari Prism.js. Langkah pemasangannya adalah sebagai berikut.

  1. Pasang kode ini sebelum kode </head>.
    2. <link href="https://myCDN.com/prism@v1.x/themes/prism.css" rel="stylesheet" />

  2. Pasang kode di bawah ini sebelum kode </body>.
    3. <script src="https://myCDN.com/prism@v1.x/components/prism-core.min.js"></script>
<script src="https://myCDN.com/prism@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>

  3. Gunakan kode <pre><code class="language-xxxx">kode xxxx</code></pre> untuk pemasangan kode menggunakan syntax highlighter. Contoh:
    4. <pre><code class="language-css">
table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}
th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #0073aa;
  color: white;
}
</code></pre>
    Hasilnya adalah 
    table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}
th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #0073aa;
  color: white;
}

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara menghilangkan titik item daftar urutan HTML

Dalam penulisan daftar di html kita memerlukan kode ol atau ul dan li . Misalnya <ul> <li>Apel</li> <li>Belimbing</li> <li>Cempedak</li> <li>dan seterusnya</li> </ul> Hasilnya adalah sebagai berikut. Apel Belimbing Cempedak dan seterusnya Namun kadangkala tanda titik sebelum item daftar tidak kita perlukan dan ingin dihilangkan. Cara menghilangkannya adalah dengan menambahkan kode style="list-style: none;" . <ul style="list-style: none;"> <li>Apel</li> <li>Belimbing</li> <li>Cempedak</li> <li>dan seterusnya</li> </ul> Hasilnya adalah sebagai berikut. Apel Belimbing Cempedak dan seterusnya Selain cara tersebut, kita juga bisa menambahkan kode css. Kodenya adalah ul { list-style-type: none; } atau dengan menggunakan class .tanpatitik { list-style-type: none; }
Baca selengkapnya

Ganti kode footer Datenstrom Yellow

Secara default , Datenstrom Yellow ] tidak menampilkan footer pada halaman website. Oleh karena itu kode pada /system/layouts/footer.html saya ganti menjadi kode di bawah ini agar footernya bisa tampil. <div class="footer" role="contentinfo"> <div class="siteinfo"> &copy; <a href="<?php echo $this->yellow->page->getBase(true)."/" ?>"><?php echo $this->yellow->page->getHtml("sitename") ?></a> </div> </div> </div> <?php echo $this->yellow->page->getExtra("footer") ?> </body> </html>
Baca selengkapnya

Cara Mengimpor Koordinat Titik (Point) dari Microsoft Excel ke QGIS

Untuk mengimpor koordinat-koordinat titik ( points ) ke QGIS, kita membutuhkan nilai-nilai koordinat titik dalam format Microsoft Excel yang memiliki dua kolom koordinat utama yaitu kolom x dan kolom y. Kemudian ubah format penyimpanan data Microsoft Excel yang berekstensi Excel Workbook ( .xlsx ) atau Excel 98-2003 Workbook . ( .xls ) ke Comma Delimited ( .csv ). Caranya adalah sebagai berikut. Buka file data koordinat titik dengan program Microsoft Excel. Klik menu File > Save As . Jika ingin mengganti nama file , ubah nama file pada File name . Ubah bagian Save as type dari Excel Workbook atau Excel 98-2003 Workbook ke CSV (Comma delimited) . Klik Save . File yang terbentuk dari hasil penyimpanan tersebut adalah file yang berekstensi .csv . Selanjutnya impor data yang telah berformat Comma Delimited ( .csv ) ke QGIS. Caranya adalah sebagai berikut. Buka program QGIS. Program QGIS yang saya gunakan adalah QGIS versi 3.8.0-Zanzibar. Pilih menu Layer > Add L
Baca selengkapnya

Cara backup dan restore WordPress ke localhost

Ada empat langkah yang harus dilakukan dalam rangka mem- backup dan restore WordPress dari domain website ke localhost , yaitu: backup file dan folder, backup database , restore file /folder dan database ke localhost , hubungkan file /folder dengan database . Backup file dan folder Login ke CPanel . Pada bagian File , pilih httpdocs . Kompres ke jenis file .zip semua file yang ada di folder httpdocs , caranya pilih semua file dan folder yang ada dalam folder tersebut, kemudian klik Add to Archive . Beri nama file yang akan dikompres ke .zip tersebut, percobaan kali ini saya memberi nama file wordpress.zip . Setelah file .zip terbentuk di folder httpdocs , download file tersebut. Setelah selesai proses download , hapus file tersebut yang ada di web hosting agar tidak menambah beban web hosting . Backup database Pada CPanel pilih Database . Pilih phpMyAdmin . Selanjutnya akan terbuka halaman baru yaitu halaman database dan klik database W
Baca selengkapnya

Cara update QGIS tanpa uninstall versi sebelumnya

Jika gagal meng- update QGIS di dengan cara meng- install versi terbaru dari QGIS di Windows, maka lebih baik melakukan cara berikut tanpa melakukan uninstall QGIS versi sebelumnya. Buka website QGIS di browser . Klik Download . Pada bagian Download for Windows pilih OSGeo4W Network Installer sesuai sistem Windows yang digunakan (32-bit atau 64-bit). Selanjutnya akan ter- download file osgeo4w-setup-x86_64.exe . Klik dua kali file hasil download tersebut, selanjutnya akan muncul jendela OSGeo4W Setup dan pilih Advanced Install , kemudian klik Next . Berikutnya akan muncul jendela OSGeo4W Setup - Choose Install dan pilih Install from Internet . Berikutnya tinggal di- next kan saja hingga akhir. Update QGIS akan berjalan secara otomatis.
Baca selengkapnya