Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / lainnya

Cara Memasang Syntax Highlighter Keren Di Blogger

Cara Memasang Syntax Highlighter Keren dan warna Cara Memasang Syntax Highlighter Keren di Blogger
Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks terutama source code menjadi lebih manarik dan manis dengan mengelompokkan setiap jenis arahan kedalam warna dan font tertentu secara otomatis memakai css dan script pendukung / plugin sesuai dengan kategori istilah yang digunakan. Kaprikornus kesimpulannya dengan menggunakan Syntax Highlighter memudahkan dalam menulis source code atau bahasa terstruktur menyerupai bahasa pemrograman (programming language) atau bahasa markup (markup language) di dalam blog atau situs, sehingga akan terlihat lebih rapi dimata pengunjung. Penggunaan Syntax Highlighter secara umum biasanya diterapkan pada blog yang membahas ihwal tutorial seputar arahan HTML, Javascript, dan CSS atau sering disebut niche coding. Implementasi dari syntax higlighter pada halaman website, blog atau lembaga online sering dipakai sebagai arahan prensentasi pada pola code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa aktivitas lainnya.) yang ingin ditampilkan. Nah kali ini aku akan memperlihatkan tutorial bagaiamana menerapkan syntax highlighter ini di blog? jadi simak saja pemasangannya berikut. 

Cara Membuat Syntax Highlighter di Blogger
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style> 
  /* CSS Simple Pre Code */ pre {     background: #333;     white-space: pre;     word-wrap: break-word;     overflow: auto; }  pre.code {     margin: 20px 25px;     border-radius: 4px;     border: 1px solid #292929;     position: relative; }  pre.code label {     font-family: sans-serif;     font-weight: bold;     font-size: 13px;     color: #ddd;     position: absolute;     left: 1px;     top: 15px;     text-align: center;     width: 60px;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     pointer-events: none; }  pre.code code {     font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;     display: block;     margin: 0 0 0 60px;     padding: 15px 16px 14px;     border-left: 1px solid #555;     overflow-x: auto;     font-size: 13px;     line-height: 19px;     color: #ddd; }  pre::after {     content: "double click to selection";     padding: 0;     width: auto;     height: auto;     position: absolute;     right: 18px;     top: 14px;     font-size: 12px;     color: #ddd;     line-height: 20px;     overflow: hidden;     -webkit-backface-visibility: hidden;     transition: all 0.3s ease; }  pre:hover::after {     opacity: 0;     visibility: visible; }  pre.code-css code {     color: #91a7ff; }  pre.code-html code {     color: #aed581; }  pre.code-javascript code {     color: #ffa726; }  pre.code-jquery code {     color: #4dd0e1; }

5. Jika sudah, Copy arahan javascript berikut ini dan Paste diatas arahan </body> 

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css"/> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>  <script type='text/javascript'> //<![CDATA[ $('i[rel="pre"]').replaceWith(function() {     return $('<pre><code>' + $(this).html() + '</code></pre>'); }); var pres = document.querySelectorAll('pre,kbd,blockquote'); for (var i = 0; i < pres.length; i++) {   pres[i].addEventListener("dblclick", function () {     var selection = getSelection();     var range = document.createRange();     range.selectNodeContents(this);     selection.removeAllRanges();     selection.addRange(range);   }, false); } //]]> </script>.

6. Lalu Simpan/Save templatenya.

7. Anda juga dapat merubah warna goresan pena (souce code) serta warna latar belakang HTML, CSS, Javascript, dan Jquery dengan menganti arahan CSS berikut.

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css"/>

8. Lalu ganti arahan diatas dengan arahan CSS dibawah ini, pilih salah satunya saja untuk mengganti atau mengubah warna souce code Anda, kalian juga bise mencoba demonya DISINI. 

 Contoh Kode dengan Style CSS Default:

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/>

Contoh Kode dengan Style CSS Dracule:

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css"/>.

9. Selanjutnya dikala Anda menciptakan postingan, gunakanlah arahan berikut ini untuk penarapannya di Tab HTML, pilih salah satu arahan dibawah yang sesuai dengan souce arahan yang ingin Anda masukan, kemudian balik lagi ke menu Tab Compose dan masukanlah source code Anda di situ.

 
 <pre class='code code-html'><label>HTML</label><code> Masukan Kode HTML Anda Di Sini </code></pre>  <pre class='code code-css'><label>CSS</label><code> Masukan Kode CSS Anda Di Sini </code></pre>  <pre class='code code-javascript'><label>JS</label><code> Masukan Kode Javascript Anda Di Sini </code></pre>  <pre class='code code-jquery'><label>Jquery</label><code> Masukan Kode Jquery Anda Di Sini </code></pre>

Cara Memasang Syntax Highlighter Keren dan warna Cara Memasang Syntax Highlighter Keren di Blogger


 Itulah beberapa langkah-langkah pemasangan Syntax Highlighter pre code di post blogger, dimana dengan ini souce code kita akan dibungkusnya menjadi lebih rapi dan lezat kalau di pandang. Selain itu dengan penggunaan javascript, souce arahan akan terlihat warna-warni layaknya pelangi. Nah sekian dulu tutorial kali ini, kalau ada yang ingin Anda tanyakan atau tidak mengerti silahkan komentar dibawah ini terima kasih.