Tips Tutorial Cara Menciptakan Syntax Highlighter Dengan Prettyprint
Syntax Highlighter yaitu sebuah cara untuk menciptakan cuplikan instruksi html menjadi lebih bagus dengan mengelompokkan setiap jenis instru...
https://tutorialcarapintar.blogspot.com/2019/11/tips-tutorial-cara-menciptakan-syntax.html
Syntax Highlighter yaitu sebuah cara untuk menciptakan cuplikan instruksi html menjadi lebih bagus dengan mengelompokkan setiap jenis instruksi kedalam warna tertentu secara otomatis menggunakan css dan script pendukung / plugin. Pada tutorial ini, saya akan menggunakan
Penggunaan Syntax Highlighter umumnya diterapkan pada blog yang membahas perihal tutorial seputar instruksi HTML, Javascript, dan CSS atau sering disebut niche coding. Sementara untuk yang lainnya lebih baik untuk tidak menggunakannya, alasannya yaitu memang tidak diperlukan.
Contoh cuplikan instruksi tanpa Syntax Highlighter
Contoh cuplikan instruksi menggunakan Syntax Highlighter
Cara pemasangan
Untuk menjalankan jadwal Syntax Highlighter dengan Prettyprint di blog, hal pertama yang harus dilakukan yaitu memasang skrip
1. Masuk ke Blogger, pilih blog yang ingin Anda pasang prettyprint
2. Pilih sajian Tema, klik Edit HTML
3. Salin script prettify.js, letakkan di atas instruksi
4. Salin instruksi CSS di bawah ini, lalu letakkan di atas instruksi ]]></b:skin> atau </style>
Jika kesannya terdapat nilai atribut yang tidak berjalan dengan semestinya. Tambahkan keterangan
5. Simpan Tema, jikalau kesannya masih nihil, lakukan Format template / tema lalu simpan
Bagaimana cara menciptakan background Syntax Highlighter menjadi belang-belang?
Ganti instruksi warna pada CSS berikut
Bagaimana cara menciptakan cuplikan instruksi Syntax Highlighter semoga menjadi sebaris pada setiap nomor barisnya?
Hapus instruksi
Cara menggunakan prettyprint
Untuk menciptakan tampilan cuplikan instruksi menjadi berwarna sangat mudah, cukup bungkus instruksi dengan cara berikut ini.
Masuk mode HTML (sebelah Compose)
Contoh :
<pre class="prettyprint">
<pre class='syntax-highlighter'>
/*Ini yaitu pola cara menciptakan Syntax Highlighter*/
<title></title>
</pre>
Hasilnya :
Bagaimana cara menampilkan nomor baris pada cuplikan kode?
Untuk menampilkan nomor baris, gunakan cara berikut ini.
Contoh cuplikan instruksi dengan nomor baris
Bagaimana cara menciptakan Syntax Highlighter dengan nomor baris bukan dimulai dari angka 1, contohnya 7
Gunakan tanda (:) lalu diikuti dengan nomor baris yang ingin Anda jadikan sebagai nomor permulaan, lihat pola berikut ini.
Contoh cuilan instruksi yang dimulai dari angka 7
prettify.js sebagai pendukung untuk menjalankan jadwal syntax highlighter. Prettify atau prettyprint yaitu salah satu plugin terkenal yang cukup ringan sehingga banyak dipakai dalam pembuatan Syntax Highlighter untuk mengubah cuplikan kode-kode HTML / xml / CSS yang disajikan dalam artikel semoga menjadi lebih bagus dan berwarna, sehingga lebih gampang dipelajari dan tidak menciptakan pembaca cepat pusing.Penggunaan Syntax Highlighter umumnya diterapkan pada blog yang membahas perihal tutorial seputar instruksi HTML, Javascript, dan CSS atau sering disebut niche coding. Sementara untuk yang lainnya lebih baik untuk tidak menggunakannya, alasannya yaitu memang tidak diperlukan.
Contoh cuplikan instruksi tanpa Syntax Highlighter
<html> <head> <title>Cara menciptakan Syntax Highlighter di blog</title> </head> <body> <div class='syntax-highlighter'> Apa itu Syntax Highlighter? Apa fungsi dan kegunaannya? Cari jawabannya di sini. </div> </body> </html>
Contoh cuplikan instruksi menggunakan Syntax Highlighter
<html> <head> <title>Cara memasang prettyfy Syntax Highlighter di Blogger</title> </head> <body> <div class='prettyprint'> Apa itu prettyprint? Bagaimana cara memasang dan menggunakannya? Temukan jawabannya di sini. </div> </body> </html>
Cara pemasangan
Untuk menjalankan jadwal Syntax Highlighter dengan Prettyprint di blog, hal pertama yang harus dilakukan yaitu memasang skrip
prettify.js dan CSS prettyprint di dalam Tema / Template blog. Ikuti langkah-langkah berikut ini1. Masuk ke Blogger, pilih blog yang ingin Anda pasang prettyprint
2. Pilih sajian Tema, klik Edit HTML
3. Salin script prettify.js, letakkan di atas instruksi
</body>. Tujuannya yaitu semoga tidak memblokir perenderan konten utama, dimana ini sangat dekat kaitannya dengan cara mempercepat loading blog. Jika terpaksa (script tidak bekerja bila diletakkan pada daerah tersebut di atas) letakkan di atas instruksi </head><script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
4. Salin instruksi CSS di bawah ini, lalu letakkan di atas instruksi ]]></b:skin> atau </style>
pre .str, code .str { color: #65B042; } /* string - hijau */ pre .kwd, code .kwd { color: #E28964; } /* keyword - kuning gelap */ pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - abu-abu */ pre .typ, code .typ { color: #bdb76b; } /* type - kuning yaiz */ pre .lit, code .lit { color: #3387CC; } /* literal - biru */ pre .pun, code .pun { color: #bdb76b; } /* punctuation - kuning yaiz */ pre .pln, code .pln { color: #fff; } /* plaintext - putih */ pre .tag, code .tag { color: #77bdff; } /* warna tag html/xml - biru langit */ pre .atn, code .atn { color: #dd7700; } /* warna nama attribute html/xml - oranye */ pre .atv, code .atv { color: #65B042; } /* warna nilai attribute html/xml - hijau */ pre .dec, code .dec { color: #3387CC; } /* decimal - biru */ pre.prettyprint, code.prettyprint { background-color: #2f3741; border: none!important; border-left: 4px solid #fff!important; } pre.prettyprint { white-space: pre-wrap; margin: 1em auto; padding: 1em; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal!important; } /* Alternate shading for lines */ li.L1,li.L3,li.L5,li.L7,li.L9 { background: #2f3741!important; } Jika kesannya terdapat nilai atribut yang tidak berjalan dengan semestinya. Tambahkan keterangan
!important pada nilai atribut tersebut.5. Simpan Tema, jikalau kesannya masih nihil, lakukan Format template / tema lalu simpan
Bagaimana cara menciptakan background Syntax Highlighter menjadi belang-belang?
Ganti instruksi warna pada CSS berikut
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #2f3741!important; } Bagaimana cara menciptakan cuplikan instruksi Syntax Highlighter semoga menjadi sebaris pada setiap nomor barisnya?
Hapus instruksi
white-space: pre-wrap; lalu ganti dengan instruksi overflow: auto;Cara menggunakan prettyprint
Untuk menciptakan tampilan cuplikan instruksi menjadi berwarna sangat mudah, cukup bungkus instruksi dengan cara berikut ini.
Masuk mode HTML (sebelah Compose)
<pre class="prettyprint">...Isi kode ...</pre> atau<code class="prettyprint">...Isi kode ...</code>Contoh :
<pre class="prettyprint">
<pre class='syntax-highlighter'>
/*Ini yaitu pola cara menciptakan Syntax Highlighter*/
<title></title>
</pre>
Hasilnya :
<pre class='syntax-highlighter'> /*Ini yaitu pola cara menciptakan Syntax Highlighter*/ <title></title>
Bagaimana cara menampilkan nomor baris pada cuplikan kode?
Untuk menampilkan nomor baris, gunakan cara berikut ini.
<pre class="prettyprint linenums">...Isi kode ...</pre>Contoh cuplikan instruksi dengan nomor baris
dji (); rho (); text ();
Bagaimana cara menciptakan Syntax Highlighter dengan nomor baris bukan dimulai dari angka 1, contohnya 7
Gunakan tanda (:) lalu diikuti dengan nomor baris yang ingin Anda jadikan sebagai nomor permulaan, lihat pola berikut ini.
<pre class="prettyprint linenums:7">...Isi kode ...</pre>Contoh cuilan instruksi yang dimulai dari angka 7
// Ini yaitu baris ke 7. .prettyprint { hight: 1em; padding: 1em; border: none; } 
