Membuat Highlight Pada Script HTML di Postingan Blog Amp

Membuat Highlight pada Script HTML di Postingan Blog Amp Artikel Kali ini saya ingin membagikan sebuah cara yang sering dilakukan oleh para Master Blogger dalam membuat kotak teks pada postingan blog/website sobat. Sebenarnya caranya cukup mudah kok ,nanti sobat tinggal mempraktekkan apa yang saya sampaikan di artikel ini. Sobat pasti pernah kan melihat sebuah postingan di blog terdapat sebuah kotak yang digunakan untuk menempatkan sebuah script ? Menyematkan kotak dalam tulisan blog terlihat rapi dan mudah untuk para pembaca untuk mengcopy. Banyak blogger menggunakan kotak kode dalam postingan untuk menaruh CSS, script HTML, Java dan sebagainya.

Oke, langsung saja kita ke tkp.

Cara Membuat Kotak Kode Script Atau HTML pada Postingan

Langkah pertama sobat buka BLOGGER >> TEMPLATE >> EDIT TEMPLATE
Kemudian copy CSS dibawah ini kemudian simpan pada style amp-custom='amp-custom dalam postingan untuk mudah mencarinya tekan CTRL + F

/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#ffffff;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#ffffff;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
code {font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}
code{color:#BC587E}
pre mark,code mark,pre code mark {background-color:#3498db;color:#fff;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#22A7F0;box-shadow:inset 0 0 0 1px #ffffff;}

Langkah Kedua Masukkan kode di bawah ini di postingan sobat dalam mode HTML untuk memanggil kode CSS nya

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">

Isi HTML sobat di sini


</pre></code>

jika ingin mengganti kotak CSS dengan yang lainnya, sobat hanya bisa menggunakan CSS HTML JavaScript JQuery Caranya ganti HTMLku dengan CSSku, JavaScriptku, JQueryku

Sebelum memasukkan kode di postinagn terlebih dulu sobat parse kode nya. jika sudah di parse, masukkan kode/script yang ingin dimasukkan di tempat kode mode HTML bukan COMPOSE

Selesai, Semoga bermanfaat.