Syntax Highlighter sederhana

HTML Javascript jQuery Trik

Apa itu Syntax Highlighter? para blogger seringkali berbagi script atau potongan kode untuk pembaca atau siapapun yang membutuhkannya untuk pengembangan dan tampilan web atau blog. Kebanyakan menggunakan blockquote sebagai "bidang pembungkus" dari script atau potongan kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator atau petunjuk. pada Syntax Highlighter merupakan upaya untuk mempresentasikan script atau kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode, misalnya Javascript, CSS, HTML, Phyton, PHP, dan masih banyak lagi yang telah di golongkan dan di tandai dengan warna berbeda sesuai jenis.

kali ini, saya akan berbagi cara mudah untuk memasang Syntax Highlighter yang terbilang mudah ringan dan baik. untuk mengikuti pemasangan pada blog anda silahkan simak di bawah ini langkahnya:

1. Masuk Blogger
2. Pilih template dan Edit HTML
3. Masukan kode CSS dibawah ini diatas kode </style>

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-46body {
  background-color:#E7E5DC;
  padding:50px;
}

pre {
  background-color:#eee;
  color:#069;
  padding:0.5em 1em;
  overflow:auto;
  white-space:pre;
  word-wrap:normal;
  font:bold 12px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  position:relative;
  margin:0 0 1em;
}

pre .the-num {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  padding:0.5em 0.5em 0.5em 1em;
  color:#555;
  background-color:#ccc;
  border-right:2px solid #444;
}

pre .bracket   {color:darkblue;}
pre .tag,
pre .tag .keyword,
pre .tag .attribute {color:blue;}
pre .selector  {color:blue;}
pre .attribute,
pre .regexp    {color:darkorange;}
pre .str       {color:green;}
pre .tag .str  {color:brown;}
pre .keyword   {color:darkred;}
pre .comment   {font-style:italic;color:#999;}
pre .num,
pre .hex       {color:darkviolet;}
pre .name,
pre .important,
pre .array     {color:red;}
pre .important {background-color:yellow;}
pre .doctype   {color:magenta;}

4. Letakkan kode berikut di atas kode </body>

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-4546code-line:2-4647code-line:2-4748code-line:2-4849code-line:2-4950code-line:2-50<script type='text/javascript'>
// JQuery Syntax Highlighter
$(window).load(function() {
    $('pre').each(function() {
        var list = "(true|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete)",
            repli1 = new RegExp(list + " ", "ig"),
            repli2 = new RegExp(list + "( ?)<span", "ig"),
            $this = $(this);
        $this.html($this.html()
        .replace(/(<br>|\n)$/ig, "")
        .replace(/(\t)/ig, "    ")
        .replace(/&quot;/ig, "\"")
        .replace(/&#39;|&apos;/ig, "\'")
        .replace(/(.?)'(.*?)'/g, "$1<span class='str'>\'$2\'</span>")
        .replace(/(.?)"(.*?)"/g, "$1<span class='str'>\"$2\"</span>")
        .replace(/(.?)(""|'')/g, "$1<span class='value'>$2</span>")
        .replace(/(#[A-F0-9]{3,6})/ig, "<span class='hex'>$1</span>")
        .replace(/(\d+(?!(.*&lt;)))/g, "<span class='num'>$1</span>")
        .replace(/((#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>")
        .replace(/(\{|\}|\(|\)|\[|\])/g, "<span class='bracket'>$1</span>")
        .replace(/&lt;(.*?)&gt;/g, "<span class='tag'>&lt;$1&gt;</span>")
        .replace(/&lt;!--([\s\S]*?)--&gt;/gm, "<span class='comment'>&lt;!--$1--&gt;</span>")
        .replace(/\/\*([\s\S]*?)\*\//gm, "<span class='comment'>/*$1*/</span>")
        .replace(/[^\:]\/\/(.*)/g, "<span class='comment'>//$1</span>")
        .replace(/<\/span>\/(.*)\/([gim]+),( ?)<span class='str'>/g, "</span><span class='regexp'>/$1/$2</span>, <span class='str'>")
        .replace(repli1, "<span class='keyword'>$1</span> ")
        .replace(repli2, "<span class='keyword'>$1</span>$2<span")
        .replace(/function<\/span> (.[^<]*)<span/g, "function</span> <span class='name'>$1</span><span")
        .replace(/([\-_A-Z]+)(?=(\s+|)):(.(?!\{)*)/ig, "<span class='attribute'>$1</span>:$2$3")
        .replace(/h<span class='num'>([1-6])<\/span>/ig, "h$1")
        .replace(/!important/ig, "<mark class='important'>!important</mark>")
        .replace(/&lt;!(doctype)(.*)&gt;/ig, "<span class='doctype'>&lt;!$1$2&gt;</span>")
        .replace(/@<span class='attribute'>(import|page|media|charset|keyframes|font-face)<\/span>/ig, "@$1")
        .replace(/(@(import|page|media|charset|keyframes|font-face))/ig, "<span class='keyword'>$1</span>")
        .replace(/<span class='bracket'>\[<\/span>(.*)<span class='bracket'>\]<\/span>/ig, "<span class='array'>[$1]</span>")
        ).find('.str span, .regexp span, .comment span, .doctype span, .hex span, .array span, .url span').contents().unwrap();
        $this.append('<div class="the-num"></div>');

        // Insert the line number
        var num = $this.html().split(/\n|<br>/).length,
            count = 0;
        for (var i = 0; i < num; i++) {
            count = count + 1;
            $this.find('.the-num').append(count + '.<br/>');
        }
        $this.css('padding-left', $this.find('.the-num').outerWidth()+14);

    });
});
</script>

5. Simpan perubahan
6. Untuk memanggil di dalam posting, gunakan cara penulisan seperi berikut

1code-line:3-1<pre> ...kode disini... </pre>

jika langkah anda benar, maka hasilnya akan terlihat seperti di bawah ini:


semoga sukses dan bermanfaat...

Artikel Terkait

  • Recover Tulisan? Cara mengembalikan Posting
    Memulihkan posting Anda yang dihapus atau halaman dari Blogger mungkin tampak menjadi tugas yang menantang. Karena, semua data berada di bawah kepemilikan Google. Oleh karena itu, sulit untuk memulihkan database Anda melalui Hosting atau layanan lainnya. Selanjutnya, Blogger tidak memiliki fungsi pulih hanya memungkinkan untuk cadangan Posting…
  • Tips bloging sederhana
    Jika Anda seorang blogger, Anda suka tentang bercerita dan berbagi hal-hal untuk semua pembaca Anda tetapi apakah Anda sudah melakukannya dengan benat? Jika Anda serius tentang blogging dan Anda ingin diakui untuk apa Anda lakukan itu maka cobalah untuk memberikan yang terbaik, inilah sedikit tips yang akan saya berikan. Saya akan memberikan…
  • Trik memasang random banner di blogger
    Memasang banner di blog memang bukan sesuatu hal/topik pembahasan yang baru melainkan hal yang sudah lama di bahas, banyak para blogger memasang banner dengan tujuan tertentu, seperti periklanan, perujuk link tertentu ataupun sebagai penghasilan sampingan. umumnya banner ini memiliki dimensi yang bervariatif tergantung dari kebutuhan/tujuan te…
  • Menambahkan multi kolom widget di footer
    Membuat kolom dibawah footer dengan menambahkan css agar terlihat lebih menarik dan membuat ruang untuk widget yang di butuhkan. Dengan lebih banyak kolom di footer Blogger Anda, Anda akan memiliki ruang ekstra untuk mengakomodasi widget lainnya seperti Flickr foto dan update Twitter. Juga Anda dapat menempatkan widget yang lebih sering …
  • Meningkatkan kecepatan load dengan optimasi css
    Sekarang ini kecepatan website/blog menjadi faktor peringkat mesin pencarian, dan CSS optimasi mampu memainkan peran utama dalam meningkatkan kecepatan situs/blog tertentu. Di sini saya membagi beberapa langkah bagaimana mengoptimalkan CSS untuk kecepatan muat situs. 01Menghindari CSS eksternal/impor style sheet Mengimpor CSS lain ke CSS ak…
  • Cara mudah memasang forum di blog
    Instalasi Forum di blog BlogSpot tampaknya menjadi tugas terbilang sulit. Karena, semuanya di bawah kontrol Google. Oleh karena itu, akan sangat sulit untuk menjadi admin di forum pihak ketiga. Namun, ketika kita mengalami masalah kita juga akan menemukan solusinya. Cara ideal untuk menginstal sebuah forum di blogger adalah dengan menggunakan…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...