Dalam posting kali ini aku akan membahas mengenai cara memasang syntax highlighter di blogger. Apa itu syntax highlight? Sobat niscaya pernah melalukan edit HTML di blog sobat, perhatikan kode-kode HTML yang ada di blog sobat, bukankah kode-kode tersebut (disebut syntax) berwarna-warni!? Nah, pewarnaan pada syntax itu disebut syntax highlight. Sekarang kita akan menciptakan arahan yang dituliskan di blog kita berwarna-warni juga.
Langkah Pertama
Pertama-tama tambahkan arahan j4vascript berikut ini di atas</body>.<script src='https://cdn.statically.io/gh/maringngerrang/js/master/hilight.js'/> <script> hljs.initHighlightingOnLoad(); </script>
Langkah Kedua
Selanjutnya kita akan menambahkan arahan CSSnya. Ada beberapa jenis warna untuk syntax highlighter, sobat dapat menentukan warna sesuai dengan yang sobat inginkan pada link berikut. Tetapi untuk melihat jadinya sebelum terpasang di blog sobat, silahkan lihat demo berikut.Langkah ketiga
Setelah menemukan arahan CSS yang sobat inginkan, pasang arahan tersebut di blog sobat, letakkan arahan CSSnya diatas]]></b:skin>. Berikut ini aku tampilkan dua teladan arahan CSS yang dapat sobat pasang.Kode CSS
/* Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org> */ pre code { display: block; padding: 0.5em; background: #F0F0F0; } pre code, pre .subst, pre .tag .title, pre .lisp .title, pre .clojure .built_in, pre .nginx .title { color: black; } pre .string, pre .title, pre .constant, pre .parent, pre .tag .value, pre .rules .value, pre .rules .value .number, pre .preprocessor, pre .haml .symbol, pre .ruby .symbol, pre .ruby .symbol .string, pre .aggregate, pre .template_tag, pre .django .variable, pre .smalltalk .class, pre .addition, pre .flow, pre .stream, pre .bash .variable, pre .apache .tag, pre .apache .cbracket, pre .tex .command, pre .tex .special, pre .erlang_repl .function_or_atom, pre .asciidoc .header, pre .markdown .header, pre .coffeescript .attribute { color: #800; } pre .comment, pre .annotation, pre .template_comment, pre .diff .header, pre .chunk, pre .asciidoc .blockquote, pre .markdown .blockquote { color: #888; } pre .number, pre .date, pre .regexp, pre .literal, pre .hexcolor, pre .smalltalk .symbol, pre .smalltalk .char, pre .go .constant, pre .change, pre .lasso .variable, pre .asciidoc .bullet, pre .markdown .bullet, pre .asciidoc .link_url, pre .markdown .link_url { color: #080; } pre .label, pre .j4vadoc, pre .ruby .string, pre .decorator, pre .filter .argument, pre .localvars, pre .array, pre .attr_selector, pre .important, pre .pseudo, pre .pi, pre .haml .bullet, pre .doctype, pre .deletion, pre .envvar, pre .shebang, pre .apache .sqbracket, pre .nginx .built_in, pre .tex .formula, pre .erlang_repl .reserved, pre .prompt, pre .asciidoc .link_label, pre .markdown .link_label, pre .vhdl .attribute, pre .clojure .attribute, pre .asciidoc .attribute, pre .lasso .attribute, pre .coffeescript .property { color: #88F } pre .keyword, pre .id, pre .title, pre .built_in, pre .aggregate, pre .css .tag, pre .j4vadoctag, pre .phpdoc, pre .yardoctag, pre .smalltalk .class, pre .winutils, pre .bash .variable, pre .apache .tag, pre .go .typename, pre .tex .command, pre .asciidoc .strong, pre .markdown .strong, pre .request, pre .status { font-weight: bold; } pre .asciidoc .emphasis, pre .markdown .emphasis { font-style: italic; } pre .nginx .built_in { font-weight: normal; } pre .coffeescript .j4vascript, pre .j4vascript .xml, pre .lasso .markup, pre .tex .formula, pre .xml .j4vascript, pre .xml .vbscript, pre .xml .css, pre .xml .cdata { opacity: 0.5; }Penggunaannya
Nah selanjutnya untuk cara penggunaan syntax highlighter teman-teman dapat memasangnya dengan memakai arahan berikut ini:<pre><code><!-- masukkan arahan di sini --></code></pre>
Perhatikan bahwa arahan yang dimasukkan harus telah dikonversi menjadi abjad entities. Makara untuk simbol < harus ditulis dengan < anda dapat mengkonversi arahan di sini.
Mungkin cukup sekian, kalau ada yang ingin sobat tanyakan, silahkan sampaikan pada kotak komentar dibawah atau dapat juga melalui halaman Contact yang dapat dibuka di hidangan blog dibagian paling atas. Terima kasih.
Sumber http://www.maringngerrang.com/
