Berlangganan Situs Kami

Smile Untuk Tidak Spam.

CARA MEMBUAT SYNTAX HIGHLIGHTER KEREN DI BLOGGER

Mhoza CupLas CupLis    

Blogger syntax highlighterPada postingan kali ini saya akan share tentang cara membuat syntax highlighter keren di blogger dan cara menggunakan syntax highlighter pada blog,dengan berbagai tema syntax highlighter yang keren menggunakan CSS dan Javascript khusus pada blogger.Memang sudah banyak situs atau blog yang membahas tentang cara memasang dan menggunakan syntax highlighter serta berbagi code dan cara memasang syntax highlighter pada blog dan website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainya,tapi disini saya lebih memilih HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih mudah dan dapat bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode).

HIGHLIGHT.JS mengenali sekurangnya 54 bahasa program dan dibundel dengan 26 theme style. Untuk itu saya hanya akan memilih menjadi 3 bahasa code saja, yang paling sering digunakan oleh para blogger (dalam membuat tutorial pada blog-nya) kebanyakan para blogger hanya untuk menampilkan source code, seperti kode CSS, Javascript, dan mark up HTML.


PENGERTIAN SYNTAX HIGHLIGHTER

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

CARA INSTAL SYNTAX HIGHLIGHTER DI BLOG

Untuk mengaktifkan fitur ini dibutuhkan javascript,copy dulu kode javascript di bawah ini dan letakan tepat di atas tag </head> atau bisa juga sebelum tag </body> pada tempelate anda.
<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
Kalau javascript'nya sudah di pasang, selanjutnya memasang style highlighting CSS nya,Silahkan pilih salah satu style atau tema syntax highlighter di bawah ini sesuai yang anda inginkan. lihat demonya dulu sob,yang mana sekiranya cocok buat blog anda. .Pilih salah satu css di bawah ini,dan pastekan di atas ]]></b:skin> pada tempelate anda. .

1.POJOAQUES TYLE
DEMO POJOAQUE SYNTAX HIGHLIGHTER
CODE CSS : 

/*
Pojoaque Style by Jason Tate
http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html
Based on Solarized Style from http://ethanschoonover.com/solarized
*/
pre code {
display: block; padding: 0.5em;
color: #DCCF8F;
background: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #073642;
}

2.SOLARIZED DRAK STYLE
DEMO SOLARIZED SYNTAX HIGHLIGHTER
CODE CSS : 

/*

Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull 

*/

pre code {
  display: block; padding: 0.5em;
  background: #002b36; color: #839496;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}

pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color: #859900;
}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}

pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id {
  color: #268bd2;
}

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}

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 {
  color: #cb4b16;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #073642;
}

3.RAINBOW STYLE
DEMO RAINBOW SYNTAX HIGHLIGHTER
CODE CSS : 


/*

Style with support for rainbow parens

*/

pre ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
pre ::selection { background:#FF5E99; color:#fff; text-shadow: none; }

pre code {
  display: block; padding: 0.5em;
  background: #474949; color: #D1D9E1;
}
pre .body,
pre .collection {
   color: #D1D9E1;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #969896;
  font-style: italic;
}

pre .keyword,
pre .clojure .attribute,
pre .winutils,
pre .javascript .title,
pre .addition,
pre .css .tag {
  color: #cc99cc;
}

pre .number { color: #f99157; }

pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #8abeb7;
}

pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .identifier
{
  color: #b5bd68;
}

pre .class .keyword
{
  color: #f2777a;
}

pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label,
pre .id,
pre .lisp .title,
pre .clojure .title .built_in {
   color: #ffcc66;
}

pre .tag .title,
pre .rules .property,
pre .django .tag .keyword,
pre .clojure .title .built_in {
  font-weight: bold;
}

pre .attribute,
pre .clojure .title {
  color: #81a2be;
}

pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #f99157;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #eee8d5;
}

4.MONOKAI STYLE
DEMO MONOKAI SYNTAX HIGHLIGHTER
CODE CSS : 

/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/

pre code {
  display: block; padding: 0.5em;
  background: #272822;
}

pre .tag,
pre .tag .title,
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color: #F92672;
}

pre code {
  color: #DDD;
}

pre code .constant {
 color: #66D9EF;
}

pre .class .title {
 color: white;
}

pre .attribute,
pre .symbol,
pre .symbol .string,
pre .value,
pre .regexp {
 color: #BF79DB;
}

pre .tag .value,
pre .string,
pre .subst,
pre .title,
pre .haskell .type,
pre .preprocessor,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .prompt {
  color: #A6E22E;
}

pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .tex .formula {
  color: #75715E;
}

pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .special,
pre .request,
pre .status {
  font-weight: bold;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

5.TOMMOROW NIGHT BLUE STYLE
DEMO TOMMOROW NIGHT BLUE SYNTAX HIGHLIGHTER
CODE CSS : 

/* Tomorrow Night Blue Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */

.tomorrow-comment, pre .comment, pre .title {
  color: #7285b7;
}

.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
  color: #ff9da4;
}

.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
  color: #ffc58f;
}

.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
  color: #ffeead;
}

.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
  color: #d1f1a9;
}

.tomorrow-aqua, pre .css .hexcolor {
  color: #99ffff;
}

.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
  color: #bbdaff;
}

.tomorrow-purple, pre .keyword, pre .javascript .function {
  color: #ebbbff;
}

pre code {
  display: block;
  background: #002451;
  color: white;
  padding: 0.5em;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

6.SUNBURST STYLE
DEMO SUNBURST SYNTAX HIGHLIGHTER
CODE CSS : 




/*

Sunburst-like style (c) Vasily Polovnyov

*/

pre code {
  display: block; padding: 0.5em;
  background: #000; color: #f8f8f8;
}

pre .comment,
pre .template_comment,
pre .javadoc {
  color: #aeaeae;
  font-style: italic;
}

pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title {
  color: #E28964;
}

pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #99CF50;
}

pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command {
  color: #65B042;
}

pre .subst {
  color: #DAEFA3;
}

pre .regexp {
  color: #E9C062;
}

pre .title,
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .shebang,
pre .prompt {
  color: #89BDFF;
}

pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
  text-decoration: underline;
}

pre .symbol,
pre .ruby .symbol .string,
pre .number {
  color: #3387CC;
}

pre .params,
pre .variable,
pre .clojure .attribute {
  color: #3E87E3;
}

pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
  color: #CDA869;
}

pre .css .class {
  color: #9B703F;
}

pre .rules .keyword {
  color: #C5AF75;
}

pre .rules .value {
  color: #CF6A4C;
}

pre .css .id {
  color: #8B98AB;
}

pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}

pre .preprocessor {
  color: #8996A8;
}

pre .hexcolor,
pre .css .value .number {
  color: #DD7B3B;
}

pre .css .function {
  color: #DAD085;
}

pre .diff .header,
pre .chunk,
pre .tex .formula {
  background-color: #0E2231;
  color: #F8F8F8;
  font-style: italic;
}

pre .diff .change {
  background-color: #4A410D;
  color: #F8F8F8;
}

pre .addition {
  background-color: #253B22;
  color: #F8F8F8;
}

pre .deletion {
  background-color: #420E09;
  color: #F8F8F8;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}
Kalau sudah memasang style atau tema syntax highlighter sesuai yang anda inginkan pada tempelate anda,sekarang save tempelate anda. . ! !
Gunakan markup HTML di bawah ini untuk menggunakan syntax highlighter pada saat anda ingin menampilkan source code, seperti kode CSS, Javascript, dan mark up HTML.pada postingan anda.

<pre><code> Isi Kode Javascript, jQuery atau Kode CSS atau Kode HTML disini...... </code></pre>

Oke saya rasa sampai disini dulu sob,tutorial tentang cara membuat dan menggunakan syntax highlighter pada blogger,selamat mencoba dan berksperimen,jika ada pertanyaan silahkan tinggal komen,sebisa dan secepat mungkin komen anda akan saya balas.

Silakan Beri Kami 1 Menit untuk Sharing Posting Ini!
Share Media Social →
FOLLOW US →
BAGIKAN KE →
Powered By : Official WapMasTer

 

© 2014 OffiCiaL WapMasTer.

Designed By : Mhoza CupLas CupLisMhoza CupLas CupLis