Code Mirror - динамичная подсветка кода в браузере

Что такое CodeMirror?

Code Mirror - это мощная библиотека Java Script для подсветки синтаксиса около сорока с лишним языков программирования и разметки. Главным отличием от весьма известного Syntax Highlighter является реализация динамической продвинутой подсветки кода буквально на ходу, как это к примеру реализовано в десктопных приложених типа Geany или Notepad++. Помимо всего прочего присутсву.т настройки клавиш быстрого доступа, показ ключевых слов по Ctrl+Space, выделение текущей строчки (где остановился курсор мышки), полу-автоматическая расстановка отступов и много многое другое.

Code Mirror

Пример простого использования

Будем использовать для распознавания и подсветки набранного PHP кода. Накидаем простейшую HTMl-страничку, содержащую одно единственное многострочное поле ввода Textarea с именем PHPCode.

...
    <link rel="stylesheet" href="js/lib/codemirror.css">		
    <script src="js/lib/codemirror.js"></script>
    <script src="js/mode/xml/xml.js"></script>
    <script src="js/mode/javascript/javascript.js"></script>
    <script src="js/mode/css/css.js"></script>
    <script src="js/mode/clike/clike.js"></script>
    <script src="js/mode/php/php.js"></script>
</head>
<body>
<div id="container">
	<textarea id="code" cols="60" rows="7"></textarea>
</div>
<script>
      var editor = CodeMirror.fromTextArea(document.getElementById("PHPcode"), {
        lineNumbers: true, // Нумеровать каждую строчку.
        matchBrackets: true,
        mode: "application/x-httpd-php",
        indentUnit: 2, // Длина отступа в пробелах.
        indentWithTabs: true,
        enterMode: "keep",
        tabMode: "shift"
      });
    </script>
</body>
</html>

Чтобы засветить один синтаксис интересуемого языка программирования иногда может понадобиться подключить вспомогательные наборы данных, как в текущем примере. Более подробную информацию читайте конечно же на официальном сайте данного проекта. Далее я лишь дам небольшие описания папок исходного дистрибутива:

  • demo - наборы демонстрационных примеров.
  • doc - документация.
  • keymap - наборы горячих клавиш под стиль редакторов Emacs и Vim.
  • lib - можно сказать ядро.
  • mode - наборы для подсветки (HTML, PHP, Java Script, My SQL, Delphi и ещё куча всякой всячины). Каждая папка содержит документ с примером.
  • test - какой-то набор тестов.
  • theme - сборник тем-стилей для изменения внешнего вида.


Есть шлифовальные машины для паркета всегда, недорого. . лучшие action камеры https://kitsmart.ru/action-camera/.

© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.