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

Опубликовано: 01.09.2018

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

Программа для форматирования кода с цветовой подсветкой синтаксиса


Знакомство с Atom - #1 - Первое знакомство. Установка.

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


Как подружить Notepad++ и Emmet

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

Перебрав с десяток плагинов на 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

JS

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

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

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

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

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

rss