Cara Membuat Syntax Highlighter Berwarna di Blog

Cara Membuat 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 adalah sebuah kode yang digunakan dalam bahasa pemrograman yang berguna untuk menampilkan coding dalam berbagai macam warna agar dapat memudahkan programmer untuk membaca serta menganalisis sumber kode 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 dapat 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 menu Temaplte > Edit HTML.
3. lalu copy dan pastekan kode di bawah ini tepat di atas kode </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 kode dibawah ini tepat di atas kode ]]></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="JavaScript"><code class="javascript-markup">Kode Disini</code></pre>

2. Untuk Pemasangan Syntax Highlighter pada HTML

<pre data-codetype="HTMLku" title="HTML"><code class="leangue-markup">Kode Disini</code></pre>

3. Untuk Pemasangan Syntax Highlighter pada CSS

<pre data-codetype="CSSku" title="CSS"><code class="css-markup">Kode Disini</code></pre>

4. Untuk Pemasangan Syntax Highlighter pada JQuery

<pre data-codetype="jQueryku" title="jQuery"><code class="javascript-markup">Kode Disini</code></pre>

Cara Menerapkan Syntax Highlighter pada Postingan

    <pre><code>


    ---Kode source disini---


    </code></pre>


Baca juga:

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!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel