Textarea yang dapat melakukan penyorotan sintaks dengan cepat?

Saya menyimpan sejumlah blok HTML di dalam CMS untuk alasan perawatan yang lebih mudah. Mereka diwakili oleh <textarea>s.

Apakah ada yang tahu Widget JavaScript dari beberapa jenis yang dapat melakukan penyorotan sintaksis untuk HTML dalam textareaatau serupa, sambil tetap menggunakan editor teks biasa (tidak ada WYSIWYG atau fungsi lanjutan)?

Tidak mungkin untuk mencapai tingkat kontrol yang diperlukan atas presentasi dalam textarea biasa.

Jika Anda setuju dengan hal itu, coba CodeMirror atau Ace (sebelumnya penulis skenario dan bespin ) , atau Monako (digunakan dalam MS VSCode).

Dari utas rangkap - tautan wikipedia wajib: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Berikut adalah respons yang telah saya lakukan terhadap pertanyaan serupa ( Editor Kode Online ) pada programmer :

Pertama, Anda dapat melihat artikel ini:
Wikipedia - Perbandingan editor kode sumber berbasis JavaScript .

Untuk lebih lanjut, berikut adalah beberapa alat yang sepertinya sesuai dengan permintaan Anda:

• EditArea - Demo sebagai FileEditor yang merupakan Ekstensi Yii - ( Lisensi Perangkat Lunak Apache, BSD, LGPL )

  Berikut adalah EditArea, editor javascript gratis untuk kode sumber. Ini memungkinkan untuk menulis kode sumber yang diformat dengan baik dengan numerotasi garis, dukungan tab, pencarian & penggantian (dengan regexp) dan penyorotan sintaksis langsung (dapat disesuaikan).

• CodePress - Demo Joomla! Plugin CodePress - ( LGPL ) - Tidak berfungsi di Chrome dan sepertinya pengembangan telah berhenti.

  CodePress adalah editor kode sumber berbasis web dengan penyorotan sintaksis ditulis dalam JavaScript yang warna teks secara real time saat sedang diketik di browser.

• CodeMirror - Salah satu dari banyak demo - ( lisensi gaya MIT + dukungan komersial opsional )

  CodeMirror adalah perpustakaan JavaScript yang dapat digunakan untuk membuat antarmuka editor yang relatif menyenangkan untuk konten seperti kode - program komputer, markup HTML, dan sejenisnya. Jika mode telah ditulis untuk bahasa yang Anda edit, kode akan berwarna, dan editor secara opsional akan membantu Anda dengan indentasi

• Ace Ajax.org Cloud9 Editor - Demo - ( Mozilla tri-lisensi (MPL / GPL / LGPL) )

  Ace adalah editor kode mandiri yang ditulis dalam JavaScript. Tujuan kami adalah untuk membuat editor kode berbasis web yang cocok dan memperluas fitur, kegunaan dan kinerja editor asli yang ada seperti TextMate, Vim atau Eclipse. Dapat dengan mudah disematkan di halaman web dan aplikasi JavaScript apa pun. Ace dikembangkan sebagai editor utama untuk Cloud9 IDE dan penerus Proyek Mozilla Skywriter (Bespin).

CodePress melakukan ini, seperti halnya EditArea . Keduanya open source.

Saya akan merekomendasikan EditArea untuk mengedit langsung sintaksis textarea hightlighted.

Pembaruan: Bespin sekarang ACE, yang disebutkan oleh jawaban berperingkat tertinggi di sini. Gunakan ACE sebagai gantinya.

Harus pergi dengan Bespin oleh Mozilla. Itu dibangun menggunakan fitur HTML5 (jadi cepat dan cepat, tetapi tidak mendukung browser lama), tapi pasti luar biasa untuk menggunakan dan mengalahkan semua yang saya temui - mungkin karena itu adalah Mozilla yang mendukungnya, dan mereka mengembangkan Firefox jadi ya. .. Ada juga Plugin jQuery yang berisi ekstensi untuk membuatnya sedikit lebih mudah digunakan dengan jQuery.

Anda dapat menyorot teks dalam <textarea>, menggunakan <div>ditempatkan dengan hati - hati di belakangnya.

periksa Highlight Text Inside a Textarea .

Satu-satunya editor yang saya tahu memiliki highlight sintaksis dan fallback ke textarea adalah Mozilla Bespin . Google berkeliling karena menyematkan Bespin untuk melihat cara menyematkan editor. Satu-satunya situs yang saya tahu yang menggunakan ini sekarang adalah Mozilla Jetpack Gallery yang sangat alfa (dalam mengirimkan halaman Jetpack) dan Anda mungkin ingin melihat bagaimana mereka memasukkannya.

Ada juga posting blog tentang penyematan dan penggunaan kembali editor Bespin yang dapat membantu Anda.

Mengapa Anda mewakili mereka sebagai textareas? Ini adalah favorit saya:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Tetapi jika Anda menggunakan CMS, mungkin ada plugin yang lebih baik. Sebagai contoh, wordpress memiliki versi yang dikembangkan:

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/