Cara Menampilkan Syntax Code Pada Postingan WordPress. Apakah sobat ingin menampilkan kode pada posting blog WordPress sobat? Jika sobat mencoba menambahkan kode seperti teks biasa, maka WordPress tidak akan menampilkannya dengan benar.

WordPress menjalankan konten sobat melalui beberapa filter pembersihan setiap kali sobat menyimpan postingan. Filter ini ada untuk memastikan seseorang tidak menyuntikkan kode melalui editor pos untuk meretas situs web sobat.

Pada artikel ini, saya akan menunjukkan kepada sobat cara yang tepat dan mudah menampilkan kode di situs WordPress sobat. Saya akan menunjukkan kepada sobat 3 metode yang berbeda dan sobat dapat memilih salah satu yang paling sesuai atau menurut sobat paling mudah.

1. Menampilkan Kode Pada Classic Editor

Pertama yang harus sobat lakukan adalah mengubah / meng-encode markup kode yang akan sobat tampilkan, disini saya menggunakan tool online yaitu WEB2.0Generator .

Meng-encode kode html

Setelah sobat memasukan kodenya, klik ‘Encode text’.

Meng-encode kode html

Salin kode yang sudah ter-encode tersebut dan tempel kodenya pada editor teks dan bungkus di sekitar tag <pre> dan <code>.

Contoh:

<pre><code>paste disini kode tadi</code></pre>

Menampilkan Kode Pada Classic Editor

Sekarang sobat dapat menyimpannya atau melakukan pratinjau untuk melihat kodenya. Hasilnya akan terlihat seperti berikut.


<p> Ini contoh satu </p> <div class="jangklik"> Ini contoh dua </div> <span class="jangklik"> Ini contoh tiga </div>

Browser sobat akan mengonversi entitas HTML dan pengguna akan dapat melihat dan menyalin kode yang benar.

2. Menampilkan Kode Pada Gutenberg

Metode ini disarankan untuk pemula dan pengguna yang tidak perlu sering menampilkan kode. Cukup edit posting blog atau halaman di mana sobat ingin menampilkan kode.

Pada layar edit post, tambahkan blok kode baru ke posting sobat.

Cara menambahkan blok kode

Sekarang sobat dapat menambahkan kode di area teks blok.

menambahkan kode ke postingan

Setelah itu, Sobat dapat menyimpan postingnya dan mempratinjau untuk melihat blok kode apakah sudah ditampilkan dengan benar.

tampilan php kode yang ditampilkan didalam postingan

Diatas adalah contoh kode php yang ditampilkan pada postingan, tapi mungkin akan berbeda-beda tampilannya tergantung template yang sobat pakai.

3. Menampilkan Kode Menggunakan Plugin

Untuk metode ini, saya akan menggunakan plugin WordPress untuk menampilkan kode pada postingan. Metode ini direkomendasikan untuk pengguna yang sering menampilkan kode dalam artikel mereka.

Berikut adalah keuntungan yang bisa sobat dapatkan jika menggunakan metode ini:

  • Sobat dapat dengan mudah menampilkan kode dalam bahasa pemrograman apa pun,
  • Menampilkan kode dengan penyorotan sintaks dan nomor baris,
  • Pengguna dapat dengan mudah mempelajari kode dan menyalinnya.

Pertama, Sobat perlu menginstal dan mengaktifkan plugin SyntaxHighlighter Evolved.

Setelah aktivasi, Sobat dapat melanjutkan dan mengedit posting blog dimana sobat ingin menampilkan kode. Pada layar edit posting, tambahkan blok ‘SyntaxHighlighter Code‘ ke posting sobat.

menambahkan syntaxhighlighter

Sobat sekarang akan melihat kode blok baru di editor postingan dimana sobat dapat memasukkan kodenya. Setelah menambahkan kode, sobat perlu memilih pengaturan blok dari kolom kanan.

pengaturan kode blok

Pada bahasa pada Code Language, karena kode dalam contoh diatas menggunakan kode php jadi saya memilih PHP pada code language-nya. Setelah itu, sobat dapat mematikan nomor baris, memberikan nomor baris pertama, menyorot setiap baris yang sobat inginkan, dan mematikan fitur untuk membuat tautan dapat diklik.

Setelah selesai, simpan posting sobat dan klik tombol pratinjau untuk melihat kodenya ditampilkan.

tampilan kode blok syntaxhighlighter

Plugin ini dilengkapi dengan sejumlah skema dan tema warna. Untuk mengubah tema warna, Anda harus mengunjungi halaman Settings » SyntaxHighlighter.

Pengaturan SyntaxHighlighter

Dari halaman Settings, Sobat dapat memilih tema warna dan mengubah pengaturan SyntaxHighlighter. Sobat dapat menyimpan pengaturan untuk melihat pratinjau dari blok kode di bagian bawah halaman.

pratijau kode blok

Menggunakan SyntaxHighlighter Pada Classic Editor

Jika sobat masih menggunakan classic editor, maka di sini adalah cara menggunakan plugin SyntaxHighlighter pada classis editor untuk menambahkan kode ke posting blog WordPress sobat.

Cukup bungkus kode sobat di sekitar tanda kurung siku dengan nama bahasa. Misalnya, jika sobat akan menambahkan kode PHP, maka Anda akan menambahkannya seperti ini:

[css]

body {
margin: 0;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ffffff;
}

a {
color: #0088cc;
text-decoration: none;
}

[/css]

Contoh lain jika sobat ingin menambahkan kode HTML maka sobat bungkus kode html-nya seperti ini:

[html] <a href=”example.com”>A sample link</a>
[/html]

Yap itulah 3 cara yang dapat sobat lakukan untuk Menampilkan Syntax Code Pada Postingan WordPress, sobat tinggal pilih salah satu yang menurut sobat mudah. Sekian dari saya semoga bermanfaat.

Jika ada yang ingin ditanyakan bisa tulis dikolom komentar, sebisa mungkin akan saya jawab 😀