Вопрос отображения 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
firstsecond
JS
function test() {
document.write("this is sintax highlighting!");
// any comment
}
test();
Если интересно, предлагаю скачать исходники, по ссылке. Папку с исходниками можно разместить в корневом каталоге темы, и скорректировать согласно ему путь в теле заголовка
И наконец, в заключении, любителям оптимизации могу посоветовать использовать сжатие файлов js и css, за счет удаления лишних пробелов, переходов строк и т.д. Для этого существуют неплохие онлайн сервисы, могу порекомендовать следующее из них: для js и css.
Автор статьи: Alec Morty
