Приветствую Вас на блоге websektor.ru.
Сегодня я хочу представить вашему вниманию плагин SyntaxHighlighter Evolved, он позволяет поместить различный код (php, html, css, javascript и др.) на страницы сайта/блога wordpress с подсветкой синтаксиса. Если Вы в качестве пояснения на страницах своего сайта/блога выводите фрагменты кода, то данный плагин будет просто необходим. Конечно, если у вас блог кулинарной тематики или чего то подобного, то данный плагин не понадобится. SyntaxHighlighter Evolved очень популярный, функциональный и удобный плагин, на своём блоге для вывода кода я использую именно его. Ранее в одной из своих статей я уже писал о плагине подобного типа Wp-Syntax, от так же как SyntaxHighlighter Evolved позволяет выводить код на сайте/блоге wordpress.
И так плагин SyntaxHighlighter Evolved умеет:
- размещать различные типы кодов на страницы сайта/блога под управлением wordpress;
- подсвечивать код (имеется несколько тем оформления)
- пронумеровывать строки кода
- выводить панель с кнопками (инструментами)
- сделать кликабельными URL в коде
- скрывать (сворачивать) окно с кодом
SyntaxHighlighter Evolved установка и настройка.
Скачиваем SyntaxHighlighter Evolved .
После того как скачали плагин wp-social-likes, устанавливаем и активируем его (как это сделать см. здесь.).
Настройка SyntaxHighlighter Evolved.
И так плагин установлен и активирован, теперь зоне администрирования wordpress переходим в раздел настройки данного плагина. Слева в админ-панели сайта/блога выбиваем раздел: Параметры→ Syntax Highlighter (Подсветка синтаксиса).
Плагин имеет англоязычный интерфейс, чтобы его русифицировать качаем этот , извлекаем файлы syntaxhighlighter-ru_RU.mo, syntaxhighlighter-ru_RU.po и копируем их их при помощи программы FTP клиент на хостинг, где располагается сайт/блог, в папку «localization». Путь до которой следующий: wp-content/plugins/syntaxhighlighter/localization.
На открывшейся странице «Настройки Syntax Highlighter» первым делом выбираем:
- версию, которую будем использовать на сайте/блоге.
- цветовую тему подсветки кода (SyntaxHighlighter Evolved имеет 7 встроенных цветовых схем: Default (по умолчанию), Django, Eclipse, Emacs, Fade to Grey, Midnight, RDark ).
Далее ниже делаем настройки для блока с кодом, отмечаем галочками необходимые пункты:
- Показать номера строк – будут нумероваться строки кода;
- Показывать панель инструментов – при наведении курсора мыши на блок с кодом, появится панель с кнопками (3шт): скопировать скрипт, скопировать скрипт в буфер обмена, распечатать.
- Автоматически делать URL “кликабельными” – если в коде имеется ссылка, то она станет активной, т.е. по ней можно будет перейти на соответствующий сайт.
- Сворачивать окно с кодом –будет выводиться часть кода, чтобы увидеть код целиком необходимо будет щёлкнуть по ссылке.
- Wrap long lines – Если активировать данный пункт то длинные строки кода будут переносится на другую строку с указанием переноса.
В поле “Номер начальной строки” – задается отсчёт нумерации строк.
Обязательно сохраняем все сделанные настройки.
Ниже в поле «Предпросмотр» можно видеть, как будет выгладить ваш блок после настройки.
Для вывода кода в статье на странице сайта/блога необходимо воспользоваться специальными шорт кодами. Пример вывода кода php:
[рhр] здесь код или фрагмент кода [/рhр]
Для облегчения работы с плагином SyntaxHighlighter Evolved под блоком предпросмотра приведены примеры параметров для шорткодов и примеры того как можно вывести код на сайте/блоге.
Если вы ещё не определились каким образом будете выводить примеры кода на своём сайте/блоге, очень вам советую присмотреться к плагину SyntaxHighlighter Evolved.
А по данной теме у меня всё.
Возникли вопросы? Жду их в комментариях, пишите.
Желаю Вам удачи!
Не пропустите новые статьи блога. Предлагаю Вам воспользоваться формой подписки ниже для получения новеньких статей моего блога по e-mail.
