все о заработке в интернете
инфо-бизнесе с нуля, электронной коммерции
Мой профиль Вконтакте

Подсветка синтаксиса кода в WordPress без плагина

Всем привет. Продолжаю публикацию серии статей, в которых рассказываю о добавлении различных фишек на блоги WordPress. Не исключение и сегодняшняя статья. Из нее вы узнаете, как добавить очень полезную функцию к себе на блог, при этом не загрузив его еще одним лишним плагином. Как вы знаете, я против чрезмерного употребления плагинов.

Сегодня мы будет делать подсветку синтаксиса кода в WordPress без плагина. Это очень удобно. Вы уже, наверное, обратили внимание, что подсветка синтаксиса очень удобный инструмент, когда вы хотите вставить какой-то код в статью, и чтобы он выделялся из текста. Выглядеть это может вот так.

возможный код синтаксиса

Или, например, как у меня.

моя подсветка синтаксиса кода

Как правило подсветка синтаксиса осуществляется с помощью плагина. Самым распространённым является  SyntaxHighlighter Evolved или SyntaxHighlighter Pro. Когда-то у меня стоял один из этих плагинов. Также можно использовать различные скрипты, но я, если честно, с ними так и не разобрался. Пробовал поставить штук 5 или 6. Но ничего не получилось. Да и требуют они уж слишком большого количества установленных скриптов, что тоже не есть гут.

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

Но я решил проблему подсветки синтаксиса кода другим путем, почти ничего не устанавливая на блог. Мой пример вы можете увидеть прямо в этой статье. Да, там нет нумерации строк, но это не всегда нужно.

ОК. Вам нужно сделать всего 2 шага. Первый, скачайте код картинки вот по [urlspan]этой ссылке[/urlspan].  Далее, распаковываете архив и добавляете папку img1 в папку, где у вас расположена тема. А именно, корневая папка блога > wp-content > themes > название вашей темы.

Второй шаг. Заходите в админ-панель блога и открываете файл style.css. В конце добавьте вот такой код. Он будет отвечать за стиль.

/* код подсветки */
.code {
border: 1px solid #c3c3c3;
border-left: 6px solid #ff9400;
padding: 10px;
font-size: 12px;
background: rgba(255, 255, 136, 0.3) url(img1/code.png) no-repeat 98% 10px;
overflow: auto;
color: #000;
font-family: 'Consolas';
margin: 20px 0 20px 0;
}

Здесь вы можете поиграться с настройками. Например, изменить цвет фона, размер шрифта, цвет рамки  и так далее. Если вы не знаете коды цветов, то можно это найти в интернете и подогнать под стиль вашего блога.

Теперь, когда вам нужно подсветить синтаксис или часть текста таким образом, нужно подставить следующий код в режиме «текст»:

<pre class="code">ваш код</pre>

В результате у вас получится подсветка кода как у меня. Я думаю, что это очень легкий и быстрый способ.

Если что-то не получается, смотрите видео.

Если вам была полезна данная статья, поделитесь ей в социальных сетях.

С уважением, Александр Пузатых

Понравилась статья? Поделитесь с друзьями!