codejutsu: highlight.js подсветка кода в блоге

В программерских блогах без сомнения нужна подсветка синтаксиса. Blogger, конечно, хороший сервис, но этой возможности там нет. Как же сделать подсветку синтаксиса?

Предлагаю реализовать ее с помощью библиотеки highlight.js
http://softwaremaniacs.org/soft/highlight/

Почему именно highlight.js? Потому что ее разместил Яндекс на своем хостинге http://api.yandex.ru/jslibs/libs.xml#highlightjs и нам не нужно думать, где хранить файлы библиотеки.

Что бы подключить highlight.js нужно вставить небольшой код в html.
Для blogger это так: Заходим в "Дизайн"->"Изменить HTML" между тегами <head> вставляем код:


<!-- подсветка синтаксиса -->
<script type="text/javascript" src="http://yandex.st/highlightjs/5.12/highlight.min.js"></script>
<link rel="stylesheet" href="http://yandex.st/highlightjs/5.12/styles/default.min.css" />
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>
<!-- /подсветка синтаксиса -->

Код требующий подсветки выделяем тегами:


<pre><code>...</code></pre>

Язык вашего кода библиотека попытается определить самостоятельно.


<pre><code class="html">...</code></pre>

Можно подправить некоторые стили под ваш дизайн. Я например сделал:


pre code { overflow: auto; }

Чтобы длинный код не распирал страницу.

Источник: http://softwaremaniacs.org/soft/highlight/description/

codejutsu

вторник, 12 октября 2010 г.

highlight.js подсветка кода в блоге

1 комментарий:

Отдушина для граммарнаци

вторник, 12 октября 2010 г.

highlight.js подсветка кода в блоге

1 комментарий:

вторник, 12 октября 2010 г.