Berikut ini merupakan contoh sederhana nya dengan fitur responsive.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh Highlight Kode dengan Highlight.js</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('.code').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>
<style>
pre {
padding:15px;
white-space: pre-wrap; /* Memaksa kata yang panjang memecah */
word-wrap: break-word; /* Memaksa kata yang panjang memecah pada garis baru */
overflow-x: auto; /* Memunculkan scrollbar secara horizontal jika terdapat overflow pada konten */
max-width: 100%; /* Menetapkan lebar maksimum */
max-height: 600px; /* Menetapkan tinggi maksimum */
}
</style>
</head>
<body>
<pre class="code">
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
</pre>
</body>
</html>
jika kalian ingin mengganti style tampilan kode bisa dengan cara ganti css dengan url yang telah disediakan dibawah ini:
https://github.com/highlightjs/highlight.js/tree/main/src/styles