Blogger не для чайников: Плагин для подсветки кода SHJS

SHJS - означает Syntax Highlighting in JavaScript. Этот плагин используется для подсветки кода, конкурент широко известному SyntaxHighlighter, который я использую в оформлении кода при написании сообщений в этом блоге.
SHJS поддерживает множество языков и имеет собственный репозиторий с темами (стилями).


Поддерживаемые языки

Для правильной установки плагина потребуется несколько файлов:

-- скрипт, содержащий ядро плагина
-- языковый файл/файлы
-- файл со стилями (css)

Теперь качаем с основной страницы полный архив, извлекаем и смотрим на содержимое ↓

Содержимое архива

Из всех файлов и папок нам интересны: sh_main.min (базовый файл), файлы из папки lang (в которой находятся скрипты для поддержки различных языков программирования) и папка css (где находится целый сонм (78 штук!) стилей для изменения внешего вида подсвеченного кода).

Выбираем языки (пусть это будут html, javascript и css), любой стиль и вместе с базовым файлом кладём на внешний хостинг.

Положили? Все файлы, включая стили, прописываем ссылками в "голову" (<head></head>) своего шаблона:

<script src="http://ваш-хостинг.ру/SHJS/sh_css.js" type="text/javascript">
</script>
<script src="http://ваш-хостинг.ру/SHJS/sh_html.js" type="text/javascript">
<script src="http://ваш-хостинг.ру/SHJS/sh_javascript.js" type="text/javascript">
</script>
<script src="http://ваш-хостинг.ру/SHJS/sh_main.js" type="text/javascript">
</script>
<link href="http://ваш-хостинг.ру/SHJS/sh_bipolar.css" rel="stylesheet" type="text/css"></link>

И после <body> в шаблоне ставим вызов функции:

<body onload="sh_highlightDocument();">

Что касается отображения результатов работы плагина в постах, то здесь, как и во всех подобных разработках, используется тег <pre class="название_языка"></pre>, где вместо "название языка" надо вставить идентификатор (html класс) из этой таблицы (те, что относятся к демо, я выделил разными цветами) ↓

Идентификаторы языков

Демо:

<script src="http://planeta.omg-linux.ru/docs/SHJS/sh_css.min.js" type="text/javascript">
</script>

В этом блоке используется стиль sh_bipolar.css. Предварительно посмотреть остальные стили можно на странице проекта (с правой стороны).

Плагин для подсветки кода SHJS

2 комментария: