Apa Fungsi Syntax Highlighter ? Banyak fungsi yang terdapat dalam syntax highlighter ini salah satunya yaitu untuk memberi warna yang berbeda kepada setiap kode dalam bahasa pemrograman ataupun markup, dengan warna yang berbeda di setiap kategori kode terebut maka manusia akan lebih mudah membacanya itulah fungsi syntax highlighter yang paling utama, fungsi yang lainnya untuk mempercantik tampilan kode atau blockquote dalam blog juga bisa.
Bagaimana Cara Membuat Syntax Highlighter di Blog ? Pada kesempatan kali ini blog Ficri Pebriyana akan menjelaskan bagaimana cara membuat syntax highlighter pada blog, untuk memasang syntax highlighter di blog apakah blog Anda membagikan seputar tutorial blog yang setiap artikelnya membagikan kode pemrograman seperti kode CSS, HTML, JavaScript dan lain sebagainya ? Jika Ya, maka alangkah baiknya menggunakan syntax highlighter agar lebih mudah membaca setiap kode yang dibagikan.
Menambahkan syntax highlighter di blog memang akan membuat blog menjadi lebih keren lagi khususnya pada tampilan kode atau tampilan blockquote, namun ketika sudah menggunakan atau memasang kode syntax highlighter Anda tidak perlu lagi menambahkan kode
...ISI KODE...tetapi akan menjadi
/* Syntax Highlighter */
pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space:pre;word-wrap:normal;white-space:pre;overflow:auto}
pre.line-number{background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMWqojfH09_TnYc8eHzBGyrUgBDncITtDNtpefzulaKU675MpOiUJkg8nNePBY_whBJtbXVk-i667h0B6VoEPaiid593WjTC-rmoseJqBjsO6-m2OnL1puIzc9W-fpCfH2tPkp_retdGc/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none}
pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before{content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
#comments code{color:#bbbb6d}
pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block}
pre .line-number{float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#D94CEA}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin> atau </style>
0 komentar :
Posting Komentar