Подсветка синтаксиса в textarea

21 апреля 2008

3.4 из 5

Небольшой обзор скриптов для подсветки синтактиса в реальном времени в <textarea>.

Такие скрипты пригодятся, если вы, например, делаете CMS, в которой есть редактор шаблонов.

Codepress

Пожалуй, самый известный. Отлично работает в Firefox, но не работает в Opera, Safari (WinXP). Кроме простой подсветки умеет делать автозаполнение (дописывает парные скобки). Возможно использовать несколько таких редакторов на одной странице.
P.S. Прочитав комментарии на официальном сайте, можно избавиться от некоторых багов.

EditArea

Подсвечивает PHP, CSS, Javascript, Python, HTML, XML, VB, C, C++, Pascal, Basic, Brainf*ck, имеет локализацию для 9 языков. Работает в IE 6 × 7, Firefox 1.5 × 2, Opera 9 и Safari (WinXP). Кроме того, имеет более «богатый» интерфейс.

CodeMirror

Подсвечивает, к сожалению, только HTML, JavaScript и XML. Работает в Firefox 1.5+, IE6+, Safari 3+, Opera 9.5+.

Helene

Распознает только PHP. Работает в Firefox 1.5 × 2, Opera 9 и Safari (WinXP).

Я не старался перечислить все имеющиеся скрипты, это всего лишь известные мне узко специализированные скрипты. Большинство WYSIWYG редакторов имеют похожие встроенные инструменты, но иногда из-за ряда причин их использование невозможно.

Будем признательны тем, кто в комментариях укажет ссылки на другие похожие скрипты.

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

как выглядит

какой тег

жирный текст

жирный текст

курсивный тект

курсивный тект

~~зачеркнутый текст~~

<s>зачеркнутый текст</s>

подчеркнутый текст

подчеркнутый текст

ссылка

<a href="адрес">ссылка</a>

function foo() { ... }

<pre><code>function foo() { ... } </code></pre>

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

как выглядит

какой тег

жирный текст

жирный текст

курсивный тект

курсивный тект

~~зачеркнутый текст~~

<s>зачеркнутый текст</s>

подчеркнутый текст

подчеркнутый текст

ссылка

<a href="адрес">ссылка</a>

function foo() { ... }

<pre><code>function foo() { ... } </code></pre>

CodePress, к сожалению, иногда портит (добавляет лишние строчки, невидимые символы, и т.д.) файлы, которые он редактирует, даже в лисе. Поэтому я все-таки отказался от его использования. Все редакторы на основе designMode() обладают тем же самым недостатком. EditArea жутко тяжел, поскольку он основан на TinyMCE (зачем???). Вроде были недоделанные скрипты, которые были сделаны чисто на textarea, и это здорово. ИМХО самый труъ путь, хотя бы из соображений совместимости. Кстати, есть еще эмуляторы emacs с неплохой подсветкой синтаксиса. Это действительно тема. Вот только его придется "выдирать" с сайта, по-моему он отдельно не распространяется.

codemirror - глючит во всех браузерах выделение и установка курсора в нужное место в ffoxe-3 у меня было 2 textarea из них один подсвеченный codemirror дак я не мог птом отредактировать текст в др textarea фокус с него перелетает на textarea с codemirror

могу рекомендовать свой так сказать, частный, скрипт. Сайт http://int21.al.ru , образец работы скрипта - http://int21.al.ru/sources/pascal/globe.html

error, тут подборка для подсветки в textarea, а не на странице

Ничего не работает.

некрокоммент так сказать )
демо как раз риал-тайм подсветки в textarea на базе qooxdoo:
http://demo.qooxdoo.org/current/playground/#

а по ссылкам в статье уже все скрипты сдулись по ходу (:

CodeMirror
Supported modes:
JavaScript
XML/HTML
CSS
HTML mixed-mode
Python
PHP
diff
C, Java, C#, and similar
sTeX, LaTeX
Haskell
Smalltalk
PL/SQL
Lua
Scheme
reStructuredText
YAML

Спонсоры

Последние комментарии

Мы в соцсетях

Блогорол