Cara Membuat Syntax Highlighter Keren Pada Blogger

Cara membuat syntax highlighter keren di blogger dan cara menggunakan syntax highlighter pada blog, dengan berbagai tema syntax highlighter yang keren menggunakan CSS dan Javascript khusus pada blogger. Memang sudah banyak situs atau blog yang membahas tentang cara memasang dan menggunakan syntax highlighter serta berbagi code dan cara memasang syntax highlighter pada blog dan website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainya, tetapi disini saya lebih memilih HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih mudah dan dapat bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode). HIGHLIGHT.JS mengenali sekurangnya 54 bahasa program dan dibundel dengan 26 theme style. Untuk itu saya hanya akan memilih menjadi 3 bahasa code saja, yang paling sering digunakan oleh para blogger (dalam membuat tutorial pada blog-nya) kebanyakan para blogger hanya untuk menampilkan source code, seperti kode CSS, Javascript, dan mark up HTML. 

Pengertian Syntax Highlighter

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakanSyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan. 

Cara Memasang Syntax Highlighter 

Untuk mengaktifkan fitur ini dibutuhkan javascript, 

1. Login ke Blogger

2. Theme / Template > Edit HTML

3. Copy kode javascript di bawah ini dan letakan tepat di atas atau sebelum tag </head> 

<script src="https://cdn.rawgit.com/Arlina-Design/frame/0c5e9584/highlightpacks.js"/>
<script>hljs.initHighlightingOnLoad();</script>

4. Temukan kode ]]></b:skin> atau </style>

5. Copy dan Pastekan salah satu kode template Syntax Highlighter  yang akan kita gunakan tepat diatasnya

/* SUNBURST STYLE*/
pre code{display:block;padding:0.5em;background:#000;color:#f8f8f8}
pre .comment,pre .template_comment,pre .javadoc{color:#aeaeae;font-style:italic}
pre .keyword,pre .ruby .function .keyword,pre .request,pre .status,pre .nginx .title{color:#E28964}
pre .function .keyword,pre .sub .keyword,pre .method,pre .list .title{color:#99CF50}
pre .string,pre .tag .value,pre .cdata,pre .filter .argument,pre .attr_selector,pre .apache .cbracket,pre .date,pre .tex .command{color:#65B042}
pre .subst{color:#DAEFA3}
pre .regexp{color:#E9C062}
pre .title,pre .sub .identifier,pre .pi,pre .tag,pre .tag .keyword,pre .decorator,pre .shebang,pre .prompt{color:#89BDFF}
pre .class .title,pre .haskell .type,pre .smalltalk .class,pre .javadoctag,pre .yardoctag,pre .phpdoc{text-decoration:underline}
pre .symbol,pre .ruby .symbol .string,pre .number{color:#3387CC}
pre .params,pre .variable,pre .clojure .attribute{color:#3E87E3}
pre .css .tag,pre .rules .property,pre .pseudo,pre .tex .special{color:#CDA869}
pre .css .class{color:#9B703F}
pre .rules .keyword{color:#C5AF75}
pre .rules .value{color:#CF6A4C}
pre .css .id{color:#8B98AB}
pre .annotation,pre .apache .sqbracket,pre .nginx .built_in{color:#9B859D}
pre .preprocessor{color:#8996A8}
pre .hexcolor,pre .css .value .number{color:#DD7B3B}
pre .css .function{color:#DAD085}
pre .diff .header,pre .chunk,pre .tex .formula{background-color:#0E2231;color:#F8F8F8;font-style:italic}
pre .diff .change{background-color:#4A410D;color:#F8F8F8}
pre .addition{background-color:#253B22;color:#F8F8F8}
pre .deletion{background-color:#420E09;color:#F8F8F8}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

6. Simpan Setelan Template Sobat.

Jangan lupa untuk menkonversi kode-kode yang akan kita postingkan. Dan untuk mengkonversi kode-kokde html sobat, silahkan klik Disini

Untuk menuliskan kode-kode yang akan sobat postingkan, gunakan kode html berikut :

<pre><code>KODE atau TEKS KALIAN DISINI</code></pre>

Semoga Cara Membuat Syntax Highlighter di Blogger kali ini membantu kalian yang sedang membutuhkan bagaimana cara membuat syntak pre code di blogger. Semoga bermanfat dan berhasil. 

Well done! you have successfully gained access to Decrypted Link.

Choosing a suitable pricing method comes down to you. There's no single strategy specific to your business nor best strategy amongst them all. If dealing in unique or less competitive products or services, a cost plus and mark-up pricing strategies can be considered while someone dealing in competitive

products ought to use competitive pricing. They should however consider their costs thereb finding ways to reduce costs by looking for cheaper products, cheaper rent or choosing to sacrifice by ensuring a higher quantity is sold at a cheaper price earning a smaller profit per unit compared to competitors.