Cara Mudah Pasang Kotak Script(Syntax Highlighter) Di Blog Terbaru

LIPUTANBERITA21.COM - Kotak Script atau dikenal dengan nama keren nya yaitu Syntax Highligther merupakan text editor yang bisa untuk membantu dalam membuat mark up kode pada program tujuan nya untuk membantu pembuat agar lebih mudah di dipahami.

Download

Text Editor yang sering digunakan untuk membuat program yaitu Visual Studio, Visual Code , Sublime dan Atom, 4 Text editor ini paling banyak digunakan dalam membuat program dikarenakan Text editor ini mudah digunakan dan dipahami oleh pembuat program tersebut.

Baca Juga : Cara Parse Kode HTML dan Javascript

Syntax Highligter ini bisa gunakan di website atau blog, biasa nya digunakan untuk tutorial dalam website tersebut, dengan adanya Syntax Highligter pengguna akan lebih mudah untuk memahani kode tersebut di karenakan Mark Up kode nya dibungkus dengan tulisan yang warna – warni sehingga menjadi mudah dan menarik.

Baca Juga : Cara Membuat Postingan Terkait di tengah artikel

Bagi kalian yang belum tahu cara memasang Syntax Highligter ini kalian bisa ikuti Tutorial di bawah ini :

Cara Pasang Syntax Highligter Di Website

Sebelum pasang kode ini sebaiknya kalian periksa dahulu di CSS jika kalian menemukan kode .post-body pre dan .post-body pre code maka kalian hapus terlebih dahulu agar tidak tabrakan CSS nya. Jika tidak ada kode nya kalia bisa menambahkan kode CSS di bawah ini tepat DI ATAS kode </style>

.post-body pre {
  background-color: #00FFFF; 
  border-left: 5px solid #A52A2A; 
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #FF0000;
  font-size: 12px; 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Jika sudah di pasang jangan lupa untuk save lalu lihat hasilnya.

Cara Menggunakan Syntax Highligter

Jika kalian sudah pasang kode di atas kalian tinggal gunakan di postingan artikel. Lebih jelasnya bisa lihat gambar di bawah ini :

<pre><code>
  <!-- Masukkan kode CSS, HTML atau Javascript disini tapi harus diparse dahulu -->
</pre></code>

Atau kalian juga bisa menggunakan kode di bawah ini, kode ini lebih mudah digunakan

<pre style="background: #000000; border-left: solid 5px #0288d1; height: auto; margin: 10px 0px; max-height: 130px; overflow: auto; padding: 12px; width: auto;"><span style="color: #f3f3f3;"> &lt;!--Masukan kode css, html, javascript di sini tapi jangan lupa untuk di parse terlebih dahulu-- &gt; </span></pre>

Demikianlah artikel tentang Cara Mudah Pasang Kotak Script(Syntax Highlighter) Di Blog Terbaru semoga bermanfaat untuk kalian, jangan lupa untuk berlangganan Gratis dengan Liputan berita 21 agar tidak ketinggalan informasi terbaru. Bagi belum mengerti dengan cara diatas bisa komentar di bawah