() translation by (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.
Metode Penerapan
- Muat file JavaScript inti, lalu file JavaScript tambahan untuk setiap bahasa yang ingin Anda soroti.
- Muat file CSS inti, lalu file CSS tambahan untuk tema yang ingin Anda gunakan.
- Di bagian bawah halaman Anda jalankan fungsi JavaScript
SyntaxHighlighter.all() - Sertakan blok kode dalam elemen
pra, menggunakan nama kelas untuk menentukan bahasa:
1 |
<pre class="brush: js"> |
2 |
// code here |
3 |
</pre>
|
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.
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
- Muat file JavaScript dan file CSS dari build yang Anda sesuaikan.
- Bungkus setiap blok kode dalam elemen
pra, lalu di elemenkodedi dalamnya, gunakan kelas elemenkodeuntuk menentukan bahasa:
1 |
<pre>
|
2 |
<code class="language-javascript"> |
3 |
// code here |
4 |
</code>
|
5 |
</pre>
|
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.
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
- Muat file Javascript yang Anda unduh, dan file CSS untuk tema yang Anda pilih.
- Di bagian bawah halaman Anda jalankan fungsi JavaScript
hljs.initHighlightingOnLoad(); - Bungkus blok kode setiap elemen
pra, dan kemudian dalam unsurkodedi dalamnya. Deteksi bahasa bersifat otomatis, namun jika Anda perlu, Anda dapat menggunakan kelas elemenkodeuntuk menentukan bahasa:
1 |
<pre>
|
2 |
<code>
|
3 |
// code here |
4 |
</code>
|
5 |
</pre>
|
6 |
|
7 |
OR... |
8 |
|
9 |
<pre>
|
10 |
<code class="language-javascript"> |
11 |
// code here |
12 |
</code>
|
13 |
</pre>
|
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 menyediakan pilihan bahasa inti yang solid, dan Anda dapat memutuskan mana yang ingin Anda gunakan saat mengunduh.
Penggunaan Metode
- Muat file utama Rainbow JavaScript, dan file CSS untuk tema yang Anda pilih.
- Muat file JavaScript tambahan untuk setiap bahasa yang ingin Anda soroti
- Bungkus setiap blok kode dalam elemen
pra, dan kemudian di elemenkodedi dalamnya. Gunakandata-languageatribut pada elemen kode untuk menentukan bahasa:
1 |
<pre>
|
2 |
<code data-language="javascript"> |
3 |
// code here |
4 |
</code>
|
5 |
</pre>
|
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.
Metode Penerapan
- Muat file utama SHJS JavaScript, dan file CSS untuk tema yang Anda pilih.
- Muat file JavaScript tambahan untuk setiap bahasa yang ingin Anda soroti
- Jalankan fungsi
sh_highlightDocument ();baik menggunakanonloadpada tagbodypembuka, atau menggunakan jQuery untuk mendeteksi ketika dokumen sudah siap. - Bungkus blok kode setiap elemen
pra. Menggunakan kelas pada elemenprauntuk menentukan bahasa:
1 |
<pre class="sh_javascript"> |
2 |
// code here |
3 |
</pre>
|
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.
Penggunaan metode
- Muat satu URL
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.jsmelalui tag skrip, yang akan otomatis menghapus sintaks dan tema default. - Jika Anda ingin menggunakan tema non-default, tambahkan namanya ke URL autoloader seperti:
run_prettify.js? Skin=sunburst - Deteksi bahasa bersifat otomatis, tetapi untuk menetapkan blok kode untuk disorot, bungkus dalam elemen
pradenganprettyprintkelas:
1 |
<pre class="prettyprint"> |
2 |
// code here |
3 |
</pre>
|
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:
1 |
[code language="html"] |
2 |
<header>
|
3 |
<h1>Example HTML</h1> |
4 |
</header>
|
5 |
<main class="style"> |
6 |
<p>Some text</p> |
7 |
</main>
|
8 |
[/code] |
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.
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.
1 |
[prism field=js_code_example language=javascript] |
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!
