Cara Menampilkan Cuplikan Kode yang Disorot di Situs WordPress Anda

Hampir setiap blogger teknologi, pembuat konten, atau pengembang terkadang perlu menampilkan cuplikan kode yang disorot di blog mereka. Itu bisa menjadi sakit kepala dengan sendirinya. Namun, menyorot satu baris atau beberapa baris di dalam cuplikan itu juga mungkin diperlukan, dan sayangnya fitur itu bukan bagian dari sebagian besar penyematan kode. Untungnya, plugin SyntaxHighlighter Evolved ada. Kami akan menunjukkan cara menggunakannya untuk menjaga kode tetap bersih dan mudah dibaca.

Berlangganan Saluran Youtube Kami

SyntaxHighlighter Berkembang

Menginstal dan mengaktifkan plugin sangat mudah. Anda dapat menemukannya di repositori plugin WP.org, tetapi pastikan Anda menyelesaikannya oleh Alex Mills (Viper007Bond) . Ada banyak plugin dengan nama dan fitur yang mirip, tetapi kami tahu plugin ini dapat diandalkan dan selalu diperbarui. Plus, yang ini hadir dengan blok khusus untuk editor Gutenberg. Belum lagi sejumlah parameter yang memungkinkan Anda menyesuaikan pengalaman Anda yang menjadikannya pilihan kami untuk tugas semacam ini.

Di bawah menu Pengaturan di dasbor WordPress Anda, Anda akan menemukan item baru berlabel SyntaxHighlighter . Silakan dan klik ke dalamnya. Di sana, Anda dapat menyesuaikan setiap hal kecil yang Anda perlukan untuk menyematkan cuplikan kode ke situs WordPress Anda.

Pengaturan Penyorot Sintaks

Halaman pengaturan untuk plugin ini relatif mudah. Salah satu elemen khusus yang kami sukai dari plugin ini adalah Anda mendapatkan banyak penyesuaian terkait bagaimana kode ditampilkan di situs Anda. Anda dapat menambahkan kelas CSS ke penyematan, menyesuaikan bantalan nomor baris, memilih tema warna, menggunakan tab cerdas dan bungkus kata, dan memutuskan cara memuat penyorotan bahasa pengkodean individu pada skala seluruh situs.

Kami ingin menyebutkan tiga pengaturan tertentu yang menurut kami harus diperhatikan oleh kebanyakan orang.

Versi Plugin, Nomor Baris, dan Ukuran Tab

Yang pertama adalah versi plugin yang Anda muat. Sementara plugin itu sendiri terus diperbarui pada repo, tergantung pada cara terbaik Anda ingin menampilkan kode Anda , Anda dapat memilih antara versi 2.x dan 3.x dari plugin . Keduanya aman, namun, mereka masing-masing menawarkan fitur spesifik yang tidak dimiliki oleh yang lain (setidaknya pada saat penulisan ini).

Jika pengguna yang menyalin kode Anda adalah yang paling penting, maka versi 3.x akan baik-baik saja. Namun, jika milik Anda lebih untuk tampilan daripada utilitas yang sebenarnya, pembungkusan kata versi 2.x mungkin lebih cocok untuk Anda karena menghindari perlunya bilah gulir pada potongan kode yang besar.

Kemudian Anda memiliki apakah akan menampilkan nomor baris atau tidak. Untuk potongan besar kode dan tutorial, nomor baris sangat berharga. Namun, ketika Anda memiliki cuplikan pendek, tidak perlu terus-menerus melabelinya sebagai baris 1 dan 2. Menghapusnya dapat membersihkan tampilan kode cukup banyak.

Dan kemudian ada ukuran tab yang selalu kontroversial. Opsi default ke 4, tetapi Anda dapat mengubahnya ke nomor apa pun yang Anda inginkan. Menyertakan nilai yang benar dari 2. (Ya, kami menyadari bahwa tidak ada nilai yang benar. Kami hanya menyukai 2 spasi untuk tab.)

Kode dan Shortcode Anda

Jika Anda menggulir ke bagian bawah halaman Pengaturan , Anda akan melihat pratinjau kode besar, serta sejumlah besar parameter kode pendek. Waktu Anda akan dihabiskan dengan baik untuk mempelajarinya, hanya untuk melihat apa yang dapat dilakukan semua plugin untuk menyorot cuplikan kode Anda. Selain itu, setiap perubahan yang telah Anda buat di atas tentang bagaimana kode ditampilkan 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 mengikat Anda ke plugin tertentu, kami pikir ini layak digunakan karena cerdas dan mudah diingat. Jika tidak ada yang lain, Anda perlu mengingat dua hal dan kemudian plugin akan melakukan yang terbaik untuk Anda.

• atau

   or  or  or...well, you get it</li>
          <li>[highlight 5-9]</li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  , dan itu diformat dan disorot.

  Menggunakan Kode Pendek

  Di mana pun Anda dapat membuat kode pendek, Anda dapat menggunakan ini. Di Divi atau editor klasik, Anda dapat menggunakan modul Teks atau editor TinyMCE dan cukup menempelkan kode di antara kode pendek. Kami menyarankan karena cara kerja tab Visual Anda menggunakan tab Teks untuk mempertahankan pemformatan karakter khusus.

  

  Jika Anda pengguna Gutenberg/Block Editor, semuanya sama sederhananya. Anda dapat, sekali lagi, menggunakan blok Teks untuk ini. Bahkan lebih mudah dari itu adalah blok HTML Kustom. Sama seperti di atas, rekatkan kode di dalam tag kode pendek.

  

  Bahkan lebih baik dari itu, bagaimanapun, adalah blok SyntaxHighlighter Evolved itu sendiri. Termasuk dalam instalasi plugin adalah Blok Gutenberg sendiri sehingga jika Anda bukan orang kode pendek dan tidak ingin mengutak-atik parameter, Anda tidak perlu melakukannya. Cukup temukan blok di bawah Memformat dan masukkan ke dalam posting atau halaman Anda.

  

  Terlepas dari bagaimana Anda memasukkan kode, Anda akan melihat rendering yang sama di ujung depan situs WordPress Anda.

  

  Menyelesaikan

  Ada banyak alasan Anda mungkin perlu menyajikan cuplikan kode kepada audiens Anda. Mungkin Anda menulis tutorial atau mungkin Anda memposting perbaikan masalah umum untuk diambil dan digunakan publik sesuai kebutuhan. Namun terkadang penyematan GitHub tidak memberikan pengalaman yang tepat untuk pengguna yang Anda inginkan. Saat itulah Anda membutuhkan plugin seperti SyntaxHighlighter Evolved. Dengan beberapa klik, sedikit penyesuaian, dan blok atau kode pendek Gutenberg, audiens Anda akan menjelajahi kode Anda tanpa masalah.

  Apa kegunaan yang dapat Anda temukan di situs Anda untuk menyorot kode seperti ini?

  Gambar unggulan artikel oleh Adil Bouyghajden / shutterstock.com