Добро пожаловать, друзья!

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

Crayon- Syntax-HighlighterВсем доброго времени суток! Как и обещал, эту неделю посвящаю нужным плагинам для движка Wordpress. Сегодня речь пойдет о плагинах с помощью которых можно выделить, то есть, подсветить синтаксис кода HTML, PHP, CSS, JavaScript и другие языки программирования на страницах сообщения.

Подсветка синтаксиса кода в WordPress необходима нам, если нужно вставить фрагмент кода на разных языках программирования в текст статьи, для того, чтобы читатели блога могли его скопировать работоспособным. Просто взять и вставить код в статью нам не получится, а все дело в том, что вордпресс изменит его по своему и код окажется поломанным. Для вставки и подсветки кода в WordPress существует много плагинов, но так как темы у всех разные, не каждый плагин подойдет. Методом проб и ошибок нужно умудриться подобрать модуль, конкретно под свой шаблон. Я остановил свой выбор на двух плагинах это - Плагин SyntaxHighlighter Evolved и замечательный плагин Crayon Syntax Highlighter. Первым пользуюсь в блоге "Школа Bloggera", а вторым здесь.

Плагин  Syntax Highlighter - подсветка синтаксиса кода CSS, HTML, PHP на сайте

Установка, настройка и как пользоваться плагином Crayon

Crayon-Syntax-Highlighter
Плагин Crayon Syntax Highlighter

Данный плагин мне понравился тем, что код в текст статьи можно вставлять автоматически. Имеет красивые блоки оформления кода, поддерживает множество языков программирования и самое главное установив его, он сразу заработал.

Установка обычная, через загрузчик плагинов. "Раздел Плагины" - "Добавить новый", в поле для поиска вводим название Crayon Syntax Highlighter и кликаем "Поиск". После успешной установки и активации плагина в разделе "Параметры" появится пункт Crayon. Нажимаем на него и откроется страница на русском языке для настроек модуля. Проблем с настройками у вас возникнуть не должно:

Crayon-Syntax-Highlighter-plagin-nastrojka
Crayon Syntax Highlighter настройки

Тем для отображения блоков с подсветкой кода много, приведу пару примеров:

Crayon-Syntax-Highlighter-1
Подсветка синтасиса кода
Crayon- Syntax- Highlighter-stili
Crayon Syntax Highlighter

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

Далее, как пользоваться плагином Crayon Syntax Highlighter. У вас в визуальном редакторе сообщений появится специальная новая кнопка:

knopka-Crayon
Как пользоваться плагином Crayon Syntax Highlighter

При написании статьи, когда появится необходимость вставить код, нажмите на эту кнопочку. Появится окно "Редактор тегов", куда необходимо вставить нужный код, выбрать язык программирования и нажать "Добавить":

Редактор- Тегов-Crayon- Syntax- Highlighter
Добавить код Crayon

Все. Правда, очень легко? Вот поэтому я его и установил, при том плагин  недавно обновился.

Плагин SyntaxHighlighter Evolved - подсветка синтаксиса кода CSS, HTML, PHP WordPress

Установка и настройка

SyntaxHighlighter- Evolved
Плагин SyntaxHighlighter Evolved - подсветка синтаксиса кода для WordPress

SyntaxHighlighter Evolved позволяет легко размещать подсвеченный код на сайте. Установка плагина происходит таким же образом, как написано выше. Для настройки плагина перейдите в административную панель WordPress блога в раздел "Параметры" – "Syntax Highlighter". Мы попадем на страницу:

SyntaxHighlighter-Evolved-plagin
Настройки плагина Syntax Highlighter

Здесь, все просто. Нужно выбрать цвет оформления подсветки блока с кодом:

Syntax- Highlighter
Syntax Highlighter подсветка кода

Затем, отметьте нужные параметры и нажмите сохранить изменения.

Как сделать подсветку кода CSS , HTML , PHP в сообщениях блога

Если в тексте статьи Вы захотите разместить php код и подсветить его, необходимо его заключить в теги:

Код js:

И так далее. Все теги указаны на странице настроек плагина, в самом низу. Да, чуть не забыл, код вставлять надо в визуальном редакторе, а заключать в теги - режим "Текст". Вот и все о чем я хотел поведать вам сегодня. До встречи.

Комментарии

  • Спасибо большое за подсказку. Долго искал нужный плагин и у Вас нашел
    Crayon
    У меня блог такой, что почти в каждой статье приходится код вставлять. Остальные популярные плагины не работают у меня на сайте, да и не обновлялись годами, а этот и обновлен меньше месяца назад и копирует автоматически, посетители не ошибутся, можно исходники скачивать. Нормально!

    • Привет, Егор! Плагин просто отличный, сам пользуюсь им, подходит для любой темы WP, в отличие от остальных. Хорошо, что вам он подошёл. 🙂

  • Crayon Syntax Highlighter — как сделать подсветку в самом тексте (без переноса строки) ?

  • Здравствуйте. Подскажите как в полагине Crayon Syntax Highlighter отключить преобразование кода в html теги? Он ведь должен выдавать код в том виде что и вставил, а он часть кода в html переводит.

  • Привет! На вашем сайте установлен этот плагин — Crayon Syntax Highlighter на своем блоге? Где можно посмотреть пример кода сделанным этим плагином.

  • Очень прошу помочь!
    Мне на моём сайте необходимо разместить программу, написанную на языке FORTRAN с подсветкой кода. Те плагины, которые это могут сделать, по описаниям проверены до WORDPRESS 3.5.
    У меня версия 4.4. Кто-то знает подходящий плагин?
    Заранее благодарен.

  • Я разработал свой плагин для подсветки — wordpress.org/plugins/lite-syntax-highlighting/
    Он простой и лёгкий в использовании, в отличие от такого монстра как Crayon.
    Будет круто если вы включите его в свой обзор.

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

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

Решите задачку: *