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 instruksi yang dipakai dalam bahasa pemrograman yang mempunyai kegunaan untuk menampilkan coding dalam banyak sekali macam warna supaya sanggup memudahkan programmer untuk membaca serta menganalisis sumber instruksi 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 sanggup menarik pengunjung dengan anda yang memakai banyak sekali macam warna.

Nah eksklusif saja ini beliau Cara Membuat Syntax Highlighter Berwarna di Blog.

Cara Membuat Syntax Highlighter Berwarna di Blog

1. Pergi ke Dashboard blogger

2. Pilh sajian Temaplte > Edit HTML.

3. kemudian copy dan pastekan instruksi di bawah ini sempurna di atas instruksi </head>

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

4. Lalu copy dan pastekan instruksi dibawah ini sempurna di atas instruksi ]]></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 top #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 source disini---


    </code></pre>

Baca juga:

• Cara Praktis 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 email dibawah!

Bagikan Artikel ini