Яндекс.Метрика

Записки Белого Пингвина

19 мая 2019

Подсветка синтаксиса кода — SyntaxHighlighter

Сегодня установил на блог JavaScript библиотеку для подсветки синтаксиса кода, который легко интегрируется с любыми сайтами и блогами. В нашем случае SyntaxHighlighter будем устанавливать в наш любимый Blogger.
SyntaxHighlighter
SyntaxHighlighter
 Для установки кода на блог, зайдите в панель управления Blogger - Тема - Изменить HTML. Находим <head> (обычно в начале шаблона) и вставляем чуть ниже код:










Вот так будет выглядеть подсветка синтаксиса после применения

Сохраните шаблон. Теперь когда Вы будете публиковать статью с кодом, ваш код вставляете в редактор сообщений в режиме HTML.
Для кода HTML:

<pre class="brush:html">
Здесь будет ваш код HTML
</pre>

Для "JavaScript", Вы можете использовать "JS" или "JScript" или "JavaScript":

<pre class="brush:JavaScript">
Здесь ваш код JavaScript
</pre>

Ну и последнее для CSS использовать:

<pre class="brush:css">
Здесь ваш код CSS
</pre>

На этом всё. Ждите новых статей.




П.С. Если после установки, Вам понравился скрипт, то лучше скачайте все шесть JavaScript и CSS файлов на комп и перезалейте  на какой нибудь хост (если конечно есть такой у Вас).



#БудьтеДобрыиУлыбайтесьЧаще 😋

2 комментария:

  1. Доббрый день! А если мне нужна подсветка Ruby?
    И если она нужна на весь текст, но не на каждую запись.

    ОтветитьУдалить
    Ответы
    1. Добрый день! Конкретно под Ruby, наверное не будет синтаксиса... поэтому можно использовать под JS...
      А тегом <pre class="brush:JavaScript"></pre> можно выбирать любой текст или код, который необходимо подсветить...
      Я сам менял и настраивал цвета, чтобы было более менее похоже на Sublime или VSC... если желание есть можно поковырять стили...=)

      Удалить

Popular Posts