Pheodor Lab

Блог веб-разработчика

Прикручиваем подсветку кода к Django

Pheodor в 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(','),

 Результат:

3 комментария
Asert
30.01.2011 13:13
Спасибо, пригодилось.

Ответить
owlman
27.09.2012 12:41
Забавно. Долго искал как подсветку сделать. Плюнул, написал что-то подобное:
http://www.owlman.net/django/podsvetka-koda-v-tinymce-s-pomoshyu-highlight/
А сейчас только натолкнулся на Ваш пост.
Эх если бы раньше. Не пришлось бы время тратить. )))

Ответить
Pheodor
05.10.2012 00:19
Ну пост датируется августом 2010 года, видимо плохо искали :)
А в нынешнее время способов стало еще больше как на стороне фронтенда, так и бэкенда.

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