Membuat kode pada website atau blog kalian menjadi berwarna 0 Discussion
Sintaks Highlight

Mungkin banyak dari kalian yang bertanya – tanya bagaimana sih caranya agar kode di website atau blog kita itu menjadi berwarna. Tujuan sebenarnya mewarnai kode tersebut adalah agar pengunjung atau visitor website atau blog kita itu bisa membedakan dengan jelas kode yang kita tulis tersebut. Untuk lebih jelasnya, berikut contoh sebuah blok kode CSS yang saya buat dan telah memiliki warna.

body {
    font-family: 'OpenSans', sans-serif;
    color: #555;
    line-height: 1.5;
    width: 100%;
}
.flat-box {
    width: 300px;
    height: 300px;
    background: #fff;
    box-shadow: 2px 5px 30px 0 rgba(52,86,190,0.1);
}

Banyak orang yang awalnya berpikir bahwa kamu harus secara manual mewarnai semua elemen tersebut, atau secara manual memisahkan setiap karakter yang memiliki warna yang berbeda. Padahal sebenarnya sangat jauh lebih mudah dan lebih sederhana daripada itu. Ada beberapa cara untuk mewarnai kode kalian, namun untuk lebih mudahnya disini saya akan membahasnya dengan menggunakan library javascript highlight.js dan satu lagi menggunakan Github Gist

1. Highlight.js

Highlight.js merupakan plugin atau librari javascript yang open source, kamu dapat mendownloadnya pada situs resminya disini. Persyaratan untuk mewarnai kode kalian menggunakan plugin ini adalah kalian harus menyematkan 2 tag atau elemen, yang pertama adalah tag <link> -> untuk tampilan / warna kode kalian dan yang kedua adalah tag <script> untuk menyematkan librari javascript (highlight dan jquery) serta memanggil fungsi pada highlight.js. Berikut contoh full kode kode :

<!DOCTYPE html>
<html>
<head>
    <title>Highlight</title>
    <link class="link" href="styles/default.css" rel="stylesheet" type="text/css" />
</head>
<body>

<pre class="output">
    <code class="html">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
        quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat.
    </code>
</pre>
<script src="highlight.pack.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

</body>
</html>

Berikut ini live code dari highlight.js, kalian dapat memilih jenis warna huruf dan background sesuai tema yang tersedia.

2. Github Gist

Cara yang kedua merupakan cara yang termudah bagi kalian untuk menyematkan kode kedalam website ataupun blog kalian yang mana kode tersebut telah kalian buat pada github. Sebenarnya kalian juga dapat membuat plugin atau librari javascript kalian sendiri. Yang harus kalian pelajari untuk membuatnya adalah kalian harus memahami regular expression dan juga manipulasi string pada javascript.

Tags: CSSgithubhtmlJavaScriptjquerysintakshighlight

Search

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *