Cara Membuat CodeBox Menggunakan Pre Tag

Apa itu CodeBox Dan Tag Pre? Code Box adalah fitur untuk mengembed cuplikan code HTML, CSS, JS, Dan JQuery di halaman web / blog. Sedangkan pre tag atau <pre> code adalah tag html yang umum digunakan sebagai frame embed code (css, js, html dan jquery). Sebagai contoh lihah demo codebox pada gambar di bawah ini:

Langkah-langkah Membuat Code Box

<pre>

</pre>

[ads id="ads1"] Basically, tag pre atau <pre> code memiliki stylesheet sendiri yang disebut dengan user agent stylesheet atau css bawaan pada tag pre yaitu:

pre {

    display: block;

    font-family: monospace;

    white-space: pre;

    margin: 1em 0px;

}

Jadi, untuk membuat codebox yang ramah kamu perlu menambahkan style tambahan pada tag pre misalnya style background color, border dan padding seperti berikut:

pre {

    background-color: rgba(155,155,155,0.1);

    border: 1px solid rgba(155,155,155,0.3);

    padding: 10px;

}

Untuk meng-embed mini code (css, js, html dan jquery dalam size kecil), codebox itu sudah cukup, tetapi jika kamu ingin mengembed code yang lebih besar perlu ditambahkan scroller (horizontal scrollbar) agar code di dalam codebox tidak seperti terpotong.

Sebelum menambahkan css horizontal scrollbar pada codebox, aturan css width:100%; pada tag <pre> perlu ditambahkan juga, tujuannya agar scrollbar dan codebox responsive satu sama lain. Jika situs web / blog sudah memiliki style body responsive nilai width:100% tidak perlu ditambahkan.

Menambahkan Horizontal Scrollbar Pada CodeBox

pre {

width:100%;

overflow-x: scroll;

}

Dan untuk memodifikasi crollbar (horizontal scrollbar) pada codebox gunakan css selector scrollbar berikut ini:

pre::-webkit-scrollbar {height:8px}

pre::-webkit-scrollbar-thumb{border-radius:10px;background-color:#4f4f4f}

pre::-webkit-scrollbar-track{box-shadow:inset 0 0 5px grey;border-radius:10px;}

Selesai, Langkah-langkah diatas hanya untuk pemahaman saja bagi viewers cordialblogger.com yang masih sangat baru di dunia codding. Dibawah ini saya telah menyiapkan code codebox yang siap pasang.

HTML CODEBOX (Pre Tag)

<pre class="code-box">

    /* YOUR CODE HERE  (HTML, CSS, JS, Dan JQuery) */

</pre>

CSS CODEBOX

pre{width:100%;background-color:rgba(155,155,155,0.1);padding:10px;border:1px solid rgba(155,155,155,0.3);border-radius:2px;overflow-x:scroll;}

pre::-webkit-scrollbar {height:8px}

pre::-webkit-scrollbar-thumb{border-radius:10px;background-color:#4f4f4f}

pre::-webkit-scrollbar-track{box-shadow:inset 0 0 5px grey;border-radius:10px;}

Cara Memasang Codebox

1. Copy css codebox, kemudian
2. Tambahkan ke stylesheet web anda.
3. Untuk pengguna blogger, tambahkan css codebox tepat diatas kode ]]></b:skin>

Petunjuk Penggunaan

1. Embed code (css, js, html dan jquery) dengan tag pre (codebox) melalui mode html.
2. Untuk meng-embed kode html parse kode html sebelum di embed dengan codebox.
3. Embed css, js dan jquery tidak perlu diparse, tetapi
4. Jika kode menggunakan tag <style> atau tag <script>, tag harus diparse terlebih dahulu.
5. Js yang mengandung tag html harus dipasre terlebih dahulu sebelum di embed dengan codebox.

Ringkasnya untuk mengembed kode css, js, html dan jquery menggunakan codebox semua tag chevron-left < dan chevron-right > harus diubah atau diparse menjadi &lt; dan &gt; seperti terlihat pada contoh berikut.

Spesifikasi CodeBox

Specification	Availability
Responsive	True
Mobile Friendly	True
Ringan (Fast Loading)	True
Design Simple Dan Mengesankan (Awesome CodeBox)	True