Прикручиваем подсветку кода к Django
Только собрался писать данную статью — тут же вырубили электричество на 3 часа, остался без интернета, домашнего телефона и мобильной связи (как не странно, в этот момент баланс на мобильнике был равен 4 рублям). Но сейчас уже все работает, поэтому начну.
В прошлой статье я писал, что в планах прикрутить подсветку кода, сегодня я решил этим заняться и как-раз описать весь процесс.
Поискав информацию про подсветку кода в джанго, я не нашел ничего интересного и решил реализовать все по своему.
Сразу результат:
def test(text):
print text
test("This is test")
Подсвечивается на стороне клиента с помощью highlight.js.
Прикручиваем
Для начала качаем сам скрипт и кидаем папку из архива, highlight, в директорию с медиа файлами. Теперь добавляем в шаблон:
<link href="path_to_highlight/styles/school_book.css" rel="stylesheet" media="all"/>
<script type="text/javascript" src="path_to_highlight/highlight.pack.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
где path_to_highlight — путь к директории хьюлайтера.
Теперь проверим работоспособность — для этого на странице должен быть следующий код:
<pre class="highlight">
<code class="python">
print "Hello world!"
</code>
</pre>
Изначально скрипт подсвечивает такую конструкцию, ее можно поменять, как это сделать написано в readme файле хьюлайтера, который лежит в архиве со всем остальным. сlass=»python» думаю понятно на что указывает.
Интеграция с админ панелью
Так как я использую TinyMCE в админке, то для удобства вставки кода мне нужна кнопка. По дефолту tinymce не обладает такой кнопочкой, а плагины сторонних разработчиков обычно пишутся под определенный хьюлайтер или под свои нужды с кучей лишнего для меня кода, по крайней мере ничего подходящего я не нашел. Вывод: пишем свой плагин для tinymce.
Пару десятков минут и плагин готов, скачать можно здесь.
Открываем конфиг tinymce и добавляем кнопку:
plugins: "...,highlight",
theme_advanced_buttons1: "...,....,highlight,",
// Если присутствуют параметры valid_elements и
// extended_valid_elements, то нужно добавить туда наши теги
valid_elements : [
'-pre','-code',....,....
].join(','),
extended_valid_elements: [
'pre[class|style|title|alt|id]',
'code[class|style|title|alt|id]',
......
].join(','),
Результат: