-->
MASIGNCLEAN101

Cara Membuat Syntax Highlighter Berwarna di Blog

Bantu Klik Subscribe Teman-teman!
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!
Bantu Klik Subscribe Teman-teman!
Share This :

iWasOtaku

Seorang Blogger Yang Menyukai Hal Tentang Budaya Jepang

avatar

wihh keren nih kayaknya,, patut dicoba

November 20, 2016 at 11:16 AM
avatar

kalau boleh tau ntar tampilannya kayak apa ya gan ?

November 20, 2016 at 12:01 PM
avatar
Anonymous

ada preview nya gak? biar bisa liat tampilannya gan

November 20, 2016 at 12:47 PM
avatar

Tampilan jadinya kek gimana ya gan? Bisa beri SS nya ?

November 21, 2016 at 9:44 AM
avatar

wiih jago coding ni gan, nice gan. Kalo blog ane mah seadanya hehe

November 23, 2016 at 7:29 AM
avatar

ijin nyoba dulu gan, makasih atas scriptnya

November 23, 2016 at 8:56 AM
avatar

wah info yang bagus nih gan, cocok bagi blogger pemula seperti saya yang masih belajar hehehe :)

November 23, 2016 at 8:21 PM
avatar

wah keren gan wajib dipraktekin ini buat pemula kayak saya hehehe

December 12, 2016 at 2:28 PM
avatar

Terimakasih gan sangat membantu

December 12, 2016 at 3:05 PM
avatar

Sangat bermanfaat bagi saya

December 12, 2016 at 3:43 PM
avatar

wah, ini yang ane cari. izin praktek gan, makasih udah mau share

December 12, 2016 at 5:54 PM
avatar

Masih nggak paham sama css, jadi pakai template yang gratisan. Hehe belum bisa edit juga

December 12, 2016 at 6:58 PM
avatar

mantab nih bisa warna warni (y)

December 12, 2016 at 11:01 PM
avatar
Anonymous

boleh di coba nih, oh yah bro apa ini berpengaruh pada keresponsivan blog?

December 13, 2016 at 6:16 AM
Syarat & Ketentuan Berkomentar

1. Jangan cantukan link mati maupun hidup
2. Gunakan bahasa yang dapat dimengerti
3. Jangan spam link
4. Koment yang relevan sesuai dengan topik yang di bahas
5. Jangan copy psate artikel, jika ingin dihargai maka hargailah orang