Подсветка кода на сайте

категория: jQuery
Так как на моем блоге будет масса кода, и его нужно как-то выделять, пришлось перечитать много вариантов реализации подсветки кода в постах. Остановился на Highlight.js (http://softwaremaniacs.org/soft/highlight/). Он мне показался довольно простым и удобным: сам находит блоки кода, сам определяет язык, сам подсвечивает. Устанавка: 1. Скачиваем с http://softwaremaniacs.org/soft/highlight/download/ скрипт и оформление css. 2. Вставляем скрипт и указываем те языки, которыми пользуемся для ускоренного поиска:
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
  hljs.initHighlightingOnLoad('xml', 'css', 'python', 'django', 'javascript');
</script>
Использование: 1. Вставляем код между тегами:
<pre><code>...</code></pre>
2. Принудельное указания языка:
<pre><code class="django">...</code></pre>
3. Отказ от подсветки кода:
<pre><code class="no-highlight">...</code></pre>
Все работает, правда есть проблемки с отображением на моем сайте, если очень длинные строки - то они вылазят на сайдбар. Для блока, где выводится текст поста, вписал в css свойство: overflow: hidden - текст, будет просто скрываться, если будет выходить за рамки блока content, но я буду стараться максимально сжимать содержимое, чтоб ничего не выпадало за видимость. И еще одна проблема - нужно экранировать html теги типа: <div>, <a> ..., с этим я еще не разобрался, просто вместо каждого символа "<" вставляю спецсимвол & lt;. Но так как html тегов у меня мало - не составляет труда делать подобную замену, но в дальнейшем обязательно вернусь к этому вопросу.


blog comments powered by Disqus