Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Roundups
Webdesign

25 Penyorot Sintaks: Dicoba dan Diuji

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Ketika Anda mulai mengambil penyorot sintaks untuk situs web Anda, atau IDE favorit Anda, Anda dengan cepat menemukan ada banyak opsi yang tersedia. Memilih mana yang akan digunakan bisa menjadi tugas yang menakutkan.

Hari ini, kita membuat proses memilih lebih mudah bagi Anda dengan mengumpulkan semua penawaran yang paling menonjol di bidang peninjau sintaks bertenaga JavaScript langsung, plugin WordPress, dan ekstensi IDE & paket untuk Sublime Text, Brackets and Atom.

Pengekor Bertanda JavaScript

Bagian besar dalam memilih penyorot sintaks bertenaga JavaScript adalah melihat bagaimana warna dan gaya bahasa yang ingin Anda gunakan. Untuk membantu dengan bagian persamaan itu, kita telah menyiapkan demo langsung untuk setiap sorotan yang akan kita bahas dalam artikel ini. Untuk setiap highlighter, ada tiga tema contoh yang ditampilkan. Anda dapat melihat seluruh demo di Github.

Koleksi sorotan yang akan kita perhatikan mendukung beragam bahasa di antara mereka, namun, karena kita adalah komunitas desain web, demo kita menunjukkan bagaimana pengalih perhatian menangani bahasa yang biasa kita lihat yang biasa digunakan oleh perancang web:

  • HTML
  • JavaScript
  • CSS
  • PHP
  • Penurunan harga
  • CoffeeScript
  • Handlebars
  • Jade
  • LESS
  • Sass
  • Stylus

Semua demo menunjukkan bagaimana masing-masing bahasa ini terlihat di bawah highlighter yang bersangkutan, terlepas dari apakah itu memiliki dukungan khusus untuk bahasa itu. Jika tidak ada penyorot khusus bahasa yang tersedia, demo akan kembali ke kemungkinan setara terdekat atau ke teks biasa.

Selain demo, Anda akan mendapatkan tangkapan layar seketika dari setiap penyorot, versi ringkas dari apa yang terlibat dalam penerapannya, ringkasan poin-poin pentingnya, informasi tambahan jika relevan, dan tautan ke daftar bahasa yang didukung , situs web dan repositori GitHub.

1. SyntaxHighlighter

SyntaxHighlighter sudah ada sejak 2004 dan dipercaya dengan sangat baik. 23 bahasa yang didukung adalah lebih banyak pemrograman daripada desain web yang berorientasi, jadi ini mungkin cocok untuk sebuah situs di pemrograman, tetapi kurang begitu untuk situs tentang desain web. Muncul dengan tujuh tema untuk dipilih.

SyntaxHighlighter Demo - Default Theme
SyntaxHighlighter Demo - Default Theme (html)
SyntaxHighlighter Demo - RDark Theme
SyntaxHighlighter Demo - RDark Theme (html)

Metode Penerapan

  1. Muat file JavaScript inti, lalu file JavaScript tambahan untuk setiap bahasa yang ingin Anda soroti.
  2. Muat file CSS inti, lalu file CSS tambahan untuk tema yang ingin Anda gunakan.
  3. Di bagian bawah halaman Anda jalankan fungsi JavaScript SyntaxHighlighter.all()
  4. Sertakan blok kode dalam elemen pra, menggunakan nama kelas untuk menentukan bahasa:

Link

2. prism

Satu keuntungan besar menggunakan Prism adalah memungkinkan Anda mengunduh custom build, termasuk hanya yang Anda butuhkan. Ini juga memiliki dukungan yang kuat untuk desain web bahasa yang digunakan dalam demo kita, serta dukungan untuk banyak bahasa lainnya. Untuk situs web yang terkait dengan desain web, ini adalah pesaing yang kuat, namun sejumlah besar bahasa yang didukungnya berarti itu juga akan bekerja dengan baik di situs terkait jenis pengkodean lainnya. Ini memiliki enam tema untuk dipilih.

Prism Demo - Default Theme
Prism Demo - Default Theme (html)
Prism Demo - Okaidia Theme
Prism Demo - Okaidia Theme (html)

Sistem Unduhan Khusus

Prisma memiliki dukungan untuk 61 bahasa, termasuk semua bahasa desain web yang kita gunakan dalam demo kita. Namun, ketika Anda mengunduh Prisma, Anda tidak perlu memasukkan semua bahasa ini; Anda dapat memilih hanya yang Anda butuhkan. Anda juga dapat memilih tema yang ingin Anda gunakan, maka JavaScript dan CSS yang diperlukan akan dibuatkan untuk Anda.

Setelah memilih tema dan bahasa yang Anda inginkan, unduh file JS dan CSS Anda di bagian bawah halaman unduhan.

Jika Anda memutuskan ingin menggunakan tema yang berbeda, cukup buat pemilihan tema baru dari bagian atas halaman dan unduh stylesheet yang telah diregenerasi.

Penggunaan metode

  1. Muat file JavaScript dan file CSS dari build yang Anda sesuaikan.
  2. Bungkus setiap blok kode dalam elemen pra, lalu di elemen kode di dalamnya, gunakan kelas elemen kode untuk menentukan bahasa:

Link

3. Highlight.js

Highlight.js memiliki jumlah bahasa dan tema yang didukung terbesar, dengan margin yang cukup signifikan, dan proses yang hebat untuk mengunduh custom build hanya dengan bahasa yang Anda butuhkan. Deteksi bahasa otomatis adalah fitur lain yang sangat kuat. Dengan begitu banyak pilihan bahasa dan tema tampaknya stabilo ini akan cocok untuk semua kasus penggunaan.

Highlightjs - Default Style
Highlight.js - Gaya Default (js)
Highlightjs - Railscasts Style
Highlight.js - Railscasts Style (js)

Highlight.js menyertakan sejumlah besar gaya (tema), dengan 54 terbundel dalam unduhan, dan beberapa di antaranya cocok dengan tema IDE populer seperti Monokai dan Railscasts. Mengingat jumlah file CSS termasuk Anda mungkin ingin menyalin hanya tema yang akan Anda gunakan ke dalam proyek Anda.

Daftar bahasa yang didukung juga sangat besar; Saya menghitung 118 tersedia saat ini, dengan semua bahasa desain demo web kita disertakan.

Saat Anda mengunduh Highlight.js, Anda dapat memilih dan memilih bahasa mana yang ingin digunakan dan mereka akan dimasukkan ke dalam satu file JavaScript untuk Anda.

Penggunaan metode

  1. Muat file Javascript yang Anda unduh, dan file CSS untuk tema yang Anda pilih.
  2. Di bagian bawah halaman Anda jalankan fungsi JavaScript hljs.initHighlightingOnLoad();
  3. Bungkus blok kode setiap elemen pra, dan kemudian dalam unsur kode di dalamnya. Deteksi bahasa bersifat otomatis, namun jika Anda perlu, Anda dapat menggunakan kelas elemen kode untuk menentukan bahasa:

Link

4. Rainbow

Pelangi adalah penyorot sintaks kecil yang dirancang agar dapat diperluas dan diberi tema, sehingga dapat menjadi pilihan tepat bagi mereka yang ingin melakukan kustomisasi. Penggunaan bahasa datanya untuk menentukan bahasa alih-alih kelas mungkin lebih istimewa dalam keadaan tertentu. Ini memiliki 14 tema yang tersedia, dengan beberapa tema IDE populer yang cocok seperti Monokai, Solarized dan Tomorrow Night.

Rainbow Demo - GitHub Theme
Rainbow Demo - GitHub Theme (css)
Rainbow Demo - Twilight Theme
Rainbow Demo - Twilight Theme (css)

Rainbow menyediakan pilihan bahasa inti yang solid, dan Anda dapat memutuskan mana yang ingin Anda gunakan saat mengunduh.

Penggunaan Metode

  1. Muat file utama Rainbow JavaScript, dan file CSS untuk tema yang Anda pilih.
  2. Muat file JavaScript tambahan untuk setiap bahasa yang ingin Anda soroti
  3. Bungkus setiap blok kode dalam elemen pra, dan kemudian di elemen kode di dalamnya. Gunakan data-language atribut pada elemen kode untuk menentukan bahasa:

Link

5. SHJS

SHJS adalah, seperti SyntaxHighlighter, paket yang berfokus pada bahasa pemrograman lebih dari bahasa desain web. Ini mendukung 39 bahasa dan memiliki 39 tema yang tersedia untuk digunakan.

SHJS Demo - Default Theme
SHJS Demo - Default Theme (html)
SHJS Demo - Navy Theme
SHJS Demo - Navy Theme (html)

Metode Penerapan

  1. Muat file utama SHJS JavaScript, dan file CSS untuk tema yang Anda pilih.
  2. Muat file JavaScript tambahan untuk setiap bahasa yang ingin Anda soroti
  3. Jalankan fungsi sh_highlightDocument (); baik menggunakan onload pada tag body pembuka, atau menggunakan jQuery untuk mendeteksi ketika dokumen sudah siap.
  4. Bungkus blok kode setiap elemen pra. Menggunakan kelas pada elemen pra untuk menentukan bahasa:

Link

6. Google Code Prettify

Kode Prettify mendukung 29 bahasa, sekali lagi dengan bias yang kuat terhadap bahasa pemrograman dan lebih sedikit dukungan untuk bahasa desain web. Autoloader URL tunggal memungkinkan Anda untuk menghindari mengunduh file JS atau CSS dan memuat semuanya melalui CDN, yang tentunya merupakan pendekatan yang cepat dan mudah. Mampu melewati menentukan bahasa, bukan hanya menerapkan prettyprint kelas ke elemen pra, juga dapat menghemat waktu.

Google Code Prettify Demo - Default Theme
Google Code Prettify Demo - Default Theme (md)
Google Code Prettify Demo - Sunburst Theme
Google Code Prettify Demo - Sunburst Theme (md)

Penggunaan metode

  1. Muat satu URL https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js melalui tag skrip, yang akan otomatis menghapus sintaks dan tema default.
  2. Jika Anda ingin menggunakan tema non-default, tambahkan namanya ke URL autoloader seperti: run_prettify.js? Skin=sunburst
  3. Deteksi bahasa bersifat otomatis, tetapi untuk menetapkan blok kode untuk disorot, bungkus dalam elemen pra dengan prettyprint kelas:

Link

WordPress Plugin

Harap dicatat, ada beberapa plugin penyorot sintaks di repositori WP yang cukup populer, namun tetap tidak akan dibahas dalam artikel ini. Alasan untuk ini adalah masalah WP baru-baru ini yang mengharuskan banyak plugin diperbarui untuk memastikan keamanan. Pada saat penulisan ini, semua plugin yang tercantum di bawah ini secara aktif dipelihara dan kompatibel dengan versi terbaru WordPress.

TIP: Dengan plugin sorotan syntax WordPress, terkadang tema aktif dapat mengganggu penampilan kode yang diinginkan. Jika blok kode yang disorot tidak terlihat benar, cobalah beralih tema cepat untuk melihat apakah itu masalahnya. Jika blok kode yang disorot tidak terlihat benar, lakukanlah cepat untuk melihat apakah itu pantas.

7. SyntaxHighlighter Evolved

SyntaxHighlighter Evolved adalah implementasi SyntaxHighlighter, penyorot berbasis JavaScript yang kita lihat di atas.

Setelah plugin dipasang dan diaktifkan, aplikasi akan ditempatkan dalam posting dengan menggunakan shortcode wrapper di sekitar kode yang ingin Anda sorot. Sebagai contoh:

Tips penggunaan

Ketika Anda mulai membuat pos baru, putuskan terlebih dahulu apakah Anda akan menggunakan mode "Visual" atau tidak. Jika Anda akan menggunakan mode "Visual" sama sekali, pastikan untuk menempelkan / ketikkan kode yang akan Anda soroti dalam mode "Visual" dan bukan dalam mode "Teks". Memasukkan kode Anda dalam mode "Visual" akan menghindarinya, mengubah hal-hal seperti tanda-tanda < ke  > entitas html seperti & lt; dan & gt;.

Jika Anda akan bekerja dalam mode "Visual", sebaiknya tambahkan pembuka dan tutup shortcode Anda terlebih dahulu, lalu tambahkan kode Anda di antara keduanya. Ini membantu memastikan kode Anda tidak rusak saat disimpan.

Link

8. Crayon Syntax Highlighter

Crayon Syntax Highlighter adalah solusi yang didukung PHP. Sementara itu dirancang terutama untuk digunakan sebagai plugin WordPress itu juga menggambarkan dirinya sebagai yang cocok untuk platform berbasis PHP.

Menggunakan Crayon di postingan Anda cukup intuitif karena menambahkan tombol ke bilah alat pengeditan tulisan Anda yang menampilkan jendela yang didedikasikan untuk membuat kode yang disorot. Anda diberi ruang untuk menempelkan kode Anda, daftar tarik-turun untuk memilih bahasa yang digunakan, dan beberapa opsi lain yang mengendalikan berbagai aspek tampilan kode.

Salah satu opsi yang disediakan adalah pilihan tema yang berbeda untuk digunakan per blok kode, yang berarti Anda dapat menggunakan beberapa tema per halaman.

Crayon Syntax Highlighter - Classic Theme
Crayon Syntax Highlighter - Tema Klasik (js)
Crayon Syntax Highlighter - Epic Geeks Theme js
Crayon Syntax Highlighter - Epic Geeks Theme (js)

Ini memiliki daftar panjang bahasa yang didukung, dengan total 63 saat ini termasuk banyak yang biasa digunakan dalam desain web. Untuk melihat daftar bahasa yang Anda perlukan untuk menginstal plugin di situs WordPress dan lihatlah halaman pengaturannya di area admin.

Link

9. Prism Syntax Highlighter untuk WordPress

Prism Syntax Highlighter for WordPress adalah implementasi dari penyorot JavaScript Prism yang kita bahas sebelumnya.

Plugin ini tidak menggunakan shortcode wrapper atau jendela Add Code. Sebaliknya, untuk setiap blok kode yang ingin Anda tampilkan, Anda membuat bidang kustom bernama tepat yang baru, contoh js_code_example, dan tambahkan kode Anda ke dalamnya. Tujuan pendekatan ini adalah memastikan kode Anda tidak terganggu oleh editor pos WP.

Untuk menampilkan kode dari bidang khusus Anda, Anda akan menggunakan kode pendek yang menentukan nama bidang khusus dan bahasa yang akan disorot mis.

Link

Ekstensi dan Paket IDE

Di bagian ini kita akan melihat tiga IDE populer: Sublime Text, Brackets and Atom. Kita tidak akan membahas sorotan sintaks yang ada di dalam salah satu dari ketiga hal ini, yang dalam banyak kasus Anda akan menemukan cukup secara default.

Sebaliknya, kita akan memeriksa ekstensi dan paket yang tersedia untuk memperluas penyorotan sintaks dengan masing-masing. Dengan cara ini, jika Anda menemukan sorotan default di salah satu IDE ini tidak memenuhi kebutuhan Anda, Anda akan dapat melompat langsung ke daftar ini dan menemukan ekstensi atau paket yang tepat untuk Anda.

Catatan: Di mana pun ada beberapa opsi padat untuk menyoroti bahasa tertentu, kita telah menyertakan beberapa info singkat untuk membantu memutuskan mana yang paling sesuai dengan Anda. Namun jika Anda tidak melihat informasi tambahan pada paket, Anda dapat berasumsi itu karena kita sudah memeriksa pilihan yang tersedia dan menominasikan pilihan yang menonjol.

Paket Teks Sublim

Saatnya untuk mencakup beberapa paket Teks Sublim yang akan meningkatkan penyorotan sintaks untuk bahasa pilihan Anda. Kita akan membahas sejumlah contoh, dimulai dengan Penandaan Penurunan Markas.

Catatan: semua screenshot berikut menggunakan tema Spacegrey.

10. Markdown Extended

Paket ini adalah yang saya gunakan secara pribadi dalam Sublime Text karena menjaga konsistensi dalam penampilan dengan sisa lingkungan pengkodean.

Link

11. MarkdownLight

MarkdownLight mengubah warna dokumen Anda menjadi putih, tetapi tidak mengubah tampilan dari kode penurunan harga Anda di luar pewarnaan dan cetak miring.

Link

12. MarkdownEditing

MarkdownEditing sangat berbeda dari dua paket lainnya. Ini memusatkan kode pada halaman dan melakukan hal-hal seperti mengkonversi > penanda blok ke sisi kiri tebal perbatasan. Paket ini memiliki IDE Anda tampak seperti editor posting, membuatnya cocok jika Anda mencari menggunakan Teks Sublim sebagai alat penulisan konten.

Link

13. Handlebars

Sekarang saatnya untuk beberapa setang. Paket ini juga berfungsi di Atom Editor, jadi jika Anda menggunakan Atom dan Teks Sublim, Anda dapat memiliki beberapa keakraban di keduanya.

Link:

14. Jade

Giliran Jade untuk beberapa peningkatan sorotan (seperti yang Anda tahu, saya sedikit penggemar Jade).

Link

15. CSS3

Paket ini meningkatkan penyorotan sintaks untuk beberapa penambahan baru ke CSS. Ini menggantikan paket CSS3_Syntax sebelumnya untuk Sublime Text 2.

Link

16. Stylus

Links

17. Sass

Paket ini menyediakan sorotan untuk Sass dan SCSS, serta pintas penyelesaian Coding Zen.

Link

18. Syntax Highlighting untuk Sass

Perbedaan antara paket "Sass" di atas dan paket ini tidak jelas dari tangkapan layar, karena varian yang lebih signifikan adalah bagaimana masing-masing menangani pelengkapan otomatis. Jika Anda menghabiskan banyak waktu untuk menulis Sass, saya sarankan untuk memberikan masing-masing paket ini sebuah persiapan menyeluruh untuk melihat mana yang paling sesuai dengan alur kerja Anda.

Link

19. KURANG

Link

20. Better CoffeeScript

Link

Brackets Extensions

Kurung ada banyak, banyak ekstensi penyorotan sintaks, namun pada saat ini mereka kebanyakan untuk bahasa pemrograman daripada bahasa desain web.

Yang mengatakan, ini sebagian besar karena IDE sudah memiliki dukungan built-in untuk menyoroti banyak bahasa, termasuk yang mungkin Anda gunakan sebagai bagian dari desain web. Beberapa pengecualian adalah Handlebars, Jade, CoffeeScript dan Stylus. Untuk tiga pertama, ekstensi sorotan sintaks disajikan di bawah ini. Sayangnya, tidak ada ekstensi sorotan sintaks yang kuat untuk Stylus dapat ditemukan pada saat ini.

Screenshot berikut semua menggunakan tema Braket default - dan kami akan mulai lagi dengan Handlebars.

21. brackets-handlebars-templates

Perbedaan Handlebars yang menyoroti sebelum dan sesudah pemasangan ekstensi ini tidak melompat ke Anda, karena itu agak tenggelam di antara tag HTML. Namun, jika Anda langsung membandingkan kode spesifik Handlebars, Anda akan melihat perubahan warna di dalamnya.

Link

22. jade-brackets

Ini adalah plugin penyorot Jade yang resmi untuk Braket, yang dikelola oleh orang yang mengelola Jade, jadi Anda dapat memastikan kecepatannya tetap tinggi!

Link

23. Brackets CoffeeScript

Link

Atom Packages

Atom mungkin memiliki sorotan sintaks default terkuat dari ketiga IDE yang telah kita bahas di sini hari ini. Untuk sebagian besar bahasa yang Anda gunakan untuk desain web, Anda tidak akan memerlukan apa pun kecuali sorotan yang ada di dalamnya. Namun, untuk Jade dan Stylus, berikut adalah beberapa rekomendasi.

24. language-jade

Link

25. Stylus

Link

Penutup

Untuk penyorot JavaScript dan plugin WordPress, boleh dibilang pendekatan terbaik adalah mulai dengan melihat daftar bahasa yang didukung. Setelah memilih daftar pantauan yang mendukung bahasa yang perlu Anda tampilkan, bandingkan fitur-fitur lain untuk membuat keputusan Anda.

Dalam hal ekstensi dan paket IDE, semua opsi yang disajikan di atas adalah solid dan banyak digunakan sehingga Anda tidak bisa terlalu jauh salah.

Jika Anda tidak yakin jalan mana yang harus dilakukan dengan penyorotan sintaks untuk situs web atau IDE Anda sebelumnya, semoga ke depannya sekarang akan jauh lebih jelas untuk Anda!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.