Cara Gampang Menciptakan Syntax Highlighter Pada Postingan Blogger
Cara Praktis Menyisipkan Kode HTML Menggunakan Syntax Highlighter Pada Postingan Blogger
Pengalaman newbie menyisipkan Script HTML pribadi di postingan blog, ada pengalaman yang bikin senyum-senyum sendiri. Kenapa saya sebodoh itu :v, saya pernah posting artikel blog yang berafiliasi wacana script HTML. dengan kepolosan saya, saya tidak tahu kalau instruksi tersubut harus di posting dengan cara khusus, kesannya script instruksi HTML tersebut malah menjadi tampilan yang ingin saya bagikan itu, bukan berbentuk kode-kodenya. Akhirnya saya cari tahu sendiri, kalau menyisipkan script HTML harus memakai Syntax Highlighter
Apa itu syntax highlighter, yaitu fitur editor berbentuk teks yang dipakai untuk menyoroti atau meyisipkan bergabai jenis bahas pemograman atau script ibarat HTML, Javascript , CSS dan lainnya. Syntax highlighter biasanya menampilkan teks menjadi lebih lezat dilihat dan lebih berwarna dengan kategori pemograman itu sendiri. Dengan demikian instruksi pemograman yang kita sisipkan lebih gampang dibaca dan di mengerti. Syntax Highlighter yaitu tools pengganti blockquote, namun tampilan didalam blockquote sangatlah sederhana dan tidak mendukung warna-warni untuk tampilan instruksi script, maka jalan keluarnya ialah memakai Tools Syntax Highlighter ini.
Syntax Highlighter Biasanya dipakai blog dengan niche yang memnbahas wacana banyak sekali macam bahasa pemograman atau tutorial-tutorial yang berafiliasi dengan script HTML. Blog yang populer sering membahas semacam itu di anataranta blog bungfrangky, igniel arlinadzgn dan kompiajaib. mereka tampaknya sama memakai cara ini untuk menyisipkan script HTML ke dalam postingannya.
Baca Juga : 5 Youtuber Dengan Kenaikan Subscriber Tercepat Di Indonesia
Cara Praktis Memasang Syntax Highlighter pada postingan Blogger
Cara ini sama halnya pada umumnya memasukan instruksi HTML ke dalam Tema blogger kita. Namun berdasarkan saya cara ini paling gampang dan simple untuk dilakukan
1. LogIn Seperti Biasa Ke Blogger
2. Lalu Pilih Dashboard -> Tema -> Edit HTML
3. Cari instruksi berikut </head> , Untuk lebih gampang mencarinya tekan ctrl + f
4. Paste instruksi dibawah ini Sebelum instruksi </head>
5. Cari instruksi berikut </body>
6. Lalu Tambahkan instruksi dibawah ini sempurna di atas </body>
7. Kemudian Simpan Tema
Baca Juga : Rekomendasi Hp Gaming 1 Jutaan Terbaik Tahun 2019
Cara Menggunakan Syntax Highlighter Kedalam Postingan
Untuk memakai atau menyisipkan Syntax Highlighter kedalam postingan, caranya ibarat berikut:
1. Pilih Entri Baru
2. Pilih pada mode HTML
3. Masukan instruksi berikut pada postingan yang akan menampilkan script HTML
Silahkan ganti teks yang berwarna Hijau dengan instruksi HTML, Javascipt atau CSS yang akan masukan kedalam postingan
Baca Juga : 3 Template Template SEO Friendly Mirip Situs Berita Terkenal Di Indonesia
Syntax Highlighter Lebih cocok untuk blog yang mengelola blog dengan niche Full Tutorial script instruksi html, css dan lainya. Dan tidak cocok Untuk blog yang hanya sekali-kali menyajikan tutorial ibarat ini, untuk itu jangan berlebihan memasang script di blog kita sebab akan sangat berpengarah terhadap loading blog.
Demikian Cara memasang Syntax Highlighter di blogger, agar dapat dipakai ke dalam blog kita. (EP)
Sumber https://www.kored.id/
Pengalaman newbie menyisipkan Script HTML pribadi di postingan blog, ada pengalaman yang bikin senyum-senyum sendiri. Kenapa saya sebodoh itu :v, saya pernah posting artikel blog yang berafiliasi wacana script HTML. dengan kepolosan saya, saya tidak tahu kalau instruksi tersubut harus di posting dengan cara khusus, kesannya script instruksi HTML tersebut malah menjadi tampilan yang ingin saya bagikan itu, bukan berbentuk kode-kodenya. Akhirnya saya cari tahu sendiri, kalau menyisipkan script HTML harus memakai Syntax Highlighter
Apa itu syntax highlighter, yaitu fitur editor berbentuk teks yang dipakai untuk menyoroti atau meyisipkan bergabai jenis bahas pemograman atau script ibarat HTML, Javascript , CSS dan lainnya. Syntax highlighter biasanya menampilkan teks menjadi lebih lezat dilihat dan lebih berwarna dengan kategori pemograman itu sendiri. Dengan demikian instruksi pemograman yang kita sisipkan lebih gampang dibaca dan di mengerti. Syntax Highlighter yaitu tools pengganti blockquote, namun tampilan didalam blockquote sangatlah sederhana dan tidak mendukung warna-warni untuk tampilan instruksi script, maka jalan keluarnya ialah memakai Tools Syntax Highlighter ini.
Syntax Highlighter Biasanya dipakai blog dengan niche yang memnbahas wacana banyak sekali macam bahasa pemograman atau tutorial-tutorial yang berafiliasi dengan script HTML. Blog yang populer sering membahas semacam itu di anataranta blog bungfrangky, igniel arlinadzgn dan kompiajaib. mereka tampaknya sama memakai cara ini untuk menyisipkan script HTML ke dalam postingannya.
Baca Juga : 5 Youtuber Dengan Kenaikan Subscriber Tercepat Di Indonesia
Cara Praktis Memasang Syntax Highlighter pada postingan Blogger
Cara ini sama halnya pada umumnya memasukan instruksi HTML ke dalam Tema blogger kita. Namun berdasarkan saya cara ini paling gampang dan simple untuk dilakukan
1. LogIn Seperti Biasa Ke Blogger
2. Lalu Pilih Dashboard -> Tema -> Edit HTML
3. Cari instruksi berikut </head> , Untuk lebih gampang mencarinya tekan ctrl + f
4. Paste instruksi dibawah ini Sebelum instruksi </head>
<style type='text/css'> /* Highlighter */ pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem} .post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0} </style>5. Cari instruksi berikut </body>
6. Lalu Tambahkan instruksi dibawah ini sempurna di atas </body>
<script type='text/javascript'> //<![CDATA[ // Highlighter $('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1); function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>7. Kemudian Simpan Tema
Syntax Highlighter akan bekerja dengan optimal, apabila script instruksi jquery sudah terpasang di blog anda. Contoh sederhana dari script instruksi jquery yaitu : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
.
Baca Juga : Rekomendasi Hp Gaming 1 Jutaan Terbaik Tahun 2019
Cara Menggunakan Syntax Highlighter Kedalam Postingan
Untuk memakai atau menyisipkan Syntax Highlighter kedalam postingan, caranya ibarat berikut:
1. Pilih Entri Baru
2. Pilih pada mode HTML
3. Masukan instruksi berikut pada postingan yang akan menampilkan script HTML
<pre><code>_Tambahkan Kode HTML/CSS/JAVASCRIPT Disini_</code></pre>Silahkan ganti teks yang berwarna Hijau dengan instruksi HTML, Javascipt atau CSS yang akan masukan kedalam postingan
Jika Anda ingin menambahkan atau memasukan instruksi HTML ibarat di atas sangat disarankan untuk parse dulu instruksi tersebut memakai tool Parse HTML. HTML Converter DISINI4. Lakukan Pratinjau Terlebih dahulu untuk melihat Hasilnya, Selesai
Baca Juga : 3 Template Template SEO Friendly Mirip Situs Berita Terkenal Di Indonesia
Syntax Highlighter Lebih cocok untuk blog yang mengelola blog dengan niche Full Tutorial script instruksi html, css dan lainya. Dan tidak cocok Untuk blog yang hanya sekali-kali menyajikan tutorial ibarat ini, untuk itu jangan berlebihan memasang script di blog kita sebab akan sangat berpengarah terhadap loading blog.
Demikian Cara memasang Syntax Highlighter di blogger, agar dapat dipakai ke dalam blog kita. (EP)
Sumber https://www.kored.id/
