Cara Menciptakan Syntax Highlighter Berwarna Di Blog

Cara Membuat Syntax Highlighter Berwarna di Blog

Cara Membuat Syntax Highlighter Berwarna di Blog - Syntax Highlighter, Apa itu Syntax Highlighter? Syntax Highlighter yakni sebuah arahan yang digunakan dalam bahasa pemrograman yang memiliki kegunaan untuk menampilkan coding dalam berbagai macam warna supaya mampu memudahkan programmer untuk membaca serta menganalisis sumber arahan tersebut.

Syntax Highlighter ini sangat cocok bagi anda yang suka memposting artikel yang mengenai Javascript, HTML, CSS dan masih banyak lagi. Syntax Highlighter sangat cocok dikarenakan mampu menarik pengunjung dengan anda yang menggunakan berbagai macam warna.

Nah langsung saja ini dia Cara Membuat Syntax Highlighter Berwarna di Blog.

Cara Membuat Syntax Highlighter Berwarna di Blog

1. Pergi ke Dashboard blogger

2. Pilh hidangan Temaplte > Edit HTML.

3. lalu re-create dan pastekan arahan di bawah ini tepat di atas arahan </head>

<scriptsrc="https://sites.google.com/site/m4w4nz/highlight.pack.js" type='text/javascript'></script>
<script type='text/javascript'>
hljs.initHighlightingOnLoad();
</script>

4. Lalu re-create dan pastekan arahan dibawah ini tepat di atas arahan ]]></b:skin> atau </style>

    pre code {

      display: block; padding: 0.5em;

      color: #DCCF8F;

      background: url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left overstep #181914;

    }


    pre .comment,

    pre .template_comment,

    pre .diff .header,

    pre .doctype,

    pre .lisp .string,

    pre .javadoc {

      color: #586e75;

      font-style: italic;

    }


    pre .keyword,

    pre .css .rule .keyword,

    pre .winutils,

    pre .javascript .title,

    pre .method,

    pre .addition,

    pre .css .tag,

    pre .clojure .title,

    pre .nginx .title {

      color: #B64926;

    }


    pre .number,

    pre .command,

    pre .string,

    pre .tag .value,

    pre .phpdoc,

    pre .tex .formula,

    pre .regexp,

    pre .hexcolor {

      color: #468966;

    }


    pre .title,

    pre .localvars,

    pre .function .title,

    pre .chunk,

    pre .decorator,

    pre .built_in,

    pre .lisp .title,

    pre .clojure .built_in,

    pre .identifier,

    pre .id {

      color: #FFB03B;

    }


    pre .attribute,

    pre .variable,

    pre .lisp .body,

    pre .smalltalk .number,

    pre .constant,

    pre .class .title,

    pre .parent,

    pre .haskell .type {

      color: #b58900;

    }


    pre .css .attribute {

      color: #b89859;

    }


    pre .css .number,pre .css .hexcolor{

      color: #DCCF8F;

    }


    pre .css .class {

      color: #d3a60c;

    }


    pre .preprocessor,

    pre .pi,

    pre .shebang,

    pre .symbol,

    pre .symbol .string,

    pre .diff .change,

    pre .special,

    pre .attr_selector,

    pre .important,

    pre .subst,

    pre .cdata {

      color: #cb4b16;

    }


    pre .deletion {

      color: #dc322f;

    }


    pre .tex .formula {

      background: #073642;

    }

5. Jika sudah selesai, klik simpan template.

Untuk Pemasangan Syntax Highlighter

1.  Untuk Pemasangan Syntax Highlighter pada Javascript

 <pre data-codetype="JavaScriptku" title="Cara Membuat Syntax Highlighter Berwarna di Blog"><code class="javascript-markup">Kode Disini</code></pre>

2. Untuk Pemasangan Syntax Highlighter pada HTML

<pre data-codetype="HTMLku" title="Cara Membuat Syntax Highlighter Berwarna di Blog"><code class="leangue-markup">Kode Disini</code></pre>

3. Untuk Pemasangan Syntax Highlighter pada CSS

<pre data-codetype="CSSku" title="Cara Membuat Syntax Highlighter Berwarna di Blog"><code class="css-markup">Kode Disini</code></pre>

4. Untuk Pemasangan Syntax Highlighter pada JQuery

<pre data-codetype="jQueryku" title="Cara Membuat Syntax Highlighter Berwarna di Blog"><code class="javascript-markup">Kode Disini</code></pre>

Cara Menerapkan Syntax Highlighter pada Postingan

    <pre><code>


    ---Kode root disini---


    </code></pre>

Baca juga:

• Cara Mudah Memasang Kolom Komentar Disqus di Blog
• Cara Membuat Kotak Pencarian (Search Box) Responsive di Blog
• Cara Menghapus dan Memasang Kotak Komentar Facebook di Blog 

Cukup sekian untuk artikel Cara Membuat Syntax Highlighter Berwarna di Blog. Semoga bermanfaat dan berguna. Jangan lupa untuk berlangganan dengan kami hanya dengan submit via electronic mail dibawah!

Bagikan Artikel ini