edisini

Pre Code

Fungsi HTML pre code adalah untuk menampilkan kode html pada browser, fungsi ini berguna untuk memberi contoh tentang penulisan kode karena pada dasarnya kode html itu tersembunyi di browser dan browser hanya menampilkan hasil dari sekian banyak kode tersebut.

syntax highlighter

HighlightJs

Dari sekian banyak syntax highlighter kami memilih highlighjs karena penggunaannnya yang simpel, bisa otomatis mendeteksi bahasa yang dituliskan tanpa menambahkan atribut class, juga banyak sekali pilihan tema yang menarik.

Simpel Copy Button

Kode yang kita tulis tentu saja boleh di copy dan digunakan secara bebas karena itu memang tujuan dari penggunaan pre code. Dengan tombol copy ini memudahkan pembaca untuk menyalin kode yang berada dalam markup pre code.

HighlightJs CDN

Ada banyak sekali versi dan pilihan tema dalam cdn tersebut kita dapat memilih sesuai selera kita, silahkan pilih sendiri di https://cdnjs.com/libraries/highlight.js

Silahkan simak contoh penggunaannya di bawah ini

<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/a11y-dark.min.css"/>

Taruh kode tersebut diatas </head>, fontawesome berfungsi untuk menampilkan icon, ally-dark merupakan tema highlightjs dan bisa kita ganti sesuai selera, dalam cdn itu ada banyak sekali pilihan.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
$( '<i class="fa fa-clone kopi" aria-hidden="true"><span class="notif">copied</span></i>' ).insertAfter( 'pre > code' );
$(".kopi").click(function(){
	const copyText = $(this).closest("pre").find("code").text().trim();
	//copyText.select();
	navigator.clipboard.writeText(copyText)
          .then(() => {
			$(".notif").stop().fadeIn(1000);
			setTimeout(function(){ $(".notif").fadeOut(); }, 3000);
          })
          .catch((err) => {
            console.error('Could not copy text: ', err);
          });
});
</script>

Taruh kode tersebut di atas </body>, jquery digunakan untuk menjalankan script jquery blog.

Lalu untuk menampilkan kode yang kita tulis hanya cukup menggunakan <pre><code>Kode yang dicontohkan</code></pre> , ditulis dalam editor html mode. untuk kode HTML perlu di parse dulu agar bisa ditampilkan oleh pre seperti contoh dibawah

<pre><code>
&lt;!-- html markup --&gt;
&lt;nav&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#">Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="">About me&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="">Projects&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="">Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

Demo

Jika ada yang kurang jelas silahkan ditanyakan di kolom komentar.