Cara Membuat Syntax Highlighter Pada Postingan Code di Blogger


Cara Membuat Syntax Highlighter - Syntax ini berfungsi untuk memudahkan dalam penulisan sebuah script atau penulisan code di dalam postingan blog, sehingga dapat dengan mudah cara membedakan mana yang berisi kode dan mana yang berisi postingan biasa.

Nah untuk melakukannya pun caranya cukup mudah, script ini saya dapatkan dari blog Arlina Design. Jika sobat tertarik silahkan dicoba ya cara berikut ini.

1. Pertama masuk pada blog sobat -> Theme -> Edit HTML, kemudian copy code di bawah ini tepat diatas </head>.

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

2. Setelah itu, copy kode dibawah ini tepat diatas ]]><b:skin> atau </style>

/* syntax highlighter SOLARIZED DARK STYLE www.arlinadzgn.com */
pre code{display:block;padding:0.5em;background:#002b36;color:#839496}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}

3. Selanjutnya untuk menerapkannya pada postingan sobat, tulis kode berikut ini untuk menerapkannya.

<pre>
<code>
TULIS KODE DISINI
</code>
</pre>

Sumber : Arlina Design

0 Response to "Cara Membuat Syntax Highlighter Pada Postingan Code di Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel