Подсветка кода в textarea
Наткнулся на один очень интересный проект, под названием CodeMirror. Он позволяет подсвечивать большинство популярных языков программирования. Все подробности ниже.И так, поддерживаемые языки:
- JavaScript
- XML/HTML
- CSS
- SPARQL
- HTML mixed-mode
- HTML+PHP mixed-mode
- Python
- Lua
- Ruby
- SQL
- PLSQL
- diff
- Groovy
- C#
Как он выглядит в работе можно посмотреть на странице проекта выбрав интересующий язык.
А теперь о использовании.
Работает все довольно просто, для начала нужно скачать скрипт, на момент написания статьи это 0,67 (обновления смотрим на страничке проекта). Из архива нам необходимы лишь папочки JS и CSS. Разбор полета приведу на примере HTML «mixed-mode».
1 2 3 | <textarea id="code" cols="120" rows="30"> <!-- произвольный html/css код --> </textarea> |
Чуть пониже:
1 2 3 4 5 6 7 8 | <script type="text/javascript"> var editor = CodeMirror.fromTextArea('code', { height: "350px", parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js", "parsehtmlmixed.js"], stylesheet: ["css/xmlcolors.css", "css/jscolors.css", "css/csscolors.css"], path: "js/" }); </script> |
Как видно из кода, в JS задаются такие параметры как высота textarea а так же какие именно мы хотим подсвечивать языки (parserfile и stylesheet). Как видите все очень просто и понятно, удачи!
Спасибо=))
[Ответить]
А можно как-то после редактирования кода в этом же textarea передать содержимое в переменную JavaScript (Для отправки Ajax) ?
[Ответить]
ZekMan Reply:
Июнь 3rd, 2013 at 21:19
С этим вопросом к сожалению ничем не могу помочь.
[Ответить]