√ Membuat Syntax Highlighter Otomatis Terbaru di Blogger / blogspot - IDETIPS.com

Membuat Syntax Highlighter Otomatis Terbaru di Blogger / blogspot

Daftar Isi

    Membuat Syntax Highlighter Otomatis Terbaru di Blogger / blogspot
    hallo teman-teman kembali lagi dengan idetips , so kali ini idetips mau berbagi bagaimana sih membuat Syntax Highlighter pada postingan blogger ? , salah satu fungsi Syntax Highlighter ini adalah untuk mempercantik code-code yang anda share di postingan anda , jadi warna warni gitu , untuk demo-nya klik saja link dibawah ini .

    lihat pada bagian bawah postingan

    Syntax Highlighter yaitu suatu code yang kita gunakan di blog atau web kita yang nantinya akan membuat code yang kita post menjadi berwarna - warni . biasanya Syntax Highlighter digunakan oleh web yang membagikan tutorial coding sehingga jika blog tersebut memuat atau meletakkan seperti code css , html , javascript nantinya warna dari code itu akan berwarna - warni . jika kalian biasa menggunakan text editor mungkin sudah sering melihat hal seperti ini .

    Pengunaan umum Syntax Highlighter adalah untuk mempercantik barisan kode yang ada pada postingan web , tapi ada efek lainya yang bagus juga dalam pengunaan Syntax Highlighter ini , salah satunya adalah pengujung blog kita jadi mudah untuk membaca dan mengetahui jenis code yang ada , pengunjung merasa nyaman saat membaca postingan kita dan membuat website kita menjadi lebih professional .

    untuk itu disarankan sekali Syntax Highlighter ini digunakan untuk blogger yang memuat niche tentang tutorial yang menyajikan banyak code - code pemprograman . untuk Syntax Highlighter yang kita gunakan di blogger ini adalah sebagai pengganti blockquote , karena jika kita menggunakan blockquote untuk barisan kode , tidak ada perubahan warna pada code yang kita posting , jadi kurang menarik menurut saya .

    Cara memasang Syntax Highlighter di blogger / blogspot

    Step /Langkah 1 :

    silahkan login ke blogger anda , klik "tema" pada sidebar dan klik "edit html" .
    cari code </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
    gunakan CTRL + F untuk mempermudah pencarian .
    letakkan kode dibawah ini tepat diatasnya .

    <script type='text/javascript'>
    //<![CDATA[
    function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) };loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/googlecode.min.css");
    //]]>
    </script>

    Perhatian :

    pada potongan code diatas yang saya tandai dengan background kuning adalah style highlight.js , disini saya menggunakan googlecode , jadi anda bisa ganti sesuai yang anda suka silahkan CEK DISINI untuk yang lainnya .

    contoh : saya merubah googlecode.min.css dengan github-gist.min.css

    Step /Langkah 2 :

    Selanjutnya cari code </body> atau &lt;!--</body>--&gt;&lt;/body&gt; (gunakan CTRL + F untuk mempermudah ) letakkan code dibawah ini tepat diatasnya .

    <b:if cond='data:view.isPost'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
    //]]>
    </script>
    </b:if>

    Step /Langkah 3 :

    untuk langkah ke 3 ini hanya mengantisipasi saja , supaya saat JavaScript dan highlight.js yang kita pasang tadi belum terload , code pada postingan kita tidak berantakan .
    letakkan code dibawah ini tepat diatas code </style>

    /* Highlight CSS */
    code,pre,pre code{font-family:Consolas,Monaco,'Andale Mono',monospace;word-spacing:normal;font-size:14px;line-height:1.3em;}
    pre code{padding:20px!important;margin:20px auto 50px;background-color:#fff!important;box-shadow:0 9px 19px 7px rgba(0,0,0,.04),0 10px 17px -2px rgba(0,0,0,.070);border-top:1px solid rgba(0,0,0,0.02);}
    .post-body code{color:#e20d58}

    jika sudah silahkan simpan tema .

    Pengunaan Syntax Highlighter pada postingan blogger .

    untuk mengunakan syntax highlighter tadi silahkan buat postingan baru / buka postingan lama dan tambahkan code dibawah ini , pastikan anda menambahkanya pada mode HTML bukan compose


    <pre><code>
    Kode JavaScript, jQuery atau CSS masukkan disini
    </pre></code>

    bisa juga anda gunakan syntax highlighter pada comentar blogger , tinggal copy paste saja code dibawah ini :
    <i rel="pre"> kode disini </i>

    jadi seperti itulah tutorial Membuat Syntax Highlighter Otomatis Terbaru di Blogger / blogspot , semoga bisa dimengerti , jika kurang paham silahkan tinggalkan commentar , thanks
    Tambahkan CommentarHide

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel