Оформление и подсветка кода в статье на blogger

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

Подсветка кода

SyntaxHighlighter

Вариантов установки нашла много, но заработал только один на тестовом блоге. Выглядеть код будет так:

Перед тегом </head> добавить:

<link href='http://sites.google.com/site/seobiblioteka/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/seobiblioteka/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/seobiblioteka/shCore.js' type='text/javascript'/>
<script src='http://sites.google.com/site/seobiblioteka/shBrushCss.js' type='text/javascript'/>
<script src='http://sites.google.com/site/seobiblioteka/shBrushJScript.js' type='text/javascript'/>
<script src='http://sites.google.com/site/seobiblioteka/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.all()
</script>

Когда пишем сообщение, переходим на вкладку Изменить HTML, находим код, который нужно подсветить и обрамляем тегами <pre>:
<pre class="brush: ....">код, который нужно подсветить</pre>
Каждому коду нужно указать его класс:

Для HTML
Код:
<pre class="brush: html">код, который нужно подсветить</pre>
Для CSS
Код:
<pre class="brush: css">код, который нужно подсветить</pre>
Для xml
Код:
<pre class="brush: xml">код, который нужно подсветить</pre>
Для js
Код:
<pre class="brush: js">код, который нужно подсветить</pre>

Здесь указаны не все кисти, только 4, а их гораздо больше.
Если нужно больше перейдите на сайт -
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html (установка)
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ (конфигурация)

Аналогичные сайты:

https://prismjs.com/
https://craig.is/making/rainbows
http://qbnz.com/highlighter/
https://highlightjs.org/
http://shjs.sourceforge.net/
http://pygments.org/
http://codepress.sourceforge.net/index.php
https://jush.sourceforge.io/
http://www.codething.ru/highlight.php

Подсветка кода онлайн

1. https://highlight.hohli.com/

Вставляем свой код
Выбираем класс подсветки
Если нужна нумерация строк, ставим галочку
Ставим галочку при использовании тега font
Нажимаем Выделить
Если не всё устраивает, нажми Сброс
Предварительно можно посмотреть результат
Копируем результат

Скопированный код вставляем в режиме XTML в редакторе сообщения.

Вот что получилось:

2. https://pinetools.com/syntax-highlighter

Сайт, как и первый на английском. Но, всё интуитивно понятно. Вставляем код. Можно не выбирать класс, а нажать автоматически. Стилей оформления много. Есть в тёмных тонах и в светлых. Нумерации строк нет.

Из интересного на сайте — довольно большое количество других инструментов.

3. http://hilite.me/

Вставить код
Выбрать класс кода
Выбрать стиль оформления кода — их довольно много
Поставить галочку на нумерации строк, если она нужна
Если нужно изменить вид рамки кода
Нажимаем кнопку Выделить
Предварительный просмотр

В окошке HTML берём код.

И в редакторе сообщений, в режиме HTML вставляем полученный код.

Результат:

4. http://www.resurchify.com/convert_code_to_html.php

Вставляем код
Отсюда будем забирать готовый код
Выбираем класс кода
Выбираем стиль подсветки
Ставим галочку, если нужна нумерация строк
Нажимаем зелёную кнопку
Предварительный просмотр

Добавляем код так же, в режиме XTML в сообщении. Результат

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

https://quickhighlighter.com/ - много настроек
https://tohtml.com/ - можно настроить светлый или тёмный фон для кода, нумерации нет.
https://dumpz.org/ - настроек мало, код на сером фоне
https://www.freecodeformat.com/highlight.php
https://www.exlab.net/tools/highlight.html - на русском языке
http://wb0.ru/highlight.php - удобный, понятный, на русском языке
https://rcl-radio.ru/?p=48241