Formatting: Syntax Highlighter

Tentang

Formatting Syntax Highlighter adalah format HTML untuk menampilkan kode dengan lebih menarik berbasis PrismJS. Formating ini akan melakukan serangkaian proses pada text kode, menambahkan fungsi copy, mewarnai bagian-bagian tertentu seperti tag, atribut, variabel, dan lain sebagainya - (Demo).


Spesifikasi




Konfigurasi



Keterangan

box
Nilai Pratinjau
none Lihat
border Lihat
shadow Lihat

line-number
Aktivasi nomor baris - (Lihat).
break
Ketika nilai adalah yes, baris kode yang panjang akan dipaksa untuk tampil pada baris baru.

Nilai Pratinjau
yes Lihat
no Lihat

Ketika konfigurasi ini bernilai yes, konfigurasi line-number tidak tersedia.
formatting
Secara default, sistem akan memproses semua elemen PRE dan CODE pada penggunaan yang didukung sesuai data spesifikasi. Dengan memberikan nilai no pada konfigurasi ini, elemen yang bersangkutan tidak akan diproses dengan formatting (akan menggunakan style default browser).



Penggunaan

Formatting ini merupakan sebuah extension, pastikan anda sudah melakukan instalasi formatting yang sudah disampaikan pada halaman Extension: Syntax Highlighter.


  1. FORMAT HTML 
          	
            
          <code class='language-***'>Parsed Code...</code>
            
          
          	
            
          <pre>
            <code class='language-***'>Parsed Code...</code>
          </pre>

    Keterangan
    language-***
    Class ini mendefinisikan bahasa kode yang akan dihighlight. Ganti *** dengan salah satu bahasa yang didukung: html, css, javascript, xml, clike, markup, svg, mathml, ssml, atom, rss, plain.

    Contoh: 
    
  <code class='language-html'>Parsed Code...</code>

    Parsed Code
    Letakkan kode yang sudah diparse disini. Informasi lengkap tentang parse, Googling: Cara parse HTML.

    Contoh: 
                  
    <pre>
      <code class='language-html'>
        &lt;div&gt;lorem ipsum&lt;/div&gt;
      </code>
    </pre>
              
            
                  
              <div>lorem ipsum</div>

    Inline dan Block
    Format Inline adalah format untuk meng-highlight kode tanpa membuat baris baru. Gunakan format ini untuk meng-highlight kode pendek yang terletak di dalam sebuah paragraf.

    Format Block adalah format untuk meng-highlight kode dengan menampilkan kode di dalam sebuah box khusus. Gunakan format ini untuk meng-highlight kode yang panjang.

    Bandingkan hasil untuk kedua contoh berikut:

    Contoh Inline: 
                
            Lorem ipsum dolor sit amet. 
            <code class='language-html'>
              &lt;div&gt;lorem ipsum&lt;/div&gt;
            </code> 
            Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet. <div>lorem ipsum</div> Lorem ipsum dolor sit amet.

    Contoh Block: 
                
            Lorem ipsum dolor sit amet. 
            <pre>
              <code class='language-html'>
                &lt;div&gt;lorem ipsum&lt;/div&gt; 
                &lt;div&gt;lorem ipsum&lt;/div&gt;
              </code> 
            </pre>
            Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet. 
    
            <div>lorem ipsum</div>
            <div>lorem ipsum</div>
    Lorem ipsum dolor sit amet.


  2. Penambahan Konfigurasi Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atribut
    data-nama-konfigurasi='Nilai' pada elemen PRE.

    Contoh: 
                  
    <pre data-box='shadow'>
      <code class='language-html'>
        &lt;div&gt;lorem ipsum&lt;/div&gt;
      </code>
    </pre>
              
            
                  
              <div>lorem ipsum</div>

    Penambahan konfigurasi hanya mendukungan format block.
Komentar