Подсветка кода в 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). Как видите все очень просто и понятно, удачи!

Теги:

3 комментария к “Подсветка кода в textarea”

  1. Игорь
    Октябрь 15th, 2010 at 10:14
    1

    Спасибо=))

    [Ответить]

  2. Александр
    Май 29th, 2013 at 14:46
    2

    А можно как-то после редактирования кода в этом же textarea передать содержимое в переменную JavaScript (Для отправки Ajax) ?

    [Ответить]

    ZekMan Reply:

    С этим вопросом к сожалению ничем не могу помочь.

    [Ответить]

Написать комментарий