Только собрался писать данную статью — тут же вырубили электричество на 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(','),

Результат: