Loading...
ucapan
Membuat BLOG BULE sekarang sangat mudah dengan hadirnya SOFTWARE ini, Siap nembak CPC bule yang main ADSENSE

Mau artikel unik 100 % dengan banyak bahasa tanpa harus repot untuk menulis?

Article Sparta merupakan software yang memiliki fungsi untuk membuat artikel dalam berbagai bahasa hanya dengan beberapa klik saja, Jadi tidak perlu repot lagi untuk menulis.

Softwarenya sangat bermanfaat, bisa di pakai JUALAN ARTIKEL, MEMBUAT BLOG BULE TUK PENGHASILAN CPC ADSENSE.

Yang jadi masalah karena lisensinya hanya untuk beberapa orang/PC saja, jadi siapa cepat dia dapat.

DAPATKAN SEGERA SELAGI HARGA PROMO DAN MASIH TERSEDIA LISENSINYA!!!

Software Pembuat Artikel

Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda


Bergabunglah dengan 5.000 Lebih pengikut lainnya Dan Dapatkan Selalu Artikel Dan Penawaran

2015/03/12

Text Warna-Warni pada Kode Script di Postingan (SyntaxHighlighter)

Software Pembuat Artikel unik 100%O
Artikel unik 100% dengan banyak bahasa tanpa tanpa harus repot menulis, Software yang berfungsi membuat artikel dalam berbagai bahasa hanya dengan beberapa klik saja, Jadi tidak perlu repot lagi untuk menulis.

DAPATKAN SEGERA SELAGI HARGA PROMO!!!
Klik Pada Gambar Tuk Info Selengkapnya Ya...



Text Warna-Warni pada Kode Script di Postingan (SyntaxHighlighter)
Text Warna-Warni pada Kode Script di Postingan (SyntaxHighlighter) - Text warna warni text warna warni, itulah yang sering dilontarkan dan ditanyakan oleh Blogger awam seperti saya, terkadang ada yang bertanya : "Bagaimana sih, cara membuat text yang berwarna-warni pada postingan, blog aku ini kan tentang tutorial blogger, aku sering melihat text warna-warni ini disetiap blog-blog tutorial, aku ingin seperti itu.", sebenarnya mudah saja untuk membuat text warna-warni ini, yang disebut SyntaxHighlighter.

Untuk membuat SyntaxHighlighter ini membutuhkan kode pre bukan blockquote , karena saya sering melihat kode script pada blog-blog tutorial lainnya yang menggunakan  blockquote bukan  pre jika sobat bertanya mengapa lebih baik  pre dibandingkan blockquote , lihatlah tutorial Kang Ismet DISINI.

Ok langsung saja kita masuk ke tahap:


Cara Membuat SyntaxHighlighter


Kali ini saya membuat tutorial mengenai SyntaxHighlighter.js bukan Prism, disebabkan karena untuk SyntaxHighlighter lebih mudah caranya dibandingkan dengan Prism, dan agar bisa dipakai pada kolom komentar.

Langkah 1 : Masukan Javascript

Simpan script berikut di atas </head>



<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>

    <script>

      hljs.initHighlightingOnLoad();

    </script>


Langkah 2 : Masukan CSS

Banyak pilihan CSS yang bisa sobat digunakan, sebelum memilihnya silahkan lihat Demo DISINI.
Untuk Pilihan CSS, bisa sobat ambil DISINI.

Simpan kode CSS tadi diatas ]]><b:skin> atau sobat bisa gunakan CSS dibawah ini, yang saya dapat dari Kang Ismet, silahkan dicoba:

Default


/*

Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>

*/

pre code {

  display: block; padding: 0.5em;

  background: #F0F0F0;

}

pre code,

pre .subst,

pre .tag .title,

pre .lisp .title,

pre .clojure .built_in,

pre .nginx .title {

  color: black;

}

pre .string,

pre .title,

pre .constant,

pre .parent,

pre .tag .value,

pre .rules .value,

pre .rules .value .number,

pre .preprocessor,

pre .haml .symbol,

pre .ruby .symbol,

pre .ruby .symbol .string,

pre .aggregate,

pre .template_tag,

pre .django .variable,

pre .smalltalk .class,

pre .addition,

pre .flow,

pre .stream,

pre .bash .variable,

pre .apache .tag,

pre .apache .cbracket,

pre .tex .command,

pre .tex .special,

pre .erlang_repl .function_or_atom,

pre .asciidoc .header,

pre .markdown .header,

pre .coffeescript .attribute {

  color: #800;

}

pre .comment,

pre .annotation,

pre .template_comment,

pre .diff .header,

pre .chunk,

pre .asciidoc .blockquote,

pre .markdown .blockquote {

  color: #888;

}

pre .number,

pre .date,

pre .regexp,

pre .literal,

pre .hexcolor,

pre .smalltalk .symbol,

pre .smalltalk .char,

pre .go .constant,

pre .change,

pre .lasso .variable,

pre .asciidoc .bullet,

pre .markdown .bullet,

pre .asciidoc .link_url,

pre .markdown .link_url {

  color: #080;

}

pre .label,

pre .javadoc,

pre .ruby .string,

pre .decorator,

pre .filter .argument,

pre .localvars,

pre .array,

pre .attr_selector,

pre .important,

pre .pseudo,

pre .pi,

pre .haml .bullet,

pre .doctype,

pre .deletion,

pre .envvar,

pre .shebang,

pre .apache .sqbracket,

pre .nginx .built_in,

pre .tex .formula,

pre .erlang_repl .reserved,

pre .prompt,

pre .asciidoc .link_label,

pre .markdown .link_label,

pre .vhdl .attribute,

pre .clojure .attribute,

pre .asciidoc .attribute,

pre .lasso .attribute,

pre .coffeescript .property {

  color: #88F

}

pre .keyword,

pre .id,

pre .title,

pre .built_in,

pre .aggregate,

pre .css .tag,

pre .javadoctag,

pre .phpdoc,

pre .yardoctag,

pre .smalltalk .class,

pre .winutils,

pre .bash .variable,

pre .apache .tag,

pre .go .typename,

pre .tex .command,

pre .asciidoc .strong,

pre .markdown .strong,

pre .request,

pre .status {

  font-weight: bold;

}

pre .asciidoc .emphasis,

pre .markdown .emphasis {

  font-style: italic;

}

pre .nginx .built_in {

  font-weight: normal;

}

pre .coffeescript .javascript,

pre .javascript .xml,

pre .lasso .markup,

pre .tex .formula,

pre .xml .javascript,

pre .xml .vbscript,

pre .xml .css,

pre .xml .cdata {

  opacity: 0.5;

}



Zenburn


/*

Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>

based on dark.css by Ivan Sagalaev

*/

pre code {

  display: block; padding: 0.5em;

  background: #3F3F3F;

  color: #DCDCDC;

}

pre .keyword,

pre .tag,

pre .css .class,

pre .css .id,

pre .lisp .title,

pre .nginx .title,

pre .request,

pre .status,

pre .clojure .attribute {

  color: #E3CEAB;

}

pre .django .template_tag,

pre .django .variable,

pre .django .filter .argument {

  color: #DCDCDC;

}

pre .number,

pre .date {

  color: #8CD0D3;

}

pre .dos .envvar,

pre .dos .stream,

pre .variable,

pre .apache .sqbracket {

  color: #EFDCBC;

}

pre .dos .flow,

pre .diff .change,

pre .python .exception,

pre .python .built_in,

pre .literal,

pre .tex .special {

  color: #EFEFAF;

}

pre .diff .chunk,

pre .subst {

  color: #8F8F8F;

}

pre .dos .keyword,

pre .python .decorator,

pre .title,

pre .haskell .type,

pre .diff .header,

pre .ruby .class .parent,

pre .apache .tag,

pre .nginx .built_in,

pre .tex .command,

pre .prompt {

    color: #efef8f;

}

pre .dos .winutils,

pre .ruby .symbol,

pre .ruby .symbol .string,

pre .ruby .string {

  color: #DCA3A3;

}

pre .diff .deletion,

pre .string,

pre .tag .value,

pre .preprocessor,

pre .built_in,

pre .sql .aggregate,

pre .javadoc,

pre .smalltalk .class,

pre .smalltalk .localvars,

pre .smalltalk .array,

pre .css .rules .value,

pre .attr_selector,

pre .pseudo,

pre .apache .cbracket,

pre .tex .formula,

pre .coffeescript .attribute {

  color: #CC9393;

}

pre .shebang,

pre .diff .addition,

pre .comment,

pre .java .annotation,

pre .template_comment,

pre .pi,

pre .doctype {

  color: #7F9F7F;

}

pre .coffeescript .javascript,

pre .javascript .xml,

pre .tex .formula,

pre .xml .javascript,

pre .xml .vbscript,

pre .xml .css,

pre .xml .cdata {

  opacity: 0.5;

}

Jika sobat tidak puas dengan style pre diatas bisa sobat pilih DISINI

Cara Penggunaan

Untuk menggunakan SyntaxHighlighter ini pada postingan, tulis seperti ini:


<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Sekian dari saya, selamat mencoba dan semoga berhasil yah. Wassalam.

Pengelola Blog : ABDUL WAHAB

Judul : Text Warna-Warni pada Kode Script di Postingan (SyntaxHighlighter)
Ditulis oleh :Blog Fajri Andaviar pada hari 2015/03/12
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Text Warna-Warni pada Kode Script di Postingan (SyntaxHighlighter)
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
http://fajriandaviar.blogspot.com/2013/10/syntaxhighlighter-untuk-blog.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.

Title : Text Warna-Warni pada Kode Script di Postingan (SyntaxHighlighter)
Description : Text Warna-Warni pada Kode Script di Postingan (SyntaxHighlighter) - Text warna warni text warna warni, itulah yang sering dilontarkan d...

1 komentar:

makasih udah share sob!
- salam damai

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.