1 февраля 2015 г.

Добавление подсветки синтаксиса highlightjs.org

Добавление подсветки синтаксиса highlightjs.org в blogger.com.

Подготовка

using Мозг;
using Интернет;
public class Blog : Blogger
{
var help1 = Интернет.Загрузить(
    @"https://highlightjs.org/");
var help2 = Интернет.Загрузить(
    @"http://stackoverflow.com/questions/10936854/highlight-syntax-in-pre-tags-with-highlight-js");

var jsLibrary = Интернет.Загрузить(
    @"//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js");
var cssFile = Интернет.Загрузить(
    @"https://highlightjs.org/static/demo/styles/github.css");
}
Прочитал на сайте проекта, что js-библиотеку можно грузить с cloudflare.

Выбор стиля подсветки на https://highlightjs.org/static/demo/

Также выбрал в качестве стиля стиль github. Ссылку на github.css свзял также с сайта проекта.

Правка шаблона

В начало шаблона добавить ссылки на библиотеку и стиль

После секции с базовыми стилями шаблона:

<b:template-skin>
    ...
</b:template-skin>
добавил ссылки на highlight.min.js и github.css.
<link href='https://highlightjs.org/static/demo/styles/github.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js'/>
Добавление ссылок в шаблон после секции template-skin

Сохранил шаблон.

Код запуска подсветки

Добавил в шаблон виджет "HTML/JavaScript". Открыл форму редактирования виджета, и написал код запуска подсветки синтаксиса:
<script type='text/javascript'>
//<![CDATA[
    var aCodes = document.getElementsByTagName('pre');
    for (var i=0; i < aCodes.length; i++) {
        hljs.highlightBlock(aCodes[i]);
    }
//]]>
</script>

Виджет "HTML/JavaScript", разместил внизу страницы.

Размещение виджета "HTML/JavaScript" внизу макета