Obszar tekstowy, który potrafi wyróżniać składnię w locie?

Przechowuję wiele bloków HTML w CMS ze względu na łatwiejszą konserwację. Są reprezentowani przez <textarea>s.

Czy ktoś zna jakiś widget JavaScript, który potrafi wyróżniać składnię HTML w textareapodobnym lub podobnym formacie , pozostając jednocześnie zwykłym edytorem tekstowym (bez WYSIWYG lub zaawansowanych funkcji)?

Nie można osiągnąć wymaganego poziomu kontroli nad prezentacją w zwykłym obszarze tekstowym.

Jeśli nie masz nic przeciwko , spróbuj CodeMirror lub Ace (dawniej skywriter i bespin ) lub Monaco (używane w MS VSCode).

Z duplikatu wątku - obowiązkowy link do Wikipedii: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Oto odpowiedź, jaką udzieliłem na podobne pytanie ( Online Code Editor ) dla programistów :

Najpierw możesz zajrzeć do tego artykułu:
Wikipedia - Porównanie edytorów kodu źródłowego opartych na JavaScript .

Aby uzyskać więcej, oto kilka narzędzi, które wydają się pasować do Twojego żądania:

• EditArea - Demo jako FileEditor będący rozszerzeniem Yii - ( Licencja oprogramowania Apache, BSD, LGPL )

  Oto EditArea, darmowy edytor javascript dla kodu źródłowego. Pozwala pisać dobrze sformatowany kod źródłowy z numeracją linii, obsługą tabulatorów, wyszukiwaniem i zamianą (z regexp) oraz podświetlaniem składni na żywo (konfigurowalnym).

• CodePress - Demo Joomla! CodePress Plugin - ( LGPL ) - Nie działa w Chrome i wygląda na to, że programowanie zostało zakończone.

  CodePress to internetowy edytor kodu źródłowego z podświetlaniem składni napisanym w JavaScript, który barwi tekst w czasie rzeczywistym podczas pisania w przeglądarce.

• CodeMirror - Jedna z wielu wersji demonstracyjnych - ( licencja w stylu MIT + opcjonalne wsparcie komercyjne )

  CodeMirror to biblioteka JavaScript, której można użyć do stworzenia stosunkowo przyjemnego interfejsu edytora dla treści podobnych do kodu - programów komputerowych, znaczników HTML i podobnych. Jeśli tryb został napisany dla edytowanego języka, kod będzie pokolorowany, a edytor opcjonalnie pomoże ci z wcięciem

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

  Ace to samodzielny edytor kodu napisany w JavaScript. Naszym celem jest stworzenie internetowego edytora kodu, który pasuje i rozszerza funkcje, użyteczność i wydajność istniejących natywnych edytorów, takich jak TextMate, Vim lub Eclipse. Może być łatwo osadzony w dowolnej stronie internetowej i aplikacji JavaScript. Ace został opracowany jako główny edytor dla Cloud9 IDE i następca Projektu Mozilla Skywriter (Bespin).

CodePress robi to, podobnie jak EditArea . Oba są open source.

Polecam EditArea do edycji na żywo podświetlonego pola tekstowego składni.

Aktualizacja: Bespin jest teraz ACE, o czym wspomina tutaj najwyżej oceniana odpowiedź. Zamiast tego użyj ACE.

Muszę iść z Bespin Mozilli. Został zbudowany przy użyciu funkcji HTML5 (więc jest szybki i szybki, ale nie obsługuje starszych przeglądarek), ale zdecydowanie jest niesamowity w użyciu i bije wszystko, z czym się spotkałem - prawdopodobnie dlatego, że wspiera go Mozilla, a oni rozwijają Firefoksa, więc tak. .. Istnieje również wtyczka jQuery, która zawiera rozszerzenie, dzięki czemu jest nieco łatwiejsza w użyciu z jQuery.

Możesz podświetlić tekst <textarea>za pomocą <div>starannie umieszczonego za nim tekstu .

sprawdź Podświetl tekst w obszarze tekstowym .

Jedyny znany mi edytor ma podświetlanie składni i powrót do obszaru tekstowego to Mozilla Bespin . Google dookoła za osadzanie Bespin, aby zobaczyć, jak osadzić edytora. Jedyną znaną mi stroną, która korzysta z tego obecnie, jest bardzo alfa Galeria Mozilla Jetpack (na stronie przesyłania Jetpack) i możesz chcieć zobaczyć, jak ją zawierają.

Jest też post na blogu na temat osadzania i ponownego użycia edytora Bespin, który może ci pomóc.

Dlaczego reprezentujesz je jako obszary tekstowe? To jest mój ulubiony:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Ale jeśli używasz CMS, prawdopodobnie jest lepsza wtyczka. Na przykład wordpress ma rozwiniętą wersję:

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