Hampir semua blogger, pencipta isi atau pengembang teknologi terkadang perlu menampilkan cuplikan kode yang disorot di blog mereka. Ini sendiri bisa menjadi sakit kepala. Namun, menyorot satu atau lebih baris dalam cuplikan ini mungkin juga diperlukan, dan sayangnya fungsi ini bukan bagian dari sebagian besar integrasi kode. Untungnya, plugin SyntaxHighlighter Evolved ada. Kami akan menunjukkan cara menggunakannya untuk menjaga kode tetap bersih dan mudah dibaca.
Sintaks Highlighter Berkembang
Instalasi dan aktivasi plugin itu sederhana. Anda dapat menemukannya di repositori plugin WP.org tapi pastikan itu dilakukan dengan baik oleh Alex Mills (Viper007Bond), karena memang banyak sekali hasilnya. Kami tahu, bagaimanapun, bahwa yang satu ini dapat diandalkan dan mutakhir. Selain itu, yang ini dilengkapi dengan blok khusus untuk editor Gutenberg. Belum lagi sejumlah parameter yang memungkinkan Anda mempersonalisasi pengalaman Anda, yang menjadikannya pilihan kami untuk jenis tugas ini.
Di menu Parameter dasbor WordPress Anda, Anda akan menemukan item baru bernama SyntaxHighlighter . Silakan dan klik di atasnya. Di sana Anda dapat menyesuaikan setiap hal kecil yang Anda perlukan untuk menyematkan cuplikan ke situs WordPress Anda.
Pengaturan SyntaxHighlighter
Halaman pengaturan untuk plugin relatif mudah. Salah satu elemen khusus yang kami sukai dari plugin ini adalah Anda mendapatkan banyak penyesuaian terkait cara kode ditampilkan di situs Anda. Anda dapat menambahkan kelas CSS ke embedding, sesuaikan padding nomor baris, pilih tema warna, gunakan tab pintar dan jeda baris, dan putuskan bagaimana setiap bahasa pengkodean di seluruh situs dimuat.
Kami ingin mendefinisikan tiga parameter khusus yang harus diketahui kebanyakan orang.
Versi plugin, nomor baris, dan ukuran tab
Yang pertama adalah versi plugin yang Anda muat. Meskipun plugin tetap mutakhir di repositori, Anda dapat memilih antara versi 2.x dan 3.x plug-in , tergantung pada bagaimana Anda ingin menampilkan kode Anda. Keduanya aman, namun, masing-masing menawarkan fitur spesifik yang tidak dimiliki oleh yang lain (pada saat penulisan).
Jika pengguna menyalin kode Anda adalah yang paling penting, versi 3.x akan dilakukan. Namun, jika milik Anda lebih berguna untuk tampilan daripada utilitas sebenarnya, maka baris baru dalam versi 2.x mungkin lebih baik untuk Anda, karena menghilangkan kebutuhan untuk menggunakan bilah gulir. untuk potongan kode besar.
Maka Anda perlu menunjukkan atau tidak nomor baris. Untuk potongan besar kode dan tutorial, nomor baris sangat berharga. Namun, bila Anda memiliki cuplikan pendek, tidak perlu melabelinya secara permanen sebagai baris 1 dan 2. Menghapusnya dapat meningkatkan tampilan kode secara signifikan.
Dan kemudian ada ukuran tab masih kontroversial. Opsi default adalah 4, tetapi Anda dapat mengubahnya ke nomor apa pun yang Anda inginkan. Termasuk nilai yang benar dari 2. (Ya, kami menyadari tidak ada nilai yang benar. Kami hanya menyukai 2 spasi untuk tab.)
Kode dan shortcode Anda
Jika Anda menggulir ke bagian bawah halaman Parameter , Anda akan melihat pratinjau kode yang besar, serta sejumlah besar parameter kode pendek. Waktu Anda akan dihabiskan dengan baik untuk melihatnya, hanya untuk melihat apa yang dapat dilakukan semua plugin untuk menampilkan potongan Anda. Selain itu, setiap perubahan yang Anda buat di atas pada tampilan kode dalam pengaturan di atas akan tercermin di sini. Jadi pastikan untuk menekan simpan setelah mengubah salah satu opsi.
Meskipun beberapa orang bukan penggemar kode pendek karena mereka dapat menautkan Anda ke plugin tertentu, menurut kami ini layak digunakan karena mereka cerdas dan mudah diingat. Jika tidak ada yang lain, Anda perlu mengingat dua hal dan kemudian plugin akan bekerja sebaik mungkin untuk Anda.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
Atau beberapa variasi. Jika Anda dapat mengingat, Anda yakin tentang berbagai hal yang dapat Anda lakukan dengan plugin ini. Meskipun Anda dapat menggunakan pengidentifikasi panjang, plugin SyntaxHighlighter dibangun dengan cukup baik untuk menyederhanakan pekerjaan Anda.
Gunakan kode pendek
Di mana pun Anda dapat membuat kode pendek, Anda dapat menggunakannya. Di Divi atau editor klasik, Anda dapat menggunakan modul Teks atau editor TinyMCE dan cukup menempelkan kode di antara kode pendek. Karena cara kerja tab Visual, kami sarankan menggunakan tab teks untuk mempertahankan pemformatan karakter khusus ini.
Jika Anda adalah pengguna Gutenberg / Block Editor, semuanya sesederhana itu. Anda dapat, sekali lagi, menggunakan blok teks untuk ini. Lebih mudah lagi, blok HTML khusus. Seperti di atas, tempel kode tersebut ke dalam tag kode pendek.
Lebih baik lagi, blok SyntaxHighlighter Evolved itu sendiri. Penginstalan plug-in mencakup blok Gutenberg sendiri; jadi jika Anda bukan kode pendek dan tidak ingin mengotak-atik pengaturan, Anda tidak perlu melakukannya. Temukan saja blok di bawah format dan masukkan ke dalam pesan atau halaman Anda.
Tidak masalah bagaimana Anda memasukkan kode, Anda akan melihat rendering yang sama di ujung depan situs WordPress Anda.
Untuk meringkas
Anda mungkin perlu menyajikan cuplikan kepada audiens Anda karena berbagai alasan. Mungkin Anda menulis tutorial atau memposting solusi untuk masalah umum yang dapat diambil dan digunakan oleh audiens sesuka mereka? Namun terkadang integrasi GitHub tidak memberikan jenis pengalaman yang Anda inginkan untuk pengguna Anda. Inilah saat Anda membutuhkan plugin seperti SyntaxHighlighter Evolved.
Hanya dengan beberapa klik, dengan sedikit penyesuaian dan blok atau kode pendek Gutenberg, audiens Anda akan menjelajahi kode Anda tanpa masalah.
