Cara Menciptakan Syntax Highlighter Di Blogger

Pada postingan kali ini aku akan share perihal cara menciptakan syntax highlighter keren di blogger dan cara memakai syntax highlighter pada blog,dengan aneka macam tema syntax highlighter yang keren memakai CSS dan Javascript khusus pada blogger.Memang sudah banyak situs atau blog yang membahas perihal cara memasang dan memakai syntax highlighter serta menyebarkan code dan cara memasang syntax highlighter pada blog dan website ( baik yang memakai javascript, jQuery, maupun markup HTML) menyerupai Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainya,tapi disini aku lebih menentukan HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih gampang dan sanggup bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode). HIGHLIGHT.JS mengenali sekurangnya 54 bahasa aktivitas dan dibundel dengan 26 theme style. Untuk itu aku hanya akan menentukan menjadi 3 bahasa code saja, yang paling sering dipakai oleh para blogger (dalam menciptakan tutorial pada blog-nya) kebanyakan para blogger hanya untuk menampilkan source code, menyerupai aba-aba 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 aneka macam warna dan font sesuai dengan kategori istilah. Dengan menggunakanSyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur menyerupai bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau lembaga online sering dipakai sebagai aba-aba prensentasi pada pola code source ( menyerupai 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. 

Cara Memasang Syntax Highlighter 

Untuk mengaktifkan fitur ini diperlukan javascript, 

1. Login ke Blogger

2. Theme / Template > Edit HTML

3. Copy aba-aba javascript di bawah ini dan letakan sempurna di atas atau sebelum tag </head> 

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

4. Temukan aba-aba ]]></b:skin> atau </style>
5. Copy dan Pastekan salah satu aba-aba template Syntax Highlighter  yang akan kita gunakan sempurna 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 sahabat postingkan, gunakan aba-aba 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 menciptakan syntak pre code di blogger. Salam blogger

Share this post