Langsung ke konten utama

Cara Menambahkan Syntax Highlighter untuk Blogger

Menambahkan syntax highlighter ke Blogger akan membuat kode Anda terlihat lebih rapi dan spesifik dengan format tertentu untuk dilihat. Anda dapat menggunakan metode ini untuk menyorot HTML, CSS, JavaScript, PHP, Python, C, C++, Java, Perl, XML, XHTML, dan banyak bahasa lainnya dengan menggunakan code-prettify.

Kenapa memilih code-prettify:
  1. code-prettify dibuat oleh Google
  2. Sangat responsif
  3. Mudah digunakan
  4. Lebih cepat dimuat
  5. Dapat mengakses beberapa tema

Cara Menambahkan Syntax Highlighter ke Blogger

1. Install Google Code Prettify Javascript :

Buka dashboard Blogger lalu klik menu Tema, kemudian pilih Edit HTML. Tambahkan kode berikut sebelum tag <body> 
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

2. Install Syntax Highlighter Theme CSS :

Selanjutnya, Anda harus menginstall Syntax Highlighter Theme CSS. Saya telah menyiapkan beberapa tema di bawah. Pilih salah satu kemudian tambahkan tepat sebelum tag </head>

Tema 1 : Default

Untuk tema di atas, salin kode di bawah ini sebelum tag </head> 
<!--Default theme-->
<style type="text/css">.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}</style>

Tema 2 : Desert by Anatoly Techtonik 

Untuk tema di atas, salin kode di bawah ini sebelum tag </head>
<!--Desert theme-->
<style type="text/css">pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

 

Tema 3 : Sunburst by David Leibovic

Untuk tema di atas, salin kode di bawah ini sebelum tag </head>
<!--SunBurst theme-->
<style type="text/css">code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#89bdff}code .lit,pre .lit{color:#3387CC}code .pln,code .pun,pre .pln,pre .pun{color:#fff}code .tag,pre .tag{color:#89bdff}code .atn,pre .atn{color:#bdb76b}code .atv,pre .atv{color:#65B042}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{background-color:#000;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style> 

 

 Tema 4 : Doxy by Robert Sperberg

Untuk tema di atas, salin kode di bawah ini sebelum tag </head>
<!--Doxy theme-->
<style type="text/css">a,code.prettyprint a,pre.prettyprint a{text-decoration:none}code .str,pre .str{color:#fec243}code .kwd,pre .kwd{color:#8470FF}code .com,pre .com{color:#32cd32;font-style:italic}code .typ,pre .typ{color:#6ecbcc}code .lit,pre .lit{color:#d06}code .pun,pre .pun{color:#8B8970}code .pln,pre .pln{color:#f0f0f0}code .tag,pre .tag{color:#9c9cff}code .htm,pre .htm{color:plum}code .xsl,pre .xsl{color:#d0a0d0}code .atn,pre .atn{color:#46eeee;font-weight:400}code .atv,pre .atv{color:#EEB4B4}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';font-weight:700;font-size:9pt;background-color:#0f0f0f;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#8B8970}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code.prettyprint,pre.prettyprint{background-color:#fff}code .str,pre .str{color:#088}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#oc3;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#b66ff7;font-weight:700}code .htm,code .xsl,pre .htm,pre .xsl{color:#606;font-weight:700}code .atn,pre .atn{color:#c71585;font-weight:400}code .atv,pre .atv{color:#088;font-weight:400}}</style>

 

 3. Gunakan Syntax Highlighter Saat Memposting

Setelah memasang salah satu dari tema di atas, salin kode berikut dan tempatkan di bagian yang ingin Anda tampilkan dalam format kode. Anda dapat melakukannya dengan cara mengaktifkan mode pengeditan HTML

Masukkan kode di bawah untuk bagian yang di sorot sesuai dengan di bawah ini.
<pre class="prettyprint"><code class="language-html">MASUKKAN KODE ANDA DI SINI</code></pre>

Kode di atas adalah untuk HTML. Jika Anda ingin menggunakan syntax highlighter untuk gaya atau bahasa tertentu, Anda harus mengganti language-HTML dengan nilai atribut yang lain sebagaimana tercantum di bawah ini.
BahasavalueAttribute
HTMLhtmllanguage-html
CSScsslanguage-css
JavaScriptjslanguage-js
XMLxmllanguage-xml
xHTMLxhtmllanguage-xhtml
Cclanguage-c
C++cpplanguage-cpp
C#cslanguage-cs
PHPphpLanguage-php
Pythonpylanguage-py
Javajavalanguage-java
Rubyrblanguage-rb
Perlperllanguage-perl
Jika Anda mendapatkan kesulitan untuk menambahkan  Google Code Prettify, silahkan tambahkan komentar di bawah. Happy Blogging! :)
Label:

Postingan populer dari blog ini

Data Crawling dan Scraping - Pengertian, Tools, dan Studi Kasus

PENGERTIAN Crawling Web Crawler adalah suatu program atau script otomat yang relatif simple, yang dengan metode tertentu melakukan scan atau “crawl” ke semua halaman-halaman internet untuk membuat index dari data yang dicarinya. Nama lain untuk web crawl adalah web spider, web robot, bot, crawl dan automatic indexer. Proses crawling dalam suatu website dimulai dari mendata seluruh url dari website, menelusurinya satu-persatu, kemudian memasukkannya dalam daftar halaman pada indeks search engine, sehingga setiap kali ada perubahan pada website, akan terupdate secara otomatis. Web crawler dirancang secara algoritmik untuk mencapai kedalaman maksimum halaman dan merayapnya secara iteratif, menggali setiap data yang ada di internet seperti seperti : meta data, keyword, dan lain sebagainya. Kemudian web crawler atau si (spider man) ini akan meng index seluruh data kita ke dalam data base search engine. Sampai pada akhirnya halaman website akan ditampilkan di SERP (search engine rage...
Baca selengkapnya

Scraping Data Twitter Menggunakan Tweepy Python

Alat dan Bahan yang dibutuhkan : 1. Api Key Twitter 2. Jupyter notebook 3. Library Tweepy Disini saya menggunakan Anaconda ( https://www.anaconda.com/products/individual ) kalian juga bisa menggunakan teks editor seperti VSCode dengan membuat file berekstensi .ipynb. Untuk cara yang lebih jelas kalian bisa cek dokumentasinya saja. Langkah-Langkah : 1. Buka jupyter notebook 2. Klik New, lalu pilih Python 3 3. Install Library Tweepy jika belum punya, tulis saja pip install tweepy kemudian Run (Ctrl+Enter). Karena saya sudah menginstallnya, maka tampilannya seperti di bawah 4. Import library yang dibutuhkan seperti yang di bawah ini import tweepy from tweepy.streaming import StreamListener from tweepy import OAuthHandler from tweepy import Stream import time import json 5. Buatlah beberapa variabel untuk menyimpan API Token Twitter, kalian bisa copy paste script di bawah dan isikan variabel sesuai dengan API Key milik kalian. access_token = "<your access token...
Baca selengkapnya

Cara Mendaftar Akun Developer Twitter

Kali ini saya akan berbagi tutorial untuk membuat akun developer twitter. Jika kalian membutuhkan api key dari twitter untuk membuat aplikasi atau keperluan penelitian, maka terlebih dahulu kalian harus mengajukan permohonan pembuatan akun developer  1. Kunjungi https://developer.twitter.com/ 2. Kemudian login dengan akun Twitter kamu 3. Setelah itu, klik menu Apply yang ada di pojok kanan atas 4. Pilih Apply for Developer Account 5. Selanjutnya, kamu akan diminta untuk mengisi beberapa hal semacam survey gitu, isikan saja sesuai keinginan kalian, kemudian klik Next 6. Kemudian kamu perlu memastikan akun yang ingin kamu gunakan, di sini kamu bisa beralih akun, membuat akun baru, atau mengganti email yang ingin kamu gunakan pada aplikasi ini. Selanjutnya di bagian bawah ada beberapa field yang perlu kamu isi, seperti negara dan nama aplikasi yang ingin kita buat, selanjutnya klik Next 7. Setelah itu ada beberapa pertanyaan yang perlu kamu jawab mengguna...
Baca selengkapnya