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:

code-prettify dibuat oleh Google
Sangat responsif
Mudah digunakan
Lebih cepat dimuat
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.

Bahasa	value	Attribute
HTML	html	language-html
CSS	css	language-css
JavaScript	js	language-js
XML	xml	language-xml
xHTML	xhtml	language-xhtml
C	c	language-c
C++	cpp	language-cpp
C#	cs	language-cs
PHP	php	Language-php
Python	py	language-py
Java	java	language-java
Ruby	rb	language-rb
Perl	perl	language-perl

Jika Anda mendapatkan kesulitan untuk menambahkan Google Code Prettify, silahkan tambahkan komentar di bawah. Happy Blogging! :)

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

Tukang Sinau

Cari Blog Ini