Всем доброго времени суток! Как и обещал, эту неделю посвящаю нужным плагинам для движка Wordpress. Сегодня речь пойдет о плагинах с помощью которых можно выделить, то есть, подсветить синтаксис кода HTML, PHP, CSS, JavaScript и другие языки программирования на страницах сообщения.
Подсветка синтаксиса кода в WordPress необходима нам, если нужно вставить фрагмент кода на разных языках программирования в текст статьи, для того, чтобы читатели блога могли его скопировать работоспособным. Просто взять и вставить код в статью нам не получится, а все дело в том, что вордпресс изменит его по своему и код окажется поломанным. Для вставки и подсветки кода в WordPress существует много плагинов, но так как темы у всех разные, не каждый плагин подойдет. Методом проб и ошибок нужно умудриться подобрать модуль, конкретно под свой шаблон. Я остановил свой выбор на двух плагинах это - Плагин SyntaxHighlighter Evolved и замечательный плагин Crayon Syntax Highlighter. Первым пользуюсь в блоге "Школа Bloggera", а вторым здесь.
Плагин Syntax Highlighter - подсветка синтаксиса кода CSS, HTML, PHP на сайте
Установка, настройка и как пользоваться плагином Crayon
Данный плагин мне понравился тем, что код в текст статьи можно вставлять автоматически. Имеет красивые блоки оформления кода, поддерживает множество языков программирования и самое главное установив его, он сразу заработал.
Установка обычная, через загрузчик плагинов. "Раздел Плагины" - "Добавить новый", в поле для поиска вводим название Crayon Syntax Highlighter и кликаем "Поиск". После успешной установки и активации плагина в разделе "Параметры" появится пункт Crayon. Нажимаем на него и откроется страница на русском языке для настроек модуля. Проблем с настройками у вас возникнуть не должно:
Тем для отображения блоков с подсветкой кода много, приведу пару примеров:
Настроек множество, с подсказками. Только не забудьте после тонкой настройки плагина сохранить изменения.
Далее, как пользоваться плагином Crayon Syntax Highlighter. У вас в визуальном редакторе сообщений появится специальная новая кнопка:
При написании статьи, когда появится необходимость вставить код, нажмите на эту кнопочку. Появится окно "Редактор тегов", куда необходимо вставить нужный код, выбрать язык программирования и нажать "Добавить":
Все. Правда, очень легко? Вот поэтому я его и установил, при том плагин недавно обновился.
Плагин SyntaxHighlighter Evolved - подсветка синтаксиса кода CSS, HTML, PHP WordPress
Установка и настройка
SyntaxHighlighter Evolved позволяет легко размещать подсвеченный код на сайте. Установка плагина происходит таким же образом, как написано выше. Для настройки плагина перейдите в административную панель WordPress блога в раздел "Параметры" – "Syntax Highlighter". Мы попадем на страницу:
Здесь, все просто. Нужно выбрать цвет оформления подсветки блока с кодом:
Затем, отметьте нужные параметры и нажмите сохранить изменения.
Как сделать подсветку кода CSS , HTML , PHP в сообщениях блога
Если в тексте статьи Вы захотите разместить php код и подсветить его, необходимо его заключить в теги:
1 | [php]ваш код здесь[/php] |
Код js:
1 | [code lang="js"]ваш код здесь[/code] |
И так далее. Все теги указаны на странице настроек плагина, в самом низу. Да, чуть не забыл, код вставлять надо в визуальном редакторе, а заключать в теги - режим "Текст". Вот и все о чем я хотел поведать вам сегодня. До встречи.
Спасибо большое за подсказку. Долго искал нужный плагин и у Вас нашел
Crayon
У меня блог такой, что почти в каждой статье приходится код вставлять. Остальные популярные плагины не работают у меня на сайте, да и не обновлялись годами, а этот и обновлен меньше месяца назад и копирует автоматически, посетители не ошибутся, можно исходники скачивать. Нормально!
Привет, Егор! Плагин просто отличный, сам пользуюсь им, подходит для любой темы WP, в отличие от остальных. Хорошо, что вам он подошёл. 🙂
Crayon Syntax Highlighter — как сделать подсветку в самом тексте (без переноса строки) ?
Здравствуйте. Подскажите как в полагине Crayon Syntax Highlighter отключить преобразование кода в html теги? Он ведь должен выдавать код в том виде что и вставил, а он часть кода в html переводит.
Привет, плагин доступен на русском языке, там в настройках в разделе Код.
Привет! На вашем сайте установлен этот плагин — Crayon Syntax Highlighter на своем блоге? Где можно посмотреть пример кода сделанным этим плагином.
Привет! Здесь, тоже можно, но вот на этом блоге — Школа Bloggera, лучше.
Очень прошу помочь!
Мне на моём сайте необходимо разместить программу, написанную на языке FORTRAN с подсветкой кода. Те плагины, которые это могут сделать, по описаниям проверены до WORDPRESS 3.5.
У меня версия 4.4. Кто-то знает подходящий плагин?
Заранее благодарен.
Пробуйте любой, они все для версии 4.4 подходят. Обратите внимание на Crayon Syntax Highlighter
Я разработал свой плагин для подсветки — wordpress.org/plugins/lite-syntax-highlighting/
Он простой и лёгкий в использовании, в отличие от такого монстра как Crayon.
Будет круто если вы включите его в свой обзор.
Да, спасибо, Максим!
Напишу обзор о нём. 🙂
Спасибо, было полезно, правда я пользовался обычно текст