TinyMCE. Плагин подсветки синтаксиса syntaxhighlighter.

Для подсветки синтаксиса будем использовать JS библиотеку syntaxhighlighter.
При подключении всех файлов библиотеки, чтобы засветить необходимый код необходимо заключить его в тег <pre>

Например

<pre name="code" class="php">
... some code here ...
</pre>

Чтобы не писать постоянно это обрамление во время редактирование поста или страницы, написан плагин для wysiwyg TinyMCE, который будет делать это за нас.
Качаем плагин и размещаем его в папке tiny_mce/plugins/
Для подключения плагина добавляем изменения в код инициализации редактора

plugins : "......,syntaxhl,......
theme_advanced_buttons1 : ".....,syntaxhl,....

Необходимо заточить плагин под наши нужды. Для этого открываем файл tiny_mce/plugins/syntaxhl/js/dialog.js, ищем строчки:

textarea_output = '<pre class="' + options + ';' + f.syntaxhl_language.value += ';
textarea_output brush:">';
textarea_output += tinyMCEPopup.editor.dom.encode(f.syntaxhl_code.value);
textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);
tinyMCEPopup.close();

и заменяем их на:

f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/</g,'<');  
f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/>/g,'>');
textarea_output = '<pre name="code" ';
textarea_output += 'class="' + f.syntaxhl_language.value + '" cols="50" rows="15">';
textarea_output += f.syntaxhl_code.value;
textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);
tinyMCEPopup.close();

Если вы все сделали правильно, то в панели редактора должна появится оранжевая иконка. highlight
При нажатии на нее выскочит диалоговое окно, в которое необходимо ввсести код, который необходимо подсветить.

TinyMCE. Плагин подсветки синтаксиса syntaxhighlighter.  
Необходимо учесть, в самом TinyMCE код не светится. Чтобы убедится в работоспособности, достаточно посмотреть исходный HTML код.
Если то, что вы вставили содержится в теге <pre name="code" class="php">.....</pre>, значит все работает.
Теперь необходимо настроить подсветку синтаксиса во фронтенде, следуя инстукциям syntaxhighlighter.

Интересное

Комментарии

  • Александр
    14.03.2010 в 07:36
    Все сделал как указано в заметке. Нету кнопочки:(
    ответить
  • Александр
    14.03.2010 в 07:40

    все, получилось. Спасибо

    ответить
  • BaNru
    21.06.2010 в 14:09

    Аффтар, у тя ошибка в коде
    (//g,'>')
    смысл заменять шило на шило…надо же на мыло По твоему примеру написал подключение Highlight.js
    С небольшими правками.
    Кому может понадобиться http://g63.ru/? show_news=1277052160.10868506379599277481030187631502&news_section=204%20238%20233%2032%20225%20235%20238%20227#bagfix_1

    И аффтар, рекомендую тебе тоже пробежаться по статье.

    ответить
  • Cyber
    02.02.2012 в 14:10

    «аффтар», — пиши слова правильно. юзер.

    ответить

Чтобы оставлять комментарии, авторизируйтесь

Войти через OpenID

рейтинг3+-
Популярные
Точки входа
Наверх