В этой статье, я хочу представить вам отличный редактор кода, который можно легко добавить на ваш сайт.
CodeMirror — это качественный редактор кода, написанный на JavaScript. Он включает в себя много дополнений и подсвечивание разных языков программирование.
Демо
Демо можно посмотреть на по этой ссылке.
Скачать исходники
Скачать исходники плагина можно по этой ссылке.
Простая инструкция к использованию
- После того как вы скачали исходники, вам нужно подключить плагин к вашему сайту.
<script src="lib/codemirror.js"></script> <link rel="stylesheet" href="lib/codemirror.css"> <script src="mode/javascript/javascript.js"></script>
Не забудьте поправит пути для codemirror.js, javascript.js и codemirror.css из подключаемых файлов выше.
- После того как подключили все файлы — зайдите на ваш сайт и откройте консоль. Если ошибок не, то продолжайте этап 3 (ниже), если есть, то исправьте их, скорее всего вы не правильно указали путь до файлов.
- Чтобы начать использовать плагин, вам нужно его инициализировать.
var myCodeMirror = CodeMirror(document.body);
Данный код подключит редактор к
<body>тегу на вашем сайте. Если вы хотите указать какой-либо другой блок или элемент, то просто укажите нужный class или id.После обновления страницы, редактор начнет работать над
<body>, но внутри ничего не будет. Чтобы что-то добавить туда следуйте 4-ому этапу(ниже). - Если вы хотите, добавить что-то изначально в редактор, то вам нужно добавить дополнительные опции для плагина, как показано на примере ниже:
var myCodeMirror = CodeMirror(document.body, { value: "function myScript(){return 100;}\n", mode: "javascript" });value — это то, что появится внутри редактора при загрузке страницы.
mode — это какой синтаксис используется для текущего редактора.
На этом все. Нравится ли вам такой плагин?
Если у вас есть какие-либо вопросы — задавайте их ниже под этой запись. Я буду рад вам помочь.
