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

highlight.js, code, blog, site
Для подсветки синтаксиса (кода выкладываемого в статье) можно использовать разные скрипты, например, напремер, SyntaxHighlighter или SHJS.
Есть ещё один интересный и известный скрипт - highlight.js. Его работу можно оценить на Хабре:
простой серенький фон, красивое сочетание цветов, отсутствие нумерации строк. Короче говоря, ничего лишнего.
Для Blogger и Yoom CMS я решил "угнать" стили с Хабра. На самом деле на официальном сайте выложено довольно много самых разнообразных вариантов оформления это скрипта, но мне лень было искать именно тот =).

Демо с оформление css кода с помощью highlight.js:

pre code {
 font-size: 12px;
 padding: 0.5em;
 background: #f8f8f8;
 display: block;
 }
 pre .subst,
 pre .title {
 font-weight: normal;
 color: #000;
 }

Установка highlight.js в Blogger.
На странице загрузки можно скачать архив, где будет лежать инструкция по подключению, стили и скрипты, расчитанные на определённые языки программирования/веб-разработки, и упакованные в highlight.pack.js. Но это не нужно.
На той же странице загрузки архива можно узнать, что highlight.js лежит в репозиториях скриптов Яндекса, что удобнее вдвойне:
  • надёжный хост
  • благоприятная ссылка

highlight.js, yandex, download

Поэтому не будем изобретать велосипеды со своим хостингом и подключим в своём шаблоне (перед тегом </head>) сам скрипт:
<script src="http://yandex.st/highlightjs/6.1/highlight.min.js">
</script>

Ещё один скрипт вызова:
<script type="text/javascript">
 hljs.initHighlightingOnLoad();
</script>

И хабро-стили для highlight.js:
<link href="highlight.css" rel="stylesheet"></link>
Для которых как раз понадобится ваш собственный велосипед (хостинг).

Использование highlight.js в статье.
Highlight.js, как и другие подобные скрипты, использует вариацию тега pre, но в данном случае вместе с тегом code, и автоматически понимает язык выкладываемого кода:
<pre><code>...</code></pre>

О том, как правильно вставить html код в статью Blogger читаем здесь.

Ссылки по теме:
Скрипт показа исходного кода страницы в блоге.


16 комментариев:

  1. круто конечна, но можно было бы пример, хотяб для того чтоб не продвинутые юзеры могли понятьjavascript:void(0)

    ОтветитьУдалить
  2. Так пример есть в демо =).
    Нужно взять код, сходить на htmlconvert, сконвертировать, вернуться и вставить между тегами <pre><code>...</code></pre>

    ОтветитьУдалить
  3. а нумерации строк нету чтоли ?

    ОтветитьУдалить
  4. Здравствуйте,
    Подскажите пож, а почему у меня не хочет работать с моими стилями???

    когда пытаюсь вставить свой стиль, например с дропбокса, то его не берет, хотя фаербуг не показывает ошибок, файл подгружается нормально..

    К примеру вот
    https://www.dropbox.com/s/twyv7o9gxg2wnib/highlight_git_my.min.css

    или

    https://www.dropbox.com/s/ue531apc9h7h1vg/highlight.min.css

    Не судите строго -> http://j-web-dev.blogspot.com

    ОтветитьУдалить
  5. Попробуйте не с дропбокса, а с code.google.com.

    ОтветитьУдалить
  6. @aldous ((( не берет, на гуглеДиске вообще ссылки не понятные какие-то, генерятся сами
    Вот файлик, удачно загрузился с страничкой..
    http://bloggerhighlighter-my.googlecode.com/files/default.min.css

    А подскажите тогда еще одно.
    Есть какая-то возможность устанавливать полосу прокрутки когда длинная строка? А то скрипт не делает этого строка просто вылезает за границы.. (((

    ОтветитьУдалить
  7. ))) Спасибо, дык только как мне вставить это в свой css если не могу его подключить. ((((

    ОтветитьУдалить
  8. Попробуйте вставить стили highlight в общие стили блога, если всё заработает, ищите ошибку в предыдущих своих действиях.

    ОтветитьУдалить
  9. Посмотрите на исходник этой страницы. Здесь скрипт и стили я засунул прямо в пост =). Можете так же потренироваться на тестовом блоге или тестовой странице.

    ОтветитьУдалить
  10. )))) Вот только что сам до этого додумался.))) Оновил страничку, а тутт вы написали. ))
    Коль уже подсказываете мне, то подскажите, еще пож, как можно его настроить? Есть какие то опциональные настройки? Например нумерация строк?

    Здесь такого нет.. (
    http://softwaremaniacs.org/soft/highlight/description/

    Спасибо! Подсветка и перенос строк уже работает. Еще бы нумерацию строк если возможно.. )))

    ОтветитьУдалить
  11. В highlight.js, насколько я помню, нет нумерации строк.

    ОтветитьУдалить
  12. Странно, почему-то не работают отступы.. (
    Все строки ровняются по левому краю. (

    ОтветитьУдалить
  13. Инспектируйте в опере или в firebug'е, всё это легко правится через css.

    ОтветитьУдалить
  14. Всеее, достали меня эти танцы с бубнами...
    Лучше подправлю подсветку от Алекса Горбачева, она самая стабильная и простая. Спасибо за помощь. ))

    ОтветитьУдалить