Menambah Syntax Highlighter Support AMP Pada Blogger

Pembahasan kita dalam blog tips berikut ini mengenai syntax highlighter yang valid AMP HTML. Pembahasan yang menginformasikan bagaimana menambah syntax highlighter pada blog non AMP HTML sudah banyak beredar di internet.

Karena trend AMP mulai diadopsi oleh beberapa website, tidak terkecuali website yang membahas tentang tutorial pemrograman.

Seperti yang kita ketahui bahwa Syntax Highlighter adalah fitur teks kode yang menampilkan warna yang berbeda pada masing-masing kode . Dari namanya, tentu fitur ini sangat disarankan bagi blog atau website yang membahas programming  dan menyajikan kode program, sehingga dengan menggunakan syntax highlighter para pembaca nyaman untuk membacanya.

Salah satu syntax highlighter yang free dan umum digunakan oleh para blogger adalah Prismjs. Karena disini kita mengingikan blog atau web yang ditambahkan syntax highlighter support AMP atau valid AMP, maka ada ketentuan-ketentuan yang harus kita ikuti. Kita ingat bahwa dalam AMP HTML, kita dilarang menggunakan librari pihak ketiga dan juga tidak diperkenankan menggunakan CSS Inline.

Langkah-langkah Menambah Syntax Highlighter Support AMP

Disini kita mengasumsikan bahwa telah memiliki template AMP HTML untuk blogspot. Dalam percobaan ini, template blog AMP HTML yang digunakan adalah hasil kreasi dari Kang Adhy, silahkan download templatenya di Kompi Design Blogger Template With Google AMP.

Kita akan menambahkan kode css syntax highlighter pada kode template, cari kode kondisional :

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<style amp-custom='amp-custom'>
/*<![CDATA[*/

Kode diatas adalah bagian tag kondisional untuk halaman posting versi dekstop. Kemudian tambahkan kode css berikut dibawah  /*<![CDATA[*/ :

code[class*="language-"],
pre[class*="language-"] {
 color: #f8f8f2;
 background: none;
 text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 text-align: left;
 white-space: pre;
 word-spacing: normal;
 word-break: normal;
 word-wrap: normal;
 line-height: 1.5;

 -moz-tab-size: 4;
 -o-tab-size: 4;
 tab-size: 4;

 -webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
 padding: 1em;
 margin: .5em 0;
 overflow: auto;
 border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
 background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
 padding: .1em;
 border-radius: .3em;
 white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
 color: slategray;
}

.token.punctuation {
 color: #f8f8f2;
}

.namespace {
 opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
 color: #f92672;
}

.token.boolean,
.token.number {
 color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
 color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
 color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function {
 color: #e6db74;
}

.token.keyword {
 color: #66d9ef;
}

.token.regex,
.token.important {
 color: #fd971f;
}

.token.important,
.token.bold {
 font-weight: bold;
}
.token.italic {
 font-style: italic;
}

.token.entity {
 cursor: help;
}

Kemudian tambahkan juga kode css diatas pada tag kondisional halaman posting untuk mobile. Halaman tag kondisional posting mobile adalah :

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<style amp-custom='amp-custom'>
/*<![CDATA[*/

Setelah menambahkan semua kode css pada bagian posting dekstop dan mobile, silahkan disave templatenya.

Contoh menambahkan kode progam syntax highlighter pada blog

Setelah kita mempersiapkan template  untuk mendukung syntax highlighter yang valid AMP HTML. Langkah kita berikutnya adalah menambah contoh program pada blog agar terbentuk syntax highlighter yang support AMP HTML.

Buka halaman web PRIMJS, kemudian paste-kan kode program, jika menggunakan Chrome sebagai browser, maka klik kanan lalu pilih inspect seperti gambar dibawah ini :

Pada bagian blok pre class, klik kanan lalu pilih Edit as HTML, kemudian copy semua kode dalam mode tersebut (mode Edit as HTML). Hasil dari proses copy dalam mode tersebut lalu paste-kan pada halaman posting yang mau anda buat, jangan lupa paste-kan pada mode HTML di blog anda. Dengan demikian maka syntax highlighter anda akan support AMP HTML.