GagakTekno

Cara Memasang Highlighter Syntak di Blog

Apa itu Syntax ? Syntax adalah aturan menulis ‘kalimat’ agar mampu dimengerti dengan benar oleh bahasa pemrograman. Aturan syntax ini secara baku harus dipenuhi, karena saat proses compilasi setiap baris script akan di-check dan dipastikan apakah Compiler benar2 mengerti maksud kalimat atau tidak. Jika terdapat syntax yang salah maka compiler akan melaporkan kalo ada bagian kalimat yang dia tidak paham atau mengerti atau istilahnya “error message” dan maka tidak akan meneruskan membuat bytecode-nya.

Dikutip dari Wikipedia:

Dalam linguistik, sintaksis adalah seperangkat aturan, prinsip, dan proses yang mengatur struktur kalimat dalam bahasa tertentu, khususnya tatanan kata dan tanda baca. Istilah sintaks juga digunakan untuk merujuk pada studi tentang prinsip dan proses seperti itu. [3] Tujuan dari banyak syntacticians adalah menemukan aturan sintaksis yang umum untuk semua bahasa.

Dalam matematika, sintaks mengacu pada peraturan yang mengatur perilaku sistem matematika, seperti bahasa formal yang digunakan dalam logika. (Lihat sintaks logis.)

Sebagai contoh syntax adalah:
– Untuk menulis isi (css) suatu kelas harus di awali dengan { dan diakhir dengan }

Nah, itulah "Pengertian Syntax Pada Bahasa Pemrograman" jadi fungsi dari Syntax untuk blog dapat dimengerti menjadi susunan yang rapih tidak acak-acakan. Jika sobat membuat blog Tutorial pasti sobat akan membuat sebuah Highlighter Syntak untuk blog agar tersusun dengan rapih dan tidak terlihat acak-acakan.

Contoh Syntak di Blog :

<b:if cond='data:post.labels'>
                  <i class='fa fa-folder-open'/> 
                  <b:loop values='data:post.labels' index='i' var='label'>
     <b:if cond='data:i == 0'>
                     <a expr:href='data:label.url + &quot;?&amp;amp;max-results=6&quot;' rel='tag'>
                        <data:label.name/>
                     </a>
                    </b:if>
                     <b:if cond='data:label.isLast'></b:if>
                  </b:loop>
                  &amp;nbsp;&amp;nbsp;
               </b:if>
           </b:if>
         </div>
      </b:if>

Syntak diatas adalah kode HTML tentu saja harus beraturan saat membuat kode tersebut karena bila tidak beraturan kode tersebut pastinya akan Error atau tidak jalan. Maka syntak diblog itu untuk membuat tampilan menjadi lebih tersusun rapih dan tidak acak-acakan. Mungkin ini sudah banyak digunakan untuk blog yang berniche Tutorial Blogger karena kebanyakan pada sebuah post/artikel akan ada selalu yang namanya Syntax.

Lanjut ke pembahasan lalu bagaimana untuk memasang Syntax Highlighter di blog? tentu saja ada caranya yaitu dengan menggunakan CSS dan Javascript. Disini saya akan membagikan Syntax bewarna yang mungkin bisa membuat sobat lebih tertarik dengan Syntax ini. Dan berikut cara untuk memasangnya :

Cara Memasang Highlighter Syntak di Blog


  1. Sobat masuk dulu keblognya masing-masing
  2. Klik Tema > Edit HTML > lalu sobat cari kode </style> or </b:skin>
  3. Copy kode CSS dibawah ini dan pastekan tepat diatas kode </style> or </b:skin>
  4. .post-content pre {-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
    .post-content pre{margin:0;padding:0;background:none}.hljs{display:block!important;overflow-x:auto!important;background:#333!important;color:white!important;padding:25px 0 25px 25px!important}.hljs-name,.hljs-strong{font-weight:bold!important}.hljs-code,.hljs-emphasis{font-style:italic!important}.hljs-tag{color:#62c8f3!important}.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc!important}.hljs-string,.hljs-bullet{color:#a2fca2!important}.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa!important}.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363!important}.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c!important}.hljs-comment,.hljs-deletion,.hljs-code{color:#888!important}.hljs-regexp,.hljs-link{color:#c6b4f0!important}.hljs-meta{color:#fc9b9b!important}.hljs-deletion{background-color:#fc9b9b!important;color:#333!important}.hljs-addition{background-color:#a2fca2!important;color:#333!important}.hljs a{color:inherit!important}.hljs a:focus,.hljs a:hover{color:inherit!important;text-decoration:underline!important}
  5. Sobat cari kode </head> dan copy kode javascript dibawah ini dan paste tepat diatasnya
  6. <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js'></script>
    <script type='text/javascript'>hljs.initHighlightingOnLoad();</script>
  7. Selesai

Nah untuk melakukan penerapan Syntax diblog sobat harus menaruh kodenya disaat sedang membuat post pada mode HTML bukan Compose untuk lebih jelasnya sobat lihat gambar dibawah ini :


Sedangkan untuk memasukan kode scriptnya sobat di lakukan pada mode Compose karena script yang dimasukan harus diparse terlebih dahulu bila sobat dilakukan pada mode HTML jadi untuk memasukan kode Syntax sobat hanya perlu di mode HTML dan untuk memasukan script pada mode Compose.
Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR