Apakah Anda sering berbagi kode di blog Anda? Jika ya, maka Anda pasti menginginkan tampilan kode yang rapi dan profesional, sehingga terlihat lebih elegan. Sebagai preview-nya Anda bisa melihat kotak script yang saya gunakan. Pada tutorial kali ini, kita akan belajar cara membuat kotak script tersebut yang mana di dalamnya sudah dilengkapi beberapa fitur, yaitu : Title Bar, Tombol Copy, Scroll Bar, dan Number Line. Selain itu yang utamanya adalah ditambahkan juga fitur syntax highlighting menggunakan pustaka Prism.js. Dengan cara-cara yang akan dijelaskan sebagai berikut, kita akan dapat menampilkan kode dengan lebih menarik di blog Blogger. Mari kita mulai!
Mengapa Menggunakan Syntax Highlighting ?
Syntax highlighting membantu meningkatkan keterbacaan kode dengan memberi warna berbeda pada elemen kode seperti kata kunci, variabel, dan komentar. Ini tidak hanya membuat kode lebih enak dilihat tetapi juga membantu pembaca memahami kode dengan lebih mudah.
Langkah 1: Menambahkan CSS dan JavaScript Prism.js ke Template Blog
Untuk memulai, kita perlu menambahkan Fungsi CSS dan JavaScript Prism.js ke
dalam template blog kita. Ini akan memungkinkan kita untuk menerapkan syntax
highlighting pada kotak script.
1. Masuk ke dasbor Blogger Anda.
2. Pergi ke menu "Tema" dan klik "Edit HTML".
3. Di dalam tag <head>,
tambahkan tautan ke file CSS dan JavaScript Prism.js berikut:
<!-- Prism.js CSS -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
<!-- Prism.js JavaScript -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js'></script>
<!-- Pustaka Bahasa Pemrograman -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-clike.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-pascal.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-asm6502.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-basic.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js'></script>
<!--Menambahkan CSS Kustom untuk Kotak Script. Kita perlu menambahkan gaya CSS untuk kotak script agar terlihat rapi dan profesional.-->
<style>
.code-container {
border: 1px solid #ccc;
border-radius: 5px;
margin: 20px 0;
overflow: hidden;
position: relative;
background-color: #2d2d2d;
}
.code-title {
background-color: #333;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.code-title .code-language {
font-weight: bold;
}
.copy-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
.copy-btn:hover {
background-color: #45a049;
}
.code-content {
padding: 15px;
overflow-x: auto; /* Fitur scrollbar horizontal */
overflow-y: auto; /* Fitur scrollbar vertikal */
white-space: pre;
position: relative;
background-color: #2d2d2d;
color: #f8f8f2;
max-height: 500px; /* Tambahkan ini untuk membatasi tinggi maksimal dan memaksa scrollbar vertikal muncul jika konten melebihi tinggi ini */
}
pre.line-numbers {
position: relative;
padding-left: 4.5em;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
}
.line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: 0;
width: 4em;
letter-spacing: -1px;
border-right: 1px solid #999;
user-select: none;
}
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.5em;
text-align: right;
}
.copy-notification {
display: none;
position: absolute;
top: 10px;
right: 10px;
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border-radius: 3px;
}
</style>
<!--Menambahkan Fungsi JavaScript untuk Tombol Copy
Agar tombol copy pada kotak script berfungsi, kita perlu menambahkan sedikit JavaScript. JavaScript ini akan menyalin konten kode ke clipboard dan menampilkan notifikasi singkat.-->
<script>
document.addEventListener("DOMContentLoaded", function() {
Prism.highlightAll();
});
function copyCode(button) {
const codeContainer = button.closest('.code-container');
const codeContent = codeContainer.querySelector('.code-content code').innerText;
const notification = codeContainer.querySelector('.copy-notification');
navigator.clipboard.writeText(codeContent).then(() => {
notification.style.display = 'block';
setTimeout(() => {
notification.style.display = 'none';
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
}
</script>
Langkah 2: Menambahkan Kotak Script ke Postingan Blog
Sekarang kita siap untuk menambahkan kode HTML kotak script ke dalam postingan
blog. Gunakan mode editor HTML di postingan Blogger untuk menyisipkan kode berikut di tempat
yang Anda inginkan dalam postingan Anda. Berikut ada 11 contoh untuk berbagai bahasa pemrograman, pilih dan sesuaikan dengan kode pemrograman yang akan ditampilkan :
1. Contoh Kotak Script untuk Bahasa C-like :
<!-- Pemanggilan Fungsi Kotak Script untuk Bahasa C-like -->
<div class="code-container">
<div class="code-title">
<span class="code-language">C-like</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-clike">
int main() {
printf("Hello, World!");
return 0;
}
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
<----------------------------------------------------------->
2. Contoh Kotak Script untuk Bahasa C :
<!-- Kotak Script untuk Bahasa C -->
<div class="code-container">
<div class="code-title">
<span class="code-language">C</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-c">
#include <stdio.h>
int main() {
printf("Hello, World!");
return 0;
}
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
3. Contoh Kotak Script untuk Bahasa C++ :
<!-- Kotak Script untuk Bahasa C++ -->
<div class="code-container">
<div class="code-title">
<span class="code-language">C++</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-cpp">
#include <iostream>
int main() {
std::cout << "Hello, World!" << std::endl;
return 0;
}
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
4. Contoh Kotak Script untuk Bahasa Python :
<!-- Kotak Script untuk Bahasa Python -->
<div class="code-container">
<div class="code-title">
<span class="code-language">Python</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-python">
print("Hello, World!")
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
5. Contoh Kotak Script untuk Bahasa JavaScript :
<!-- Kotak Script untuk Bahasa JavaScript -->
<div class="code-container">
<div class="code-title">
<span class="code-language">JavaScript</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-javascript">
console.log("Hello, World!");
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
<!-- Kotak Script untuk Bahasa Java -->
<div class="code-container">
<div class="code-title">
<span class="code-language">Java</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-java">
public class Main {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
7. Contoh Kotak Script untuk Bahasa Pascal :
<!-- Kotak Script untuk Bahasa Pascal -->
<div class="code-container">
<div class="code-title">
<span class="code-language">Pascal</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-pascal">
program HelloWorld;
begin
writeln('Hello, World!');
end.
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
8. Contoh Kotak Script untuk Bahasa Assembly 6502 :
<!-- Kotak Script untuk Bahasa Assembly 6502 -->
<div class="code-container">
<div class="code-title">
<span class="code-language">Assembly 6502</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-asm6502">
; Hello World in 6502 Assembly
*=$0801
LDX #$00
TXA
LDA #$21
JSR $FFD2
RTS
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
9. Contoh Kotak Script untuk Bahasa Basic :
<!-- Kotak Script untuk Bahasa Basic -->
<div class="code-container">
<div class="code-title">
<span class="code-language">Basic</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-basic">
10 PRINT "Hello, World!"
20 END
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
10. Contoh Kotak Script untuk Bahasa HTML :
<!-- Kotak Script untuk Bahasa HTML -->
<div class="code-container">
<div class="code-title">
<span class="code-language">HTML</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-markup">
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
11. Contoh Kotak Script untuk Bahasa CSS :
<!-- Kotak Script untuk Bahasa CSS -->
<div class="code-container">
<div class="code-title">
<span class="code-language">CSS</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-content line-numbers"><code class="language-css">
body {
background-color: #f0f0f0;
color: #333;
font-family: Arial, sans-serif;
}
h1 {
color: #0056b3;
}
</code></pre>
<div class="copy-notification">Code copied!</div>
</div>
Kesimpulan
Dengan mengikuti langkah-langkah di atas, kita dapat membuat
kotak script yang menarik dan fungsional di blog Blogger. Kotak Script atau Code Block tidak hanya
akan membuat tampilan kode lebih rapi tetapi juga memudahkan pembaca dalam
memahami dan menyalin kode yang Anda bagikan.
Demikian langkah-langkah cara membuat Kotak Script atau Code Block dengan fitur Highlighting dan tampilan elegan di Blogger. Silakan tinggalkan komentar jika ada yang kurang jelas. Selamat mencoba dan semoga sukses!
Tidak ada komentar:
Posting Komentar