среда, 17 февраля 2016 г.

Как встроить Ace Editor для просмотра программного кода на сайте?

В рамках проекта Cloud9 IDE был разработан отличный Javascript редактор кода Ace. На мой взгляд основными приймуществами редактора является скорость работы, число поддерживаемых языков и тем. Весь перечень заявленных возможностей в оригинале выглядядит следующим образом:
  • Syntax highlighting for over 110 languages (TextMate/Sublime Text.tmlanguage files can be imported)
  • Over 20 themes (TextMate/Sublime Text .tmtheme files can be imported)
  • Automatic indent and outdent
  • An optional command line
  • Handles huge documents (four million lines seems to be the limit!)
  • Fully customizable key bindings including vim and Emacs modes
  • Search and replace with regular expressions
  • Highlight matching parentheses
  • Toggle between soft tabs and real tabs
  • Displays hidden characters
  • Drag and drop text using the mouse
  • Line wrapping
  • Code folding
  • Multiple cursors and selections
  • Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
  • Cut, copy, and paste functionality
Так же данный редактор может работать в режиме просмотра, вот его мы и будем использоваться для отображения кода на нашем сайте.

 Шаг 1. Добавляем скрипты на сайт.

Для подключения можно добавляем небольшой css для тега pre и подключаем Ace Editor. Исходники доступны на GitHub - Ace Editor. Подключить к блогу можно и не делая копию исходных файлов, а просто используя CND http://www.jsdelivr.com. Кроме этого нам понадобится так же подключить подсветку нужного языка, в моем случае подключем подсветку для javascript.
<style>
 pre {
   display: block;
   margin: 0 0 10px;
   font-size: 13px;
   line-height: 20px;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre-wrap;
   border: 1px solid rgba(0,0,0,0.15);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
</style>

<script src="https://cdn.jsdelivr.net/ace/1.2.3/min/min/ace.js"></script>
<script src="https://cdn.jsdelivr.net/ace/1.2.3/min/ext-static_highlight.js"></script>
<script src="https://cdn.jsdelivr.net/ace/1.2.3/min/mode-javascript.js"></script>

<script>
 var highlight = ace.require("ace/ext/static_highlight")
    var dom = ace.require("ace/lib/dom")
    function qsa(sel) {
        return Array.apply(null, document.querySelectorAll(sel));
    }
    qsa(".code").forEach(function (codeEl) {
        highlight(codeEl, {
            mode: codeEl.getAttribute("ace-mode"),
            theme: '',
            startLineNumber: 1,
            showGutter: true,
            trim: true
        });
    });
</style>

Шаг 2. Добавляем код для отображения

<pre ace-mode="ace/mode/html" class="code">
 <a href="./v_les.html">Идти в лес!</a>
</pre>
Для отображение других языков подключаем нужную подсветку (файлы с именем mode-*.js) и заменяем значение атрибута "ace-mode" в теге pre
<script src="https://cdn.jsdelivr.net/ace/1.2.3/min/mode-clojure.js"></script>
<pre ace-mode="ace/mode/clojure" class="code">
(let [i (atom 0)]
  (defn generate-unique-id
    "Возвращает различные числовые ID для каждого вызова."
    []
    (swap! i inc)))
</pre>

Как скрыть нумерацию строк в Ace Editor?

Скрыть нумерацию строк можно передав в атребуте showGutter значение false. Например,
<script>
var highlight = ace.require("ace/ext/static_highlight")
    var dom = ace.require("ace/lib/dom")
    function qsa(sel) {
        return Array.apply(null, document.querySelectorAll(sel));
    }
    qsa(".code").forEach(function (codeEl) {
        highlight(codeEl, {
            mode: codeEl.getAttribute("ace-mode"),
            theme: '',
            startLineNumber: 1,
            showGutter: false,
            trim: true
        });
    });
</style>

Преймущества использования CDN

Используя CDN http://www.jsdelivr.com можно добавить все скрипты одним подключением. Входим http://www.jsdelivr.com/projects/ace и выбираем нужные скрипты. Вместо
<script src="https://cdn.jsdelivr.net/ace/1.2.3/min/min/ace.js"></script>
<script src="https://cdn.jsdelivr.net/ace/1.2.3/min/ext-static_highlight.js"></script>
<script src="https://cdn.jsdelivr.net/ace/1.2.3/min/mode-javascript.js"></script>
можно вставить
<script src="https://cdn.jsdelivr.net/g/ace@1.2.3(min/ace.js+min/ext-static_highlight.js+min/mode-javascript.js)"></script>

Комментариев нет:

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