vps murah
How to Start a Blog? Panduan Lengkap Membuat Blog Hanya 30 Menit

Cara Memasukkan Syntax Code Di Postingan WordPress

Bagi pemilik blog WordPress yang membahas tentang tutorial yang berhubungan dengan coding bisa dipastikan mereka ingin memasang kode di postingannya, tapi sayangnya secara default WordPress memfilter kode mentah apa pun yang ditambahkan ke dalam postingan blog, halaman, widget, atau komentar sehingga kode tidak tampil sempurna dan tag-tag kode penting dirubah menjadi karakter yang tidak jelas. Hal ini akan mengakibatkan kode jika di copy oleh pengunjung menjadi tidak berjalan dan menimbulkan error.

Untuk mengatasi hal diatas untung saja WordPress memiliki banyak plugin yang dikembangkan oleh pengembang-pengembang kompeten di seluruh dunia untuk memecahkan berbagai masalah dan menambahkan berbagai macam fungsi sehingga WordPress dapat digunakan untuk berbagai macam hal. Untuk menampilkan kode di post WordPress, Anda juga dapat menemukan beberapa plugin yang bisa menampilkan kode secara sempurna. Pada artikel ini, saya akan menunjukkan cara mudah untuk memasang atau menampilkan kode di post WordPress.

Cara Menampilkan kode di Posting Blog WordPress

Pada artikel ini saya akan memberikan satu contoh penggunaan plugin yang bernama SynatxHighlighter Evolved untuk menampilkan kode di WordPress, Dan dibagian bawah saya juga akan memberikan beberapa plugin alternatif yang juga memiliki fungsi sama.

Untuk memulainnya pertama Anda perlu menginstal dan mengaktifkan plugin Synatx Highlighter Evolved. Jika Anda masih belum memahami cara menginstall plugin, silahkan terlebih dahulu membaca tutorial saya tentang Panduan lengkap cara menginstall plugin WordPress.

Setelah plugin Anda aktifkan, Silahkan masuk ke halaman pengaturan plugin di menu Settings » SyntaxHighlighter untuk mengkonfigurasi pengaturan plugin.

Settings SyntaxHighlighte

Secara default, pengaturan plugin ini sudah bekerja untuk sebagian besar situs web. Namun, Anda harus meninjau semua pengaturan dan membuat perubahan jika perlu. Dan di setiap pilihan sudah terdapata deskripsi untuk menjelaskan maksud dari pengaturan tersebut. Jika pengaturan yang Anda lakukan sudah terasa cukup, silahkan untuk klik tombol save changes untuk menyimpan pengaturan Anda.

Syntax Highlighter Evolved menggunakan shortcode sederhana untuk menampilkan kode. Untuk setiap bahasa pemrograman Anda perlu membungkus kode Anda dalam shortcode untuk bahasa itu.

Untuk menampilkan kode PHP Anda akan membungkus kode Anda seperti ini

[HTML] Kode Anda disini [/HTML]

Ini akan muncul di postingan anda seperti ini:

<?php echo "Hello World"; ?>

Untuk CSS Anda akan membungkus kode Anda seperti ini:

[CSS] Kode Anda disini [/CSS]

Ini akan muncul di situs Anda seperti ini:

.entry-title {
font-family:”Open Sans”, arial, sans-serif;
font-size:16px;
color:#272727; }

Syntax Highlighter secara otomatis akan menyoroti kode untuk bahasa tertentu. Ini juga akan menambahkan nomor baris dan handle tab indent dengan benar. Pengguna Anda dapat dengan mudah menyalin dan menempelkan cuplikan kode dari situs WordPress Anda.

Plugin Untuk Menampilkan Kode Di WordPress

Memasukkan cuplikan kode ke WordPress yang lebih mudah bagi Anda untuk disematkan dan memudahkan pengguna membaca.

1. SyntaxHighlighter Evolved

SyntaxHighlighter Evolved adalah plugin yang saya gunakan sebagai contoh pada artikel ini dan ini juga plugin yang saya gunakan pada blog centerklik, ini merupakan plugin code snipet yang populer untuk menyematkan potongan kode bernomor dan sintaks yang ingin di pasang dalam postinga WordPress. Yang perlu Anda lakukan adalah membungkus kode Anda dalam shortcode yang relevan dan akan ditampilkan seperti ini:

Syntax SyntaxHighlighter 1

Fitur Utama:

  • Menambahkan nomor baris ke cuplikan kode
  • Menambahkan penyorotan sintaks ke cuplikan kode
  • Pilihan warna tema yang berbeda
  • Dapat menambahkan CSS class khusus untuk opsi styling

2. Crayon Syntax Highlighter

Crayon Syntax Highlighter adalah plugin populer lainnya yang dapat menambahkan nomor baris dan sintaks kode ke cuplikan kode di postingan WordPress Anda. Bila dibandingkan dengan SyntaxHighlighter Evolved, Crayon Syntax Highlighter memiliki lebih banyak penyesuaian. Anda dapat mengkonfigurasi hampir semua hal tentang plugin di tab pengaturannya.

Anda juga bisa melakukan hal-hal seperti menduplikat secara otomatis gaya Sublime Text (editor kode populer):

code snippets crayon

Fitur Utama:

  • Menambahkan nomor baris ke cuplikan kode Anda
  • Menambahkan penyorotan sintaks
  • Mendukung 65 bahasa yang berbeda
  • Banyak style, beberapa di antaranya meniru editor kode populer
  • Box kode mudah di sesuaikan dengan tampilan tema WordPress Anda

3. oEmbed Gist

oEmbed Gist adalah plugin sederhana yang memungkinkan Anda dengan mudah menanamkan kode. Gist berasal dari GitHub dan merupakan cara mudah untuk berbagi cuplikan dan catatan kode. Untuk menggunakannya, Anda hanya perlu menempelkan kode Anda ke Editor utama dan membuat intisari publik.

Kemudian, Anda hanya perlu menempelkan URL intisari Anda ke Editor WordPress dan plugin akan secara otomatis menyematkan cuplikan kode Anda seperti ini:

code-snippets-gist

Fitur Utama:

  • Manfaatkan GitHub Gist
  • Sematkan kursor dengan menempelkan URL
  • Dapat menanamkan revisi tertentu atau file tunggal dari file multi-file

4. WP-GeSHi- Highlight

WP-GeSHi-Highlight adalah plugin lain yang menambahkan nomor baris dan Highlight sintaks kode yang Anda sisipkan di editor WordPress. Seperti namanya, ini didasarkan pada mesin Highlight GeSHi. Ini juga memungkinkan Anda menggunakan tag standart selama Anda menentukan bahasa pengkodean.

WP-GeSHi-Highlight ringan, baik dari segi fungsionalitas dan kode keluaran:

code-snippets-pastebin

Fitur Utama:

  • Menambahkan syntaxs Highlight menggunakan GeSHi
  • Menambahkan penomoran baris
  • Sematkan menggunakan tag
  • Tag standar dengan bahasa yang ditentukan
  • Ringan – hanya menambahkan satu permintaan HTTP

5. Pastebin

Pastebin adalah situs web lain untuk berbagi cuplikan kode. Ini sangat mirip dengan alat GitHub Gist yang saya sebutkan pada nomor tiga tadi. Dan seperti dengan GitHub Gist, plugin ini membuatnya sangat mudah untuk menanamkan kode Pastebin ke situs WordPress Anda.

Yang perlu Anda lakukan adalah menambahkan kode Anda ke Pastebin, maka Anda bisa langsung menempelkan URL Pastebin ke editor WordPress Anda untuk secara otomatis memasukkan potongan kode Anda seperti ini:

code-snippets-geshi

Apakah kode tersebut memiliki penyorotan sintaks akan bergantung pada pengaturan yang Anda gunakan di Pastebin.

Fitur Utama:

  • Sematkan kode langsung dari Pastebin
  • Termasuk nomor baris dan (opsional) syntaxs Highlight
  • Cukup tempel URL ke Editor WordPress
  • Bisa juga ditempelkan dengan menggunakan shortcode dan Pastebin ID

Dan itulah cara mudah untuk memasang atau menampilkan kode di postingan WordPress agar terlihat sempurna dan bekerja dengan baik saat di copy oleh pengunjung Anda. Dan juga beberapa plugin yang bisa Anda pilih untuk menjadikan WordPress mampu menampilkan kode dengan sempurna. Semoga artikel ini bermanfaat buat Anda dan selamat mencoba. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • muhajir shiddiq

    mantap artikelnya

    • Makasih gan,semoga mantab terus. 😀

  • onesetia82

    salam kenal gan …
    ma’af gan, saya sudah coba pasang plugin SyntaxHighlighter Evolved, tapi saya menemukan masalah.
    Tampilan kode hasil generate SyntaxHighlighter Evolved dalam posting jadi melebar ke samping (tidak otomatis scrool). Mungkin masalahnya terletak pada tema yg saya pakai, karena jika menggunakan tema lain tidak ada masalah, tapi saya sudah terlalu suka dengan tema yang saya gunakan.
    Ma’af apakah agan bisa memberi solusinya dengan masalah saya?
    Ini screenshootnya : [https://onesetia82.files.wordpress.com/2014/10/syntax.jpg]
    Terimakasih … 🙂

    • kalo begitu cari apa yang membuat beda di tema yang lain gan. pastinya itu masalah dengan css temanya gan. jadi g usah repot ngrubah plugin. ntar plugin di rubah klo update ya ngikut berubah.

      • onesetia82

        saya memakai tema JustBlue download dari web agan ini. Kalau agan ada waktu, boleh dicoba tema JustBlue lalu pasang plugin SyntaxHighlighter Evolved!
        karena saya newbie, kalau bisa tolong bantu saya dengan memberikan scriptnya agar plugin SyntaxHighlighter Evolved lancar di tema JustBlue tersebut … 🙂

Must Read...!
Theme WordPress Academic Responsive Free

Academic adalah Theme WordPress Responsive Gratis yang bisa digunakan untuk situs web lembaga pendidikan...

Smart Footer System – Ubah Tampilan Footer WordPress Menjadi Lebih Keren

Ketika Anda sedang merancang website baru, hal pertama yang mungkin Anda pikirkan adalah tentang...

Close