Membuat Syntax Highlighter Di Postingan Blogger - Gasskeun Membuat Syntax Highlighter Di Postingan Blogger | Gasskeun
» » Membuat Syntax Highlighter Di Postingan Blogger

Membuat Syntax Highlighter Di Postingan Blogger

- Sintaks Highlighter ialah fitur khusus dari proses mentransfer arahan bahasa pemrograman tertentu dengan tulisan, warna teks, posisi persis ibarat yang terkandung dalam arahan bahasa pemrograman untuk dipindahkan atau disalin ke dalam bentuk tertulis lain untuk membuatnya lebih gampang dibaca atau dipelajari.

Selain mempercantik tampilan garis arahan dalam posting blog, penggunaan Syntax Highlighter juga dimaksudkan biar pembaca gampang mengenali jenis arahan yang diberikan oleh penulis. Efek memakai Highlighter Sintaks lainnya ialah bahwa pengunjung akan merasa lebih nyaman membaca konten blog, dan untuk penulis blog atau admin akan membuatnya lebih profesional dalam menyajikan artikel di blog tutorial mereka.

Membuat Syntax Highlighter di Postingan Blogger
Sintaks Highlighter bekerja hampir sama dengan blockquote tetapi perbedaannya ialah bahwa fitur blockquote warna teks biasanya hanya satu warna, untuk mengubah warna sesuai dengan arahan asli, itu harus dilakukan secara manual. Makara intinya stabilo Sintaks akan efektif dalam proses menciptakan atau memindahkannya dibandingkan dengan fitur blockquote.

Selain mempermudah pengunjung situs Anda membaca banyak sekali arahan bahasa pemrograman, penggunaan penyorotan sintaksis juga akan menciptakan pengunjung lebih nyaman dikala membaca atau melihat arahan skrip yang Anda tulis di blog.

Cara Memasang Dan Modifikasi Label Cloud Keren Di Blogger
Bagi Anda yang tertarik menciptakan syntax highlighter di blog, silakan ikuti langkah-langkah di bawah ini.

Cara Memasang Syntax Highlighter di Blogger

  • Pertama, login ke Blogger >>
  • Pilih Blog >> 
  • Klik hidangan Tema dan klik tombol Edit HTML > >
  • Tambahkan arahan CSS di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
NOTE
Perhatikan, arahan yang akan saya bagikan ini akan berfungsi dengan baik jikalau di blognya sudah menambahkan jquery library. Contoh jquery library ibarat ini <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> 
<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>
  • Atau
/* RAINBOW STYLE */ pre::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none} pre::selection{background:#FF5E99;color:#fff;text-shadow:none} pre code{display:block;padding:0.5em;background:#474949;color:#D1D9E1} pre .body,pre .collection{color:#D1D9E1} pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#969896;font-style:italic} pre .keyword,pre .clojure .attribute,pre .winutils,pre .javascript .title,pre .addition,pre .css .tag{color:#cc99cc} pre .number{color:#f99157} pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#8abeb7} pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .identifier{color:#b5bd68} pre .class .keyword{color:#f2777a} pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label,pre .id,pre .lisp .title,pre .clojure .title .built_in{color:#ffcc66} pre .tag .title,pre .rules .property,pre .django .tag .keyword,pre .clojure .title .built_in{font-weight:bold} pre .attribute,pre .clojure .title{color:#81a2be} pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#f99157} pre .deletion{color:#dc322f} pre .tex .formula{background:#eee8d5}

Kemudian tambahkan arahan berikut ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<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>

Setelah itu klik tombol Simpan tema.
Cara Penulisan Syntax Highlighter di Postingan Blogger
Cara Menciptakan Notifikasi Untuk Pengguna Adblocker Adsense

Setelah memasang arahan yang dibutuhkan, selanjutnya ke cara penulisannya di dalam postingan. Buat postingan gres di blog sobat, lalu untuk penulisannya tambahkan arahan ini di tab HTML (bukan compose)

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti arahan yang ditandai pada arahan di atas dengan arahan CSS/HTML/JAVASCRIPT. Khusus untuk arahan HTML/JAVASCRIPT silakan parse terlebih dahulu dengan HTML Converter.

Berikut tumpuan penulisan arahan HTML, arahan HTML yang ditandai ialah arahan yang akan sahabat tambahkan
Sama halnya dengan arahan CSS dan Javascript, cara penulisannya sama ibarat tumpuan di atas.

Itulah artikel ihwal cara menciptakan syntax highlighter di blogger, semoga sukses dan semoga bermanfaat.
Sumber https://iyonxx.blogspot.com/
Kemudian tambahkan arahan berikut ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<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>

Setelah itu klik tombol Simpan tema.
Cara Penulisan Syntax Highlighter di Postingan Blogger

Setelah memasang arahan yang dibutuhkan, selanjutnya ke cara penulisannya di dalam postingan. Buat postingan gres di blog sobat, lalu untuk penulisannya tambahkan arahan ini di tab HTML (bukan compose)

Cara Menciptakan Iklan Parallax Pada Blog Non Amp
<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti arahan yang ditandai pada arahan di atas dengan arahan CSS/HTML/JAVASCRIPT. Khusus untuk arahan HTML/JAVASCRIPT silakan parse terlebih dahulu dengan HTML Converter.

Berikut tumpuan penulisan arahan HTML, arahan HTML yang ditandai ialah arahan yang akan sahabat tambahkan

Sama halnya dengan arahan CSS dan Javascript, cara penulisannya sama ibarat tumpuan di atas.

Itulah artikel ihwal cara menciptakan syntax highlighter di blogger, semoga sukses dan semoga bermanfaat.
Sumber https://iyonxx.blogspot.com/

Related Posts

Matikan AdBlock

Agar blog Ini tetap berjalan, matikan AdBlock atau masukkan blog ini ke dalam whitelist.
Terima kasih.