Подсветка синтаксиса в WordPress

Подсветка синтаксиса кода на web странице c помощью js скрипта

Вопрос отображения HTML/PHP/JS/CPP кода рано или поздно встает перед любым web разработчиком, который желает выложить его в своей публикации. Конечно, существует и штатный способ с использованием тега <xmp></xmp>, который отображает содержимое контейнера, как есть, без преобразования его в html вид. В интернете можно найти несколько десятков плагинов на wordpress и другие СМС, которые все эти задачи решают без особых проблем. Причем есть разные от простых, которые не имеют толком каких-либо настроек, до весьма сложных.

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

Перебрав с десяток плагинов на wordpress, мне так и не удалось найти что-то стоящее и, главное, не влияющее на загрузку сайта. Пришлось искать другое решение, и оно на удивление оказалось весьма интересным.

Как-то ковыряясь в одном старом плагине, при помощи которого выполняется подсветка синтаксиса программного кода, мне попался неплохой исходник на java script. Естественно, он был уже не совместим с последней версией wordpress, плюс ко всему еще был сильно избыточным по коду. Но, главное, этот скрипт достаточно было прописать в заголовке веб страницы, и он автоматически загружался при событии onload().

В итоге, внеся свои изменения в коде, я довел его до рабочего состояния, и тут же повесил себе на блог. Предлагаемый вашему вниманию модуль представляет собой всего 2 файла syntax.css и syntax.js, которые достаточно прописать в хедере header.php. Таким образом, это решение подойдет как на любую СМС, так и на самописный сайт.

Относительно wordpress, можно сделать так чтобы этот скрипт грузился только тогда, когда просматривается непосредственно сама запись, то есть при просмотре категорий или главной страницы скрипт грузится не будет.

<head>
...

</head>

Подсветка синтаксиса в публикациях

Подсветка синтаксиса скриптом поддерживает следующие языки программирования: html, js, css, php и cpp. Для того чтобы реализовать задуманное на странице публикации, необходимо выделить необходимый участок кода и обернуть его тегом <pre class=””></pre>, указав в кавычках язык, на котором написан публикуемый скрипт: html, js, css, php или cpp.

Например:

C++

#include <iostream>
using namespace std;
 
int main() {
   cout << "this is sintax highlighting!" << endl;
   return 0;
}

CSS

.code-var {
   color:#258E8F;
   font-weight:700;
   line-height:1.2em;
}
.code-operator {
   color:#3B3BF7;
   line-height:1.2em;
}
.code-number {
   color:#ff973a;
   line-height:1.2em;
}

HTML

HEADER

  • first
  • second
first
second

JS

function test() {
   document.write("this is sintax highlighting!");
   // any comment
}
test();

Если интересно, предлагаю скачать исходники, по ссылке. Папку с исходниками можно разместить в корневом каталоге темы, и скорректировать согласно ему путь в теле заголовка

И наконец, в заключении, любителям оптимизации могу посоветовать использовать сжатие файлов js и css, за счет удаления лишних пробелов, переходов строк и т.д. Для этого существуют неплохие онлайн сервисы, могу порекомендовать следующее из них: для js и css.

скачать скрипт

Loading Likes...

МАТЕРИАЛЫ ПО ТЕМЕ

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *