Cara Membuat Syntax Highlighter di Blog dengan Mudah

Simulasi Vector Syntax Highlighter

Syntax Highlighter sering dikenal sebagai editor teks yang sering digunakan dalam bahasa pemrograman, scripting, atau bahasa markup, seperti HTML.

Syntax Highlighter adalah suatu bentuk notasi sekunder, karena highlights bukan bagian dari makna teks, tetapi berfungsi untuk memperkuatnya.

Beberapa editor juga mengintegrasikan sebagai syntax highlighting dengan fitur-fitur lain, seperti pemeriksa ejaan atau pelipatan kode, sebagai alat bantu penyuntingan yang bersifat eksternal dari bahasa tersebut.

Sebagian besar editor dengan menggunakan syntax highlighter akan melihat warna dan gaya teks yang berbeda untuk diberikan ke lusinan sub-elemen sintaksis yang berbeda.

Ini termasuk kata kunci, komentar, statements aliran kontrol, variabel, dan elemen lainnya. Pemrogram sering menyesuaikan pengaturan mereka sendiri dalam upaya untuk menunjukkan sebanyak mungkin informasi bermanfaat tanpa membuat kode sulit untuk dibaca.

Contohnya seperti pada gambar dibawah ini:

contoh kode yang memiliki syntax dan standard
Sumber Gambar: https://en.wikipedia.org/wiki/Syntax_highlighting

Dan bagi kalian yang tertarik untuk membuat syntax highlighter di blog kalian terkhusus pengguna blogger, silahkan ikuti langkah-langkahnya sedetail mungkin di bawah ini:

Memasang Syntax Highlighter di Blogger


  1. Pastikan kalian sudah berada di dalam blog kalian, terutama di Blogger.com
  2. Kunjungi Panel Tema > Edit HTML
  3. dasbor tema blogger
  4. Masukkan kode css berikut di atas kode ]]></b:skin> atau bisa juga di dalam markup </style>
  5. /* Syntax Highlighter */
    pre {
        padding:.8em 1em;
        margin:0.5em 0;
        background-color:#F7F7F9;
        border:1px solid #ddd;
        font-size:13px;
        color:#000;
        font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
        line-height:1.4em;
        position:relative;
        white-space:pre-wrap;
        word-wrap:break-word;
        overflow:auto;
        max-height:300px;
    }
    code {
        font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
        font-size:13px;
        color:#d14;
    }
    pre code {
        padding:0!important;
        color:#839496;
        background:none!important;
        border:none!important;
        display:block;
    }
    pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc {
        color:#93a1a1;
        font-style:italic;
    }
    pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title {
        color:#F5821E;
    }
    pre .number, pre .command, pre .string, pre .tag .value, pre .rules .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
        color:#008800;
    }
    pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl .literal, pre .id, pre .css .function {
        color:#268bd2;
    }
    pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type {
        color:#A2886F;
    }
    pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title, pre .css .pseudo {
        color:#000;
        font-weight:bold;
    }
    pre .deletion {
        color:#dc322f;
    }
    pre .tex .formula {
        background:#eee8d5;
    }
    .hljs {
        display:block;
        overflow-x:auto;
        padding:0.5em;
        background:white;
        color:black;
    }
    .hljs-comment, .hljs-quote {
        color:#800;
    }
    .hljs-keyword, .hljs-selector-tag, .hljs-section, .hljs-title, .hljs-name {
        color:#008;
    }
    .hljs-variable, .hljs-template-variable {
        color:#660;
    }
    .hljs-string, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-regexp {
        color:#080;
    }
    .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-meta, .hljs-number, .hljs-link {
        color:#066;
    }
    .hljs-title, .hljs-doctag, .hljs-type, .hljs-attr, .hljs-built_in, .hljs-builtin-name, .hljs-params {
        color:#606;
    }
    .hljs-attribute, .hljs-subst {
        color:#000;
    }
    .hljs-formula {
        background-color:#eee;
        font-style:italic;
    }
    .hljs-selector-id, .hljs-selector-class {
        color:#9B703F;
    }
    .hljs-addition {
        background-color:#baeeba;
    }
    .hljs-deletion {
        background-color:#ffc8bd;
    }
    .hljs-doctag, .hljs-strong {
        font-weight:bold;
    }
    .hljs-emphasis {
        font-style:italic;
    }
  6. Sekarang kita tinggal menambahkan javascript dibawah ini di atas kode </head>
  7. <!-- Syntax Highlighter Start -->
    <script src='//cdn.staticaly.com/gh/jarsumdotcom/javascript/92cfded4/syntax-highlighter-jarsum.js'/>
    <script>hljs.initHighlightingOnLoad();</script>
    <!-- Syntax Highlighter Enda -->
  8. Setelah semua selesai, kalian tinggal klik Simpan tema untuk menyelesaikan prosesnya

Untuk melihat tampilannya sendiri kalian mengenceknya dengan menekan tombol dibawah ini.

Demo

Cara Menggunakannya


Untuk penerapannya sendiri di dalam blog cukup mudah.

Ketika kalian sedang membuat artikel baru dan telah memiliki kode script dan ingin menggunakan tersebut agar terlihat lebih baik dengan menggunakan syntax highlighter, caranya yaitu:

  1. Saya anggap kalian sudah berada di area postingan
  2. Lalu masuk ke bagian HTML bukan Compose
  3. Agar prosesnya berjalan dengan semesinya, pastikan kalian memilih tab HTML seperti yang ditunjuk pada bagian tanda panah pada gambar dibawah ini
    panel artikel baru
  4. Ketikkan <pre><code> Kode Scriptnya disini </code></pre>
  5. Contohnya sendiri, saya buat seperti pada gambar dibawah ini
  6. contoh tampilan membuat syntax di artikel

Pastikan kode tersebut telah di parse agar apa yang di harapkan dapat berjalan sesuai dengan rencana, jika kalian tidak tahu ingin memparsenya dimana silahkan klik disini.

Jika menggunakan kode css atau javascript kalian tidak perlu melakukan parse, tapi pastikan kode tersebut tidak memiliki atribut & ' " < >.

Mungkin begitu saja penyampaian artikel mengenai cara membuat syntax highlighter di blogger, kurang dan lebihnya mohon dimaafkan. Dan untuk kalian yang sedang menerapkannya selamat mencoba dan semoga bermanfaat.