Подсветка кода синтаксиса для связки markdown+highligth.js+Django

Добрый день уважаемые читатели. На днях я решил занятся переделкой своего блога и перевести его с PHP на Django. И так как в старом блоге была подсветка синтаксиса надо было ее реализовать и здесь.

Для реализации данной функции я выбрал популярную библиотеку highlight.js. В этой библиотеке очень понравилось большой набор поддерживаемых языков, много тем оформления, и конечно же простота использования. Еее подключение выглядит в html (в нашем случае нужно их добавить в шаблон) выглядит так:

<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Далее чтобы подсветить нужный нам синтаксис нужно в тег добавить класс с название языка программирования:

<pre><code class="python">
#код на python
</code></pre>

Для публикации статей в блог я решил использовать markdown разметку. И для ее реализации на python есть прекрасная библиокета markdown.
Библиотека достаточно хорошая и имеет как встроенные расширения, так и возможность создавать их самостоятельно. Перевод из markdown-разметки в html осуществляется с помощью функции markdown(), на вход которой подается размеченный текст, а на выходе получается html, например:

import markdown
html = markdown.markdown("#Заголовок")
print html
<h1>Заголовок</h1>

К сожалению по умолчанию данная функция по умолчанию не определяет разметку для тегов и тем более не определяет для них классы, но к счастью данный подключив при прасинге расширение Fenced Code Blocks.
Данное расширение позволяет выделять куски кода и добавить к ним класс, и что мне понравилось больше всего он позволяет это делать выделяя фрагмент кода, как на GitHub, т.е. с помощью (‘‘‘), например:

```python
# print "ok"
```

Ну что же подключим расширение и посмотрим на результат:

import markdown
text = """
         ```python
             print "ok"
         ```
         """
html = markdown.markdown(text, ['fenced_code'])
print html
<pre><code class="python">print "ok"</code></pre>

Собственно говоря это и есть тот код, который при попадании в шаблон обработает highlight.js

Один комментарий на “Подсветка кода синтаксиса для связки markdown+highligth.js+Django

  1. да елы палы, последняя попытка

    Полагаю, подразумевалось такое
    <pre><code class="python">
    #код на python
    </code></pre>

    вместо
    <pre><code class="python">
    #код на python
    </class></pre>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>