пятница, 4 марта 2016 г.

Как мигрировать с SyntaxHighlighter на Ace Editor без изменения старых данных?

В свое время очень влюбился в проект SyntaxHighlighter от Alex Gorbatchev. При этом больше всего мне нравился синтаксис добавления подсветки кода <pre class="brush: js">.... some code</pre>.

Но достаточно недавно решил перевести весь блог на просмотр кода с использованием Ace Editor, который был разработан в рамках проекта Cloud9 IDE. Демонстрацию функций самого редактора можно посмотреть на этой странице DEMO.

Дальше речь пойдет именно о том как добавив просмотр кода через Ace Editor использовать синтаксис SyntaxHighlighter. Ну и конечно в этом случае не нужно менять будет старые страницы.

Решение достаточно простое:
1. Подключаем Ace Editor на просмотр кода.
2. Дополняем скрипт
 var map = {
 as3: "ace/mode/actionscript",
 csharp: "ace/mode/actionscript",
 css: "ace/mode/css",
 js: "ace/mode/javascript",
 jscript: "ace/mode/javascript",
 javascript: "ace/mode/javascript",
 java: "ace/mode/java",
 php: "ace/mode/php",
 ps: "ace/mode/powershell",
 powershell: "ace/mode/powershell",
 py: "ace/mode/python",
 python: "ace/mode/python",
 rails: "ace/mode/ruby",
 ror: "ace/mode/ruby",
 ruby: "ace/mode/ruby",
 scala: "ace/mode/scala",
 sql: "ace/mode/sql",
 xml: "ace/mode/html",
 html: "ace/mode/html"
};
 
 qsa("pre").filter(function(el) { return el.className.includes('brush: '); }).forEach(function (codeEl) { 
  highlight(codeEl, {
            mode: map[/brush: ([a-zA-Z-]+)/g.exec(codeEl.className)[1]],
            theme: '',
            startLineNumber: 1,
            showGutter: true,
            trim: true
        });
 });

Внимание: Все используемые режимы отображения (mode) должны быть подгружены в скрипты, см. Подключаем Ace Editor на просмотр кода.
В коде учтены не все доступные подсветки SyntaxHighlighter, для расширения просто добавьте необходимое описание в переменную map.

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

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