Так как блог посвящен программированию и всему что с ним связанно, часто придётся вставлять листинг кода. К сожалению по умолчанию на донном блоге такая функция не поддерживается. В заметке описано как это было реализовано мной.
Для подсветки синтаксиса есть хорошая библиотека highlightjs.org её можно использовать и в других проектах просто скачав необходимые стили со страницы highlightjs.org/download/ галочками нужно отметить нужные языки. Вместе со стилями скачается и краткое руководство на английском и русском языках. Так же есть описание подключение здесь https://highlightjs.org/usage/.
Но нам для подключения к блогу это не потребуется. библиотеку highlightjs.org использует и Яндекс у себя в проектах и есть прямые ссылке в сети для использования данной библиотеки. Будем надеяться на надёжность Яндекса. Все стиле и сама библиотека находится в http://yandex.st/highlightjs.
Для подключения этой библиотеки перейдём к блогу по ссылке www.blogger.com/home у того блога к которому будем добавлять библиотек нажмём выпадающий список представленный на рисунке и выбираем пункт "Шаблон".
Затем под изображением блока нажимаем "Исправить HTML".
Открывается окно редактора шаблона в html формате.
Находим закрывающийся тэг </head> и перед ним вставляем следующий код
Далее в шаблон вставляется следующий код
Затем вставляется скрипт инициализации библиотеки.
Также для вставки кода может потребоваться конвертация текста, которую можно сделать онлайн конвертаторами вот один из них http://htmlconvert.net/.
Для подсветки синтаксиса есть хорошая библиотека highlightjs.org её можно использовать и в других проектах просто скачав необходимые стили со страницы highlightjs.org/download/ галочками нужно отметить нужные языки. Вместе со стилями скачается и краткое руководство на английском и русском языках. Так же есть описание подключение здесь https://highlightjs.org/usage/.
Но нам для подключения к блогу это не потребуется. библиотеку highlightjs.org использует и Яндекс у себя в проектах и есть прямые ссылке в сети для использования данной библиотеки. Будем надеяться на надёжность Яндекса. Все стиле и сама библиотека находится в http://yandex.st/highlightjs.
Для подключения этой библиотеки перейдём к блогу по ссылке www.blogger.com/home у того блога к которому будем добавлять библиотек нажмём выпадающий список представленный на рисунке и выбираем пункт "Шаблон".
Затем под изображением блока нажимаем "Исправить HTML".
Открывается окно редактора шаблона в html формате.
Находим закрывающийся тэг </head> и перед ним вставляем следующий код
<link rel="stylesheet" href="http://yandex.st/highlightjs/8.2/styles/github.min.css"/>
Это ссылка на применяемый стиль кода, варианты оформления можно посмотреть и выбрать на странице https://highlightjs.org/static/demo/. Для того чтобы понять стиль в блоке в выше приведённой строке меняем "github" на название понравившегося стиля. Хотя на официальном сайте доступна на момент написания версия 8.4 у Яндекса есть только версия 8.2, но для меня это не критично. Что бы использовать более ранние версии нужно в ссылке поменять 8.2 на нужную.Далее в шаблон вставляется следующий код
<script src="http://yandex.st/highlightjs/8.2/highlight.min.js">
</script>
Это подключение самого скрипта библиотеки.Затем вставляется скрипт инициализации библиотеки.
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>
Подробная документация находится по адресу http://highlightjs.readthedocs.org/en/latest/.Также для вставки кода может потребоваться конвертация текста, которую можно сделать онлайн конвертаторами вот один из них http://htmlconvert.net/.
Список поддерживаемого синтаксиса http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html
Пример использования http://highlightjs.org/usage/
<pre><code class="html">...</code></pre>
Демо https://highlightjs.org/static/demo/
Комментариев нет:
Отправить комментарий