xandeadx.ru Блог музицирующего веб-девелопера

Javascript → CodeMirror — библиотека для удобного редактирования кода

Опубликовано в

Описание

CodeMirror

CodeMirror это Javascript библиотека, которая превращает textarea в подобие IDE, с подсветкой синтаксиса, табуляцией, автоотступами, автодополнением и другими полезными фишками.

Поддерживает подсветку основных языков программирования — C, C#, CSS, Javascript, HTML, PHP, SQL.

Есть API и множество настроек.

Библиотека знаменита тем, что используется в Google Code Playground.

Использование

1. Подключаем основной скрипт библиотеки и скрипты языков, редактирование которых будет осуществляться:

<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/mode/javascript/javascript.js"></script>

Некоторые языки зависят от других, например чтобы редактировать PHP код, нужно помимо mode/php/php.js подключить mode/clike/clike.js.

2. Подключаем основной CSS файл библиотеки и одну из тем:

<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<link rel="stylesheet" href="codemirror/theme/default.css">

3. Превращаем textarea в нормальный редактор:

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('code'), {
  lineNumbers: true,               // показывать номера строк
  matchBrackets: true,             // подсвечивать парные скобки
  mode: 'application/x-httpd-php', // стиль подсветки
  indentUnit: 4                    // размер табуляции
});
Написанное актуально для CodeMirror 2.x
Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании