إنضم لنا

Membuat syntax highlight keren valid AMP





Cara membuat syntax highlight keren valid Amp

Pada kesempatan hari ini saya akan membuat tutorial cara membuat syntax highlight keren dan tentunya valid untuk amp

Kita tau bahwa amp tidak mengizinkan javascrip atau js pihak ketiga, namun untuk masalah ini saya tidak akan nyerah begitu sajah, hanya karna keterbatasan css inlin,

Dua hari yang lalu saya melihat blog asing dengan format AMP, blog tersebut membahas sebuah tutorial yang di mana blog tersebut membuat artikel cara memasang iklan pada amp,

Yang menjadi perhatian saya bukanlah tutorialnya tapi syntax higlight yang dia pake membuat saya berfikir apakah mungkin dia menggunakan javascript karna sintax highlight yang dia pake menggunakan penyorotan yang sempurna,

Dan pada saat itu juga saya mencari di google kurang lebih 8 jam waktu yang saya habiskan untuk mencari materi tersebut, alhasil saya mendapatkan cara nya,

Dan hari ini saya akan mencoba membagikan ke kalian cara caranya, namun sebelum saya memulai tutorialnya kalian lihat dulu, syintax highlight yang saya pake sebelum dan sesudah

Sebelum
#page-wrapper {
  width: 100%;
  height: auto;
  background: #FFF;
  padding: 1em;
  margin: 1em auto;
  border-top: 0px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

Sesudah
#page-wrapper {
  width: 100%;
  height: auto;
  background: #FFF;
  padding: 1em;
  margin: 1em auto;
  border-top: 0px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

Saya yakin kalian melihat sebuah perbedaan, Kalo begitu langsung sajah, yang pertama kalian simpan css di bawah ini tepat di bawah <style amp-custom="amp-custom">
#css nomor 1
pre,pre code{color:#d18023}pre{background:#f0f0f0;padding:8px 10px;overflow:auto;max-width:100%;text-align:left;margin:10px auto;border-left:3px solid #ff0000}code,pre,pre code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:normal;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}code{color:#BC587E}i.klik-url,pre{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}blockquote{font-family:Georgia,serif;color:#141924;border-left:3px solid #dedede;padding-left:8px}


#codes{
  border-bottom: 1px solid #5F5F5F;
  background-color: #34312c;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
#codes>li {
  padding: 8px 0px 8px 8px;
}
#codes>li>a {
  position: relative;
  display: block;
  padding: 3px 15px;
  border-radius: 4px;
  color: #fefdf9;
  cursor: pointer ;
}
/*Override prettify design*/
pre, code{
  white-space: pre;
  border: 0 ;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Inget kalian harus memasukan css di atas di dua tempat yaitu pada css tampilan mobile dan css tampilan dekstop kemudian css di bawah ini,
#css nomor 2
.actionscript  {font-family:monospace;color: #006; border: 0px solid #d0d0d0; background-color: #f0f0f0;line-height: 10px;}
.actionscript a:link {color: #000060;}
.actionscript a:hover {background-color: #f0f000;}
.actionscript .imp {font-weight: bold; color: red;}
.actionscript .kw1 {color: #b1b100;}
.actionscript .kw2 {color: #000000; font-weight: bold;}
.actionscript .kw3 {color: #0066CC;}
.actionscript .co1 {color: #808080; font-style: italic;}
.actionscript .co2 {color: #808080; font-style: italic;}
.actionscript .coMULTI {color: #808080; font-style: italic;}
.actionscript .es0 {color: #000099; font-weight: bold;}
.actionscript .br0 {color: #66cc66;}
.actionscript .sy0 {color: #66cc66;}
.actionscript .st0 {color: #ff0000;}
.actionscript .nu0 {color: #cc66cc;}
.actionscript .me1 {color: #006600;}
.actionscript span.xtra { display:block; }

KETERANGAN pada css nomor 2 adalah css utama namun kalian bisa menggantinya sesuai selere di sini, Kita akan memanfaatkan situs onlain kalian bisa ikuti petunjuk gambar di bawah ini supaya nanti kalian tidak bingung
PERTAMA Kalian setel seperi di gambar



KEDUA Kalian ikuti petunjuk



KE TIGA Nah pada tahap ini kalian akan melihat dua kotak code yang satu css dan yang satunya code hasil parse yang nantinya bisa kalian gunakan untuk membuat artikel



Adapun kelebihan menggunakan layanan ini adalah sebagai berikut
1. Ringan
2. Bisa mengganti style sesuai selera
3. Mudah di gunakan

Ok itu sajah semoga bermanfaat

Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail