Salah satu aspek yang benar-benar hebat dari komunitas desain web adalah kesediaannya untuk berbagi solusi dan ide. Karena itu, banyak orang memilih untuk memposting tutorial dan cuplikan kode yang bermanfaat di blog mereka.
Saat menampilkan kode, sebaiknya buat cuplikan terlihat sebersih dan semudah mungkin dibaca. Anda juga ingin memastikan bahwa mudah bagi pengguna untuk menyalin dan menempel untuk digunakan sendiri.
Selain memposting cuplikan di frontend, ada juga beberapa alasan bagus untuk menambahkan penyorotan sintaks di dalam WordPress itu sendiri. Pertama, editor kode WordPress standar dapat menjadi rumit ketika mencoba menemukan kode tertentu – terutama pada halaman dan posting yang lebih panjang.
Berikut adalah kumpulan plugin WordPress gratis untuk membantu Anda menampilkan dan mengedit kode dengan indah.
Dirancang untuk digunakan dengan editor blok dan Klasik, Blok Kode Sorotan membuat menampilkan kode yang disorot sintaks menjadi mudah. Beberapa bahasa populer didukung, dan layar pengaturan yang disertakan memungkinkan Anda menyesuaikan tampilan.
Memanfaatkan penyorot sintaks Prism, Blok Sintaks Kode meningkatkan blok Kode yang ada. Ini memudahkan untuk menampilkan cuplikan kode yang diformat di bagian depan tanpa pekerjaan tambahan apa pun.
Selain itu, plugin menyertakan pilihan tema visual. Pilihan tambahan tersedia melalui Repositori tema prisma.
Blok Kode penyorotan sintaks telah dibangun dengan tujuan kinerja. Instal plugin dan secara otomatis akan menambahkan penyorotan sintaks ke blok Kode WordPress – termasuk blok yang ada.
Karena itu merender kode sisi server, tidak perlu mengantrekan JavaScript di front-end situs Anda. Dan, CSS hanya ditambahkan pada halaman yang berisi blok Kode. Ini juga kompatibel dengan Google AMP.
SyntaxHighlighter Evolved adalah plugin sederhana yang memungkinkan untuk menambahkan kode yang diformat dengan baik ke situs web WordPress Anda. Ini termasuk blok khusus untuk pengguna Gutenberg tetapi masih berfungsi dengan baik dengan editor Klasik juga. Selain itu, blok juga digunakan di WordPress.com.
Penggemar Penyorot Sintaks Crayon lama akan ingin melihat “reinkarnasi” ini.
Blok khusus yang disertakan memudahkan untuk menambahkan cuplikan yang disorot tetapi berfungsi di tempat lain dengan kode apa pun yang ditempatkan di antara <pre></pre> tag. Editor tema terintegrasi memungkinkan banyak penyesuaian.
Dengan 36 tema yang didukung, ada kemungkinan besar Penyorot Sintaks Saya akan cocok dengan indah dengan situs web WordPress Anda.
Plugin ini menggunakan KodeMirror library dan telah menyertakan 16 Shortcode berbeda yang dapat Anda gunakan untuk menampilkan kode dengan mudah.
Enlighter akan memungkinkan integrasi editor visual WordPress penuh di backend dan frontend situs Anda. Ini berarti editor TinyMCE familiar yang Anda lihat di dalam WordPress juga dapat ditampilkan di situs publik Anda.
Anda juga dapat menampilkan panel-tab untuk mengelompokkan beberapa cuplikan menjadi satu.
Prismatic memberi Anda tiga opsi untuk menampilkan kode: Prisma.js, Sorot.js dan Polos.
Dua yang pertama menggunakan pustakanya masing-masing, sedangkan yang ketiga menampilkan kode tanpa penyorotan sintaks (memungkinkan Anda untuk menyesuaikan tampilannya). Plugin ini berfokus untuk menjadi ringan dan hanya memuat CSS/JS saat dibutuhkan.
Kode Prettify menggunakan Google Code Prettify perpustakaan untuk secara otomatis menyorot kode apa pun di dalam <pre> atau <code> tag.
Sekarang, untuk meningkatkan Editor Post/Halaman WordPress, kami memiliki Penyorot Sintaks Editor HTML. Menyoroti kode di backend membuat hidup lebih mudah bagi pengembang.
Plugin ini tidak hanya menyoroti kode, tetapi juga akan mengembalikan posisi kursor Anda setelah halaman dimuat ulang (yang menghilangkan kekesalan hewan peliharaan yang umum).
Sorot Situs Anda
Penyorot sintaks adalah cara mudah untuk meningkatkan pengalaman pengguna, baik Anda berbagi cuplikan dengan dunia atau hanya mengedit kode Anda sendiri di backend.
Luangkan waktu untuk bereksperimen dengan satu atau lebih plugin di atas dan lihat mana yang paling cocok untuk Anda.
.
