Cara Membuat Tampilan Koding Kren

Jika Wordpress menggunakan plugin Crayon Syntax untuk menampilkan sytax koding agar lebih menarik kali ini saya juga akan membagikan hal yang sama namun berbeda. Untuk blogger saya menggunakan js/javascript.

1. Prism.js
Berikut cara menerapkan prism.js dan Google Prettify di Blogger Anda.

Yang anda harus lakukan adalah:
1. Masuk ke Blogger untuk menyunting template blog.
2. Tambahkan tautan ke CDN CSS prism.js dalam bagian <head> boleh juga di </head>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css"/>

3. Tambahkan tautan ke CDN javascript prism.js tepat di atas tag </body>.


<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>

4.Simpan template.

Akhirnya, agar kode dalam blog otomatis diwarnai oleh prism.js, tulis kode dengan format sebagai berikut.

<pre><code class="language-css">html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  margin: 0;
  font-family: 'Open Sans', Arial, 'NanumGothic', sans-serif;  
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  padding-top: 70px;
}
</code></pre>

Berikut hasilnya

2. Google Prettify
1. Masuk ke Blogger untuk menyunting template blog.
2. Berbeda dengan dua highlighter di atas, Google Prettify tidak memerlukan CDN untuk CSS, melainkan hanya CDN javascript.
3. Tambahkan tautan menuju CDN javascript Google Prettify tepat di atas tag </body>.


<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

4. Simpan template.

<pre class="prettyprint"><code class="language-css">html {  
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  margin: 0;
  font-family: 'Open Sans', Arial, 'NanumGothic', sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  padding-top: 70px;
}
</code></pre>

Banner

Cara Membuat Tampilan Koding Kren

0 Response to "Cara Membuat Tampilan Koding Kren"

Post a Comment