Красивая подсветка html и php кода на сайте WordPress с помощью плагина SyntaxHighlighter Evolved

В сегодняшней статье вы узнаете, как вывести html, php и другой код в статьях сайта на движке wordpress. Я подробно опишу, как делается красивая подсветка кода с помощью плагина SyntaxHighlighter Evolved.

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

Не знаю как вам, но мне такой вариант не очень нравиться. А вот, как будет выглядеть код, если вставить его с помощью плагина SyntaxHighlighter Evolved.

Вот это уже совсем другое дело. Если вы хотите вставлять себе на сайт также такой красивый код с подсветкой, то сейчас я подробно напишу, как это можно сделать.

Для начала скачайте плагин SyntaxHighlighter Evolved на этой странице, потом установить и активировать. После установки плагин должен работать нормально, но лучше еще зайти в «Панель управления» — «Настройки» — «SyntaxHighlighter Settings» и сделать небольшие настройки. Так, как плагин на английской языке, то лучше зайти в настройки плагина с помощью браузера, с автоматическим переводом, если вы не понимаете иностранного языка. Также ниже основных настроек вы всегда можете увидеть, как будет выглядеть код на сайте. Для этого просто нажмите на ссылку «Сохранить изменения». Для того, чтобы вы могли легко настроить плагин, я сейчас постараюсь расписать основные настройки:

• Highlighter Version (Маркер версии) – лучше всего ставить самую последнюю версию, у меня сейчас «3.x»;
• Color Theme (Цветовая тема) – на своем блоге я использую версию «Default». Можете выбрать другую тему, и посмотреть, как она будет выглядеть на сайте. Самое главное, чтобы тема вписалась в дизайн, если никакая не вписывается, то ставьте белую «Default»;
• Load All Brushes – здесь лучше галочку оставить.

• Display line numbers (показывать номера строк) – если галочка будет стоять, то строки кода будут пронумерованы;
• Display the toolbar (Показывать панель инструментов) – если поставить рядом с этим пунктом галочку, то посетитель сможет скопировать код или распечатать его;
• Automatically make URLs clickable (автоматически делать URL кликабельным). Ну, здесь все понятно. Если поставить галочку, то все ссылки в коде будут кликабельными. Также стоит сказать и то, что такие ссылки не закрыты от индексации. Если вы не хотите ссылаться на всех подряд, то галочку лучше убрать;
• Collapse code boxes (сворачивать окно с кодом) – если активировать этот пункт, то код на странице будет отображаться в свернутом виде;
• Use the light... (использовать легкий режим) – если активировать эту функцию, то номера строк отображаться не будут;
• Use smart tabs allowing... (использовать знаки табуляции для выравнивания текста) – здесь перевод говорит сам за себя. Конечно, лучше использовать знаки табуляции, я галочку оставил;
• Wrap long lines... – если активировать данную функцию, то длинные строки будут автоматически переноситься, а если убрать, то появиться полоса прокрутки.

Что касается настроек Additional CSS Class (es) – (дополнительные классы CSS) – то здесь можно оставить все по умолчанию. Если у вас есть знания css, то вы можете легко изменить внешний вид кода. Для этого просто отредактируйте файл стилей, который находиться по такому адресу

wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles

Кстати, выше можете еще раз посмотреть работу плагина SyntaxHighlighter Evolved. Для того чтобы вывести любой код в статью, нужно через html редактор воспользоваться вод таким шорткодом

Ваш код

Также, можно воспользоваться и другими, их вы можете найти в самом низу в настройках плагина.

На этом я, пожалуй, закончу. Если вы ведете блог на техническую тематику и есть необходимость показывать посетителям различные коды, то я советую обязательно ставить плагин SyntaxHighlighter Evolved для отображения подсветки кода. Возможно, у вас стоят и другие аналогические плагини, тогда буду рад, если напишите их названия в комментариях ;-).