Eksperimen Syntax Highlighter

Tabel Konten
  1. jQuery 
  2. CSS 
  • Lainnya 
  • Syntax Highlighter

    HAAAAAHHHHHHHHH!!!! Mulai iseng lagi…

    jQuery 

    // Pure jQuery Syntax Highlighter by Taufik Nurrohman
    // Still an experimental :)
    // https://plus.google.com/108949996304093815163/about
    
    $(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)",
                rep1 = new RegExp(list + " ", "ig"),
                rep2 = new RegExp(list + "( ?)<span", "ig"),
                $this = $(this);
            $this.html($this.html()
            .replace(/(<br>|\n)$/ig, "")
            .replace(/(\t)/g, "    ")
            .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(rep1, "<span class='keyword'>$1</span> ")
            .replace(rep2, "<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);
    
        });
    });

    CSS 

    pre {
      background-color:white;
      color:#069;
      padding:0em 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 1em;
      color:#999;
      background-color:#eee;
      border-right:2px solid #ccc;
    }
    
    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;}

    Lihat Demo


    Lainnya 

    48 Komentar

    • Putra

      Wah keyen, tambah satu lagi pak, double clik selection :D #benar begitu :/
      pokoknya yang di double clik jadi keseleksi semua :)

    • Taufik Nurrohman

      @Alam Perwira Bisa, tapi markup HTML-nya harus dimodifikasi lagi (pakai snippet kode yang pernah Saya tuliskan di sini).
      Mengingat nomor urut baris kode berada di dalam tag <pre>, jadi saat tag PRE diklik ganda, nomor indikator baris kode di dalamnya malah ikut terseleksi. Solusinya adalah dengan membungkus elemen baru di dalam tag <pre> sebelum kita menyisipkan bar angka di bawahnya. Seperti ini:

      $this.wrapInner('<div class="selectable"></div>').append('<div class="the-num"></div>');

      Sehingga markupnya akan berubah menjadi seperti ini:

      <pre>
      <div class='selectable'>
      ...
      ...
      ...
      </div>
      <div class='the-num'> ... </div>
      </pre>

      Setelah itu cukup targetkan elemen .selectable sebagai daerah seleksi dan lupakan elemen .the-num:

      $('pre').each(function() {
      ...
      ...
      $this.wrapInner('<div class="selectable"></div>').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);
      }).attr('title', 'Klik ganda untuk menyeleksi semua kode!').find('.selectable').on("dblclick", function() {
      var refNode = $(this)[0];
      if ($.browser.msie) {
      var range = document.body.createTextRange();
      range.moveToElementText(refNode);
      range.select();
      } else if ($.browser.mozilla || $.browser.opera) {
      var selection = window.getSelection();
      var range = document.createRange();
      range.selectNodeContents(refNode);
      selection.removeAllRanges();
      selection.addRange(range);
      } else if ($.browser.safari) {
      var selection = window.getSelection();
      selection.setBaseAndExtent(refNode, 0, refNode, 1);
      }
      });

      Demo: http://jsfiddle.net/tovic/7rKM8/5/

    • Putra

      @Taufik Nurrohman Alhamdulillah. Kesampaian juga make syntax higlighter :) thankyu pak Taufik. Baikk dehh <3
      btw, gak nyangka jadi member aktif yeah.. =D

    • Unknown

      Bagus nie Bang Taufiq tapi saya mau nanya kalau buat web gimana nie web saya www.spenzasumpiuh.com

    • Rosyd Aqbar

      Untuk pemasanganya masih agak bingung nih bang Taufik, Bisa di jelasin gk ?
      Syntax Highlighter cukup menarik bagi saya dan harus saya pelajari :D :-bd

    • Taufik Nurrohman

      @Buka(n) Master ? Kalau bisa jangan memakai yang ini soalnya kurang akurat (cuma eksperimen). Saya membuat ini cuma untuk main-main saja :p
      Lebih baik gunakan versi yang asli, yang lebih akurat. Cek di sini: Klik!
      Rata-rata cara pemasangannya sama: CSS di dalam tag <style>, JavaScript di dalam tag <script> :W

    • Taufik Nurrohman

      @Spenza-Sumpiuh Seperti yang Saya katakan ke mas Bukan Master di bawah, ada resikonya menggunakan ini karena Saya tidak mengetesnya lebih jauh dan ini hanya sebagai percobaan saja yang suatu saat mungkin akan Saya kembangkan lagi. Lebih baik gunakan versi yang sudah terkenal, bukan versi percobaan. Tapi kalau mau memasang highlighter buatan Saya bisa dengan cara meletakkan kode di dalam tag <style> untuk CSS kemudian letakkan di atas </head>, dan JQuery bisa diletakkan di dalam tag <script> kemudian letakkan di atas </body>. Kode di atas setidaknya baru cocok untuk tipe bahasa yang sederhana seperti CSS, JavaScript dan HTML. Selain itu tampilannya biasanya akan tampak berantakan dari segi warna. Hanya warnanya saja yang berantakan, tapi tidak akan merusak komposisi halaman. Bisa dilihat contohnya di sini:

      Gambar di atas Saya ambil dari blognya mas Alam Perwira.
      Kadang-kadang warnanya tidak konsisten :)

    • Beben Koben

      Udah baca komentar balasan saya blon!!!
      gak usah capek bikin syntax highlighter...Ni syntaclet.com
      wekekekkk :p

    • Taufik Nurrohman

      @Beben Koben Buat sendiri lebih seru WEEEKEKEKKK!!!! :p
      WEEEEEEEEEEEEEEEEEEEEEEKKKKKKKKKKKKKKKKK!!!!!!

    • Rosyd Aqbar

      Sebenarnya saya sudah pasang, tapi fungsinya gk optimal, kadang muncul kadang enggak

    • uki

      HUhahahha.... akhirnya dapat juga,siap-siap pake di blog akh...
      Tq :D

    • uki

      @Uqhi•° Ou iya,jika di template udah ada prenya,apakah harus di hapus ?

    • uki

      knp di saya munculnya ini ?
      Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
      Pesan error XML: Element type "span" must be followed by either attribute specifications, ">" or "/>"

    • Taufik Nurrohman

      @Buka(n) Master ? Hmmm... Mungkin harus nunggu sampai loading halamannya selesai :\
      Kalau yang dimaksud kode yang di atas, cukup ganti $(window).load(function() { dengan $(function() {

    • Taufik Nurrohman

      @Uqhi•° Nggak usah. Itu sudah otomatis menyeleksi tag <pre> =D

    • Taufik Nurrohman

      @Uqhi•° Jangan lupa sisipkan komentar //<![CDATA[ di dalam tag <script> seperti ini supaya Blogger tidak menolak:

      <script type="text/javascript">
      //<![CDATA[
      ...
      //]]>
      </script>

    • uki

      @Taufik Nurrohman Oke di coba , kang taufik

    • Beben Koben

      @Taufik Nurrohman yo wis wekkk wekkk deh!

    • uki

      ouiya kang taufik,kan biasanya tuh ada yang masang anti klik kanan dan CTRL+U dan sebagainya,cara buat supaya hanya di bagian blockquote yang bisa di copy gitu gmn ?

    • Bakteri

      Coba ngetest dulu ea kak Taufic ^_^ belajar dulu agh JQuery

    • Muhammad Irham

      kalo yang dipakai kang taufik tutornya bijimane? ;)

    • Rosyd Aqbar

      Om, Saya mengalami error nih, Saat di Double Click gk bisa ke Highlight :(
      gimana nih :(

    • Bakteri

      Bg Taufik Kalau yang ada toolbars nya itu gimana ea contohnya gini http://1.bp.blogspot.com/_7so4C0dWMLE/Sa7ofCq86DI/AAAAAAAAAFk/TE0y5fAJdcQ/s400/old.PNG
      tolong donk ..! :P

    • Taufik Nurrohman

      @Muhammad Irham http://softwaremaniacs.org/soft/highlight/en/

    • Taufik Nurrohman

      @Buka(n) Master ? Mungkin itu pakai versi yang lama. Kalau versi yang baru bisa di dobel-klik. Coba cek situs http://tympanus.net/codrops
      Dia juga make SyntaxHighlighter dari AlexGorbatchev.

    • Taufik Nurrohman

      @edinofri Itu SyntaxHighlighter versi lama. Dulu dikasih toolbar soalnya kode yang sudah dikenai SyntaxHighlighter tidak bisa disalin (Baris-baris nomor ikut tersalin). Kalau versi yang sekarang sudah tidak ada toolbarnya.

    • Taufik Nurrohman

      @Uqhi•° Pakai saja .hover()
      Pertama-tama set tag <body> dengan atribut berupa oncontextmenu='return false;' Ini adalah dasar untuk menonaktifkan klik kanan ⇒ baca di sini

      Setelah itu kita gunakan .hover() untuk melepas atribut oncontextmenu saat pointer memasuki area <blockquote>, dan akan mengeset ulang atribut oncontextmenu saat pointer keluar dari <blockquote>:

      $(function() {
      $('body').attr('oncontextmenu', 'return false;'); // Set atribut klik kanan dengan nilai 'false'
      // Saat pointer memasuki blockquote, hapus atribut klik kanan
      // sebaliknya saat keluar, set kembali atribut klik kanan dengan nilai 'false'
      $('blockquote').hover(function() {
      $('body').removeAttr('oncontextmenu');
      }, function() {
      $('body').attr('oncontextmenu', 'return false;');
      });
      });

      Saat pointer berada di luar area blockquote, klik kanan tidak bisa dilakukan karena atribut oncontextmenu='return false;' melarang kita melakukan aksi klik kanan, sebaliknya saat pointer memasuki daerah blockquote, klik kanan bisa dilakukan karena atribut oncontextmenu='return false;' sudah terhapus saat pointer masuk.

      • Unknown

        makasih sebelumnya atas trik nya kang, trik diatas berhasil saya praktekan pada pointer pre dan code, nah yang ingin saya tanyakan, jika ingin menambahkan fungsion selain .hover gimana caranya kang ....? misal pada halaman comen tetap bisa di copy gitu ..?

    • Bakteri

      Makasih ea Bg Taufik :-bd Banyak dapet pelajaran dari blog akang terutama dalam hal JQuery

    • uki

      @Taufik NurrohmanKok saya masih tdk bisa ya ?

    • Taufik Nurrohman

      @Uqhi•° Tetooooooottt!!!! Anda belum beruntung.

    • uki

      @Taufik Nurrohman Auu...... :'(
      oiyua,.... script di atas di taruh di atas </head> kan ?

    • Putra

      ada problem mas. Waktu ak doble clik, trus saya copy, pas dipaste hasilnya gak ada enternya, gak ada ganti baris :'(

    • Taufik Nurrohman

      @Alam Perwira Saya coba yang tanpa dobel-klik jadi, tapi yang memakai dobel-klik tidak jadi. Saya coba ubah karakter \n menjadi <br> dan karakter \s menjadi &nbsp; tetep nggak jadi. Mending jangan pakai dobel-klik, pakai cara biasa saja:

      Demo: http://jsfiddle.net/tovic/7rKM8/12/embedded/result,js,css,html/

      Oya, kode di atas sudah pernah Saya perbaharui pada CSS dan sedikit pada JQuery.

    • Putra

      @Alam Perwira saya lepas saja deh doblecliknya. trus kalau semisal thnum(penomoran)nya dihilangkan caranya gmn? :\

    • Taufik Nurrohman

      @Alam Perwira hapus kode ini:

      $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);

      Demo: http://jsfiddle.net/tovic/7rKM8/13/

    • Anonim

      wah ada profesor nih :D eksperimennya berhasil \o/
      makasih kang...

    • Ressa

      bagus nih , kode pemanggil untuk postingnya apa kang ?

    • Unknown

      mantap nih..inovasi baru syntax..tapi buat yang malas kaya saya cuma pake blockquote

      salam admin satriyoku

    • Teknomia

      bagus bangett mas...

      cara agar bisa menyorot sebagian script penting di dalam tag pre gimana mas?

      • Taufik Nurrohman

        Eksperimen ini sudah tidak diperbaharui. Coba versi yang lebih stabil di sini → https://github.com/tovic/generic-syntax-highlighter

        Untuk menandai kode yang penting bisa memakai elemen HTML <mark>.

    • Mas Kolektor

      gan, agar numbering mengikuti jumlah baris dari isi pre yang di text wrapping gimana ya gan ? krn sudah coba edit css "white space:pre-wrap + word-wrap:break-word" numberingnya tidak mau otomatis mengikuti jumlah baris, mohon bantuannya gan :D

    • Zona Kode Web

      ada solusi buat max-height tapi background dari penomoran gak ngikut sampai scroll mentok kebawah min? backgroundnya kepotong

    Komentar telah ditutup.