Добавление подсветки синтаксиса 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" внизу макета |