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

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

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

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

SyntaxHighlighter

Вариантов установки нашла много, но заработал только один на тестовом блоге. Выглядеть код будет так:
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/
highlight
  1. Вставляем свой код
  2. Выбираем класс подсветки
  3. Если нужна нумерация строк, ставим галочку
  4. Ставим галочку при использовании тега font
  5. Нажимаем Выделить
  6. Если не всё устраивает, нажми Сброс
  7. Предварительно можно посмотреть результат
  8. Копируем результат
Скопированный код вставляем в режиме XTML в редакторе сообщения.
Вот что получилось:
Скопированный код
2. https://pinetools.com/syntax-highlighter
подсветка
Сайт, как и первый на английском. Но, всё интуитивно понятно. Вставляем код. Можно не выбирать класс, а нажать автоматически. Стилей оформления много. Есть в тёмных тонах и в светлых. Нумерации строк нет.
Стилей оформления много
Из интересного на сайте — довольно большое количество других инструментов.

3. http://hilite.me/
сервис
  1. Вставить код
  2. Выбрать класс кода
  3. Выбрать стиль оформления кода — их довольно много
  4. Поставить галочку на нумерации строк, если она нужна
  5. Если нужно изменить вид рамки кода
  6. Нажимаем кнопку Выделить
  7. Предварительный просмотр
В окошке HTML берём код.
И в редакторе сообщений, в режиме HTML вставляем полученный код.
Результат:
hilite
4. http://www.resurchify.com/convert_code_to_html.php
resurchify
  1. Вставляем код
  2. Отсюда будем забирать готовый код
  3. Выбираем класс кода
  4. Выбираем стиль подсветки
  5. Ставим галочку, если нужна нумерация строк
  6. Нажимаем зелёную кнопку
  7. Предварительный просмотр
оформление кода
Добавляем код так же, в режиме 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

  1. Daniel21/3/20 21:32

    полезный сайт с большим количеством интрументов - https://wtools.io/ru

    ОтветитьУдалить
    Ответы
    1. Наталья22/3/20 02:39

      Посмотреть на ваш сайт не смогла, у меня он не загружается.

      Удалить

Комментарии со спамом удаляются.