• Syntax Highlighter Untuk Blogger

    belajar HTML dasar
    Syntax Highlighter bagi para master mungkin sudah banyak yang tahu bahkan sering menggunakannya, namun pada postingan kali ini saya akan menjelaskan berdasarkan kata-kata saya sendiri mengenai syntax highlighter untuk blogger.

    Syntax highlighter adalah program atau script yang dirancang khusus dengan tujuan untuk membantu para pembuat website atau para blogger di dalam penulisan kode HTML, kode CSS, atau script yang lain, agar dapat tampil apa adanya setelah diposting. Kondisi seperti ini biasanya dibutuhkan pada saat seorang blogger akan memberikan informasi mengenai kode-kode tersebut.

    Jika penulisan kode HTML, kode CSS, atau script yang lain pada sebuah posting ditulis apa adanya maka beberapa kode tersebut akan dieksekusi sebagai program atau script bukan dan sebagai text biasa sehingga kode tersebut tidak bisa tampil seperti yang kita inginkan. Untuk mengatasi hal itu, kita bisa menggunakan beberapa metode diantaranya :
    1. Dengan menggunakan entitas HTML, bisa dilihat pada postingan sebelumnya mengenai Belajar HTML Dasar (Part.III). Kode-kode tersebut kalau pada Blogspot harus ditulis pada bagian "Edit HTML" bukan pada "Compose". Contoh : kode entitas untuk "<" adalah "&lt;" atau "&#60", kode entitas tanda kutip adalah "&quot;" atau "&#34", kode entitas untuk spasi adalah "&nbsp;" (semua ditulis tanpa tanda kutip). Saya sendiri menggunakan cara yang ini tetapi dengan bantuan HTML Editor. Untuk menampilkan kode HTML berikut agar tampil seperti ini pada postingan:

      <strong>Ini adalah</strong> contoh penulisan kode <em>HTML</em> agar terlihat apa adanya setelah <u>diposting.</u>

      Pada bagian HTML ditulis :

      &lt;strong&gt;Ini adalah&lt;/strong&gt; contoh penulisan kode &lt;em&gt;HTML&lt;/em&gt; agar terlihat apa adanya setelah &lt;u&gt;diposting.&lt;/u&gt;

      Kalau kode tersebut ditulis seperti aslinya dan tidak menggunakan entitas HTML, maka hasil pada postingan akan tampil seperti di bawah ini (warna biru hanya untuk memperjelas) :

      Ini adalah contoh penulisan kode HTML agar terlihat apa adanya setelah diposting.

    2. Menggunakan Textarea. Semua kode HTML, kode CSS, atau script yang lain di dalam textarea akan ditulis apa adanya setelah diposting. Perhatikan contoh penulisan HTML pada textarea :

      <strong>Ini adalah</strong> contoh penulisan kode <em>HTML</em> agar terlihat apa adanya setelah <u>diposting.</u>

      Kode HTML yang ditulis :

      <textarea cols="50" rows="2" readonly="readonly"><strong>Ini adalah</strong> contoh penulisan kodeg <em>HTML</em> agar terlihat apa adanya setelah <u>diposting.</u></textarea>

      Hasil pada postingan akan seperti ini :


    3. Cara ketiga untuk menampilkan kode HTML dalam postingan adalah dengan meyisipkan beberapa script Syntax Highlighter pada HTML utama yaitu dengan cara login ke blogspot, pada bagian Layout click Edit HTML kemudian sisipkan kode syntax highlighter for blogger (informasi lebih jelas mengenai script Syntax Highlihter ini silahkan kunjungi blog HeisenCoder). Perhatian!, untuk metode yang kedua ini sebaiknya backup dulu template anda atau setidaknya copy semua data yang penting terutama script HTML pada Layout  kalau-kalau terjadi kesalahan (error) setelah memasukan script ini. Jika metode ini berhasil, maka penulisan kode HTML, kode CSS, atau script yang lain bisa langsung pada bagian "Compose" bukan pada bagian "Edit HTML" karena secara otomatis kode yang ditulis pada bagian "Compose Editor" akan diterjemahkan menjadi entitas HTML. 
    4. Menggunakan Quick Escape Tool and Wizard pada  Accesifay (mudah-mudahan linknya masih aktif). Dengan tool ini anda hanya cukup mengkopy kode HTML, kode CSS, atau script yang lain pada box yang disediakan kemudian click 'Convert to escape character". Hasilnya akan terlihat setelah kode tersebut diterjemahkan menjadi entitas HTML. Kode hasil konversi tersebut selanjutnya dicopy dan dipaste pada bagian "Edit HTML" bukan pada bagian "Compose".

      Quick EscapeQuick Escape

    • Mohon koreksi para master!. Semoga bermanfaat.



    Artikel yang perlu dikoreksi :

0 comments:

Siapapun boleh berkomentar termasuk kritik dan koreksi untuk perbaikan blog. Bagi yang awam, jangan malu untuk bertanya karena sayapun masih belajar. Tetapi saya mohon maaf karena tidak semua komentar dan email dapat saya reply.

Langgan: Poskan Komentar (Atom)
Link Sukses

Tutorial Blog

CSS Dasar

HTML Dasar

Bisnis Online

SEO Untuk Pemula

Photoshop Dasar

Software Dan Driver

Facebook (FB)

Twitter

Website Tools

Lain-lain

Daftar Isi Berdasarkan Tanggal >>>