Oke sobat, kali ini ATAEH akan memberikan tips tentang cara membuat Syntax Highlighter pada blog AMP dengan mudah.
Apa sih Syntax Highlighter itu?
Syntax Highlighter adalah fitur teks editor yang mempunyai kegunaan untuk menyoroti tampilan teks (Terutama Source Code) dalam bentuk yang berwarna. Adanya Fitur Syntax Highlighter ini sangat bermanfaat untuk mempermudah penggunanya di dalam menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup atau pun sebuah kalimat penting yang ada dalam postingannya.
kira-kira beginilah bentuk tampilannya
Oke?
Mari kita lanjut pada langkah langkah pembuatan dan pemasangannya
1. Loginlah ke blog sobat, lalu ke tema dan edit HTML
2. Pasang kode CSS di bawah ini di atas </style> milik postingan/POST PAGE bukan milik hompage (supaya bisa memaksimalkan penggunaan CSS pada template AMP) atau kalau bingung taruh saja CSSnya di bawah <b:if cond='data:blog.pageType == "item" and data:blog.pageType != "error_page"'>
/* 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="ATAEH"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fd9d0d;}
3. Kemudian klik simpan tema. berarti sobat sudah membuat CSS Syntax Highlighter
Kalau sobat mau membuat Syntax Highlighter dalam artikel sobat, sobat tinggal pakai pemanggilnya saja. Ini dia pemaggil Syntax Highlighter yang sudah sobat buat tadi
Untuk tulisan CSS Syntax Highlighter dalam kode CSS di atas, sobat bisa rubah menjadi tulisan apa saja, bisa HTML, CSS, Atau JQuery ataupun judul dari apa yang sobat postingkan.
Mungkin cukup sekian dulu tutorial Cara Membuat Syntax Highlighter Pada Blog AMP Dengan Mudah dari ATAEH, semoga sobat sukses semua dalam berkarya.
Semoga ada guna dan manfaatnya artikel ini.
Kalau ada yang perlu di pertanyakan silahkan tulis komentar di bawah. :)
Oke?
Mari kita lanjut pada langkah langkah pembuatan dan pemasangannya
1. Loginlah ke blog sobat, lalu ke tema dan edit HTML
2. Pasang kode CSS di bawah ini di atas