Highlight + TinyMCE. подсветка кода в тексте и в редакторе

Пятница, 20 Дек. 2013 by Kirill Shershen


Доработал подсветку кода в тексте и редакторе Tinymce. 

Для подсветки кода в тексте достаточно в главном шаблоне(у меня base.html) добавить инициализацию highlight.js 

<link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/zenburn.css">
<script src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>

теперь любой текст обрамленный в <pre><code class="...">...</code></pre> будет подсвечен в соответствии с классом.

Дальше настраиваем редактор. Скачиваем плагин отсюда, устанавливаем в /static/tinymce/plugins и прописываем настройки в tiny_mce_init.js 

...,
plugins : ..., lstng,
...,
theme_advanced_buttons...: ...,lstng,
...,
content_css : "http://yandex.st/highlightjs/6.1/styles/default.css"

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

Плагин был взят с этой страницы, немного доправлен, убрано лишнее. 

Теги: django , tinymce


blog comments powered by Disqus