Kode penyorotan sintaks dengan Javascript [ditutup]

109

Pustaka Javascript apa yang dapat Anda rekomendasikan untuk sintaks yang menyorot <code> blok di HTML?

(Tolong satu saran per jawaban).

javascript html syntax syntax-highlighting mlambie
sumber
shjs.sourceforge.net
Firoz Khan

Jawaban:

103

StackOverflow menggunakan pustaka Prettify .

AaronSieb
sumber
Saya mendukung ini. Google Code menggunakannya untuk penyorotan repo mereka sendiri (sejak mereka menulisnya) dan secara otomatis mendeteksi bahasanya.
Karan
Tentunya menggunakan salah satu yang "secara otomatis" mendeteksi bahasa hanya memberi bobot lebih pada mesin / browser klien ...
James
2
Kamu bisa memberikan bahasanya ke Prettify jika kamu mengetahuinya, itu akan meningkatkan performa. Ini tidak digunakan di StackOverflow karena jumlah penonton bahasa yang besar.
Vincent Robert
Baru saja menambahkan ini ke situs web saya, dan ini hebat serta sangat mudah digunakan!
Lawrence Dol
@ Vincent: ini meningkatkan lebih dari sekadar kinerja ;-)
SamB
44

Saya baru-baru ini mengembangkan yang disebut pelangi.

Tujuan desain utama adalah membuat pustaka inti sangat kecil dan membuatnya sangat mudah bagi pengembang untuk diperluas.

Lihat http://rainbowco.de .

Craig
sumber
2
Saya baru saja menemukan Rainbow hari ini - menurut saya itu bisa membedakan lebih halus daripada Prettify (seperti misalnya, bisa mengetahui kapan rdf:typedigunakan sebagai elemen dan kapan itu atribut).
Roger_S
3
Ini harus naik ke atas, Craig. Saya mencoba semua solusi lain dan hanya Rainbow yang menangani Python dengan benar dan memiliki stylesheet tema yang dapat dibaca . Plugin luar biasa!
Blender
15

jQuery Syntax Highlighter adalah yang baru berdasarkan Google Prettify - penyorot sintaks javascript biasa yang sangat sangat populer.

Ini mendukung hal-hal seperti codedan preblok, dapat menggunakan nama kelas seperti language-javascriptuntuk menunjukkan kami ingin menyorotnya, serta wordwrap. Anda dapat menyalin dan menempel kode dengan memilihnya secara normal daripada harus membuka tampilan mentah seperti yang lainnya. Ini dapat disesuaikan lebih lanjut dengan menggunakan atribut data HTML5 data-shatau melalui opsi yang ditentukan saat inisialisasi. Pilihan stabil yang bagus yang diperbarui secara teratur.

balupton
sumber
Penulis sebenarnya mengatakan itu didasarkan pada Prettify Google, bukan SyntaxHighlighter. Tampak seperti SyntaxHighlighter 3, tetapi tampaknya membutuhkan lebih sedikit pekerjaan untuk menyiapkannya. Terima kasih untuk tautannya!
Tieson T.
15

Bagaimana dengan Prism oleh Lea Verou.

Dari pengumuman postingan blognya pada bulan Juni (2012):

  • Itu kecil. Inti hanya 1,5KB yang diperkecil & di-gzip.
  • Ini sangat bisa dikembangkan. Tidak hanya mudah untuk menambahkan bahasa baru (yang diberikan dengan setiap penyorot sintaks hari ini), tetapi juga untuk memperluas yang sudah ada.
  • Ini mendukung paralelisme melalui Web Workers, untuk kinerja yang lebih baik dalam kasus tertentu.
  • Itu tidak memaksa Anda untuk menggunakan markup khusus Prisma, bahkan nama kelas khusus Prisma, hanya markup standar yang harus Anda gunakan. Jadi, Anda bisa mencobanya sebentar, hapus jika Anda tidak suka dan tidak meninggalkan jejak.
Ilya Tuvschev
sumber
Ini akhirnya menjadi pilihan terbaik dari semua jawaban bagi saya karena kemudahan menambahkan definisi bahasa baru.
Mike Grace
5

Bagaimana tentang:

syntaxhighlighter

highlight.js

JSHighlighter

Chris Pietschmann
sumber
21
Pencarian Google sederhana juga akan memberi saya daftar itu - tetapi mana yang Anda sukai dan mengapa?
viam0Zah
5

Jika Anda menggunakan jQuery, ada Cabai:

http://code.google.com/p/jquery-chili-js/

Yang harus Anda lakukan adalah memasukkan jquery-chili.js dan recipes.js, dan lakukan highlight dengan 

$("code").chili();

Itu harus memahami bahasanya sendiri.

Edu Felipe
sumber
Tautan ke contoh di halaman itu semuanya mengarah ke domain kedaluwarsa yang penuh dengan iklan sehingga agak sulit untuk mendapatkan gambaran tentang seperti apa penyorot ini.
Nathan Osman
5

Saya sangat senang dengan SHJS . Ini mendukung perkumpulan bahasa dan tampaknya cukup cepat dan akurat.

Inilah contoh di mana saya menggunakannya di blog saya . Saya menggunakan file CSS khusus saya sendiri yang mensimulasikan penyorotan sintaks Coda . Kirimi saya email jika Anda ingin menggunakannya.

Andrew Hedges
sumber
4

jQuery.Syntax adalah penyorot sintaks yang sangat cepat dan ringan. Ini memiliki pemuatan dinamis dari file sumber sintaks dan terintegrasi dengan rapi menggunakan CSS atau modelines.

Ini dikembangkan secara khusus untuk mengisi celah - yaitu: pengurai sintaks sisi klien yang cepat, bersih.

ioquatix.dll
sumber
sayangnya pesan FpML standar dianggap SPAM :)
ehosca
@ehosca, apakah Anda dapat memberikan penjelasan tentang masalah yang Anda hadapi?
ioquatix
ketika saya menempelkan xml di goo.gl/PPcDx ke goo.gl/qSqm9 dikatakan konten tidak valid, tampaknya spam. semoga ini membantu.
ehosca
Anda perlu memasukkan beberapa jeda baris di teks, jika tidak maka akan terlihat seperti spam tautan. Saya tidak dapat mengingat rumus persis yang saya gunakan, tetapi menurut saya jika Anda memiliki lebih dari satu URL per baris, teks tersebut dianggap spam - ini karena banyak bot yang melakukan spamming ke sistem ( sintaks-highlighing.com ).
ioquatix
3

Jika Anda mencari penyorotan sintaks di editor dalam browser, coba CodeMirror .

rplevy
sumber
3

Saya tidak sedang argumentatif tetapi hanya berpikir perlu disebutkan bahwa jika Anda menggunakan CMS atau platform blog, maka menggunakan penyorot backend lebih baik karena alasan yang jelas - Lihat Geshi ( http://qbnz.com/highlighter/ ) jika Anda tertarik. Sebenarnya Anda dapat menyiapkan server Anda untuk mengurai konten HTML melalui teknologi backend - jadi tidak diperlukan penyorot JS sama sekali. (Satu-satunya fungsi yang mereka tambahkan adalah kemampuan untuk mencetak / menyalin [menggunakan swf].)

James
sumber
2
Itu tidak jelas bagiku. Mengapa menggunakan penyorot backend lebih baik?
Evan P.
1
Ya, saya, juga, sangat ingin mengetahui apa yang "jelas" tentang memilih untuk mengirim tanggapan yang lebih besar kepada klien ...
ZenMaster
1
Saya lebih suka penyorotan sintaks tetap ada pada perangkat yang JS tidak diaktifkan. Selain itu, penyorot sisi klien memiliki biaya waktu proses yang bisa sangat besar jika Anda memiliki banyak kode untuk disorot. Yang mengatakan, itu tergantung pada kasus penggunaan spesifik Anda :)
James
Perangkat apa yang JS tidak diaktifkan?
Jack Giffin