Подсветка кода и кнопки форматирования комментариев в WordPress — SyntaxHighlighter и Comment Form


Содержание материала:

Comment Form Quicktags

Comment Form Quicktags это плагин, добавляющий форме комментирования кнопки форматирования текста. По возможностям плагин почти один в один похож на когда-то рассматриваемый мной плагин WP Comment Quicktags Plus, но немного лучше и современнее. Он настраивается визуально в админке блога и не требует правки кода самого плагина, если вас не устраивает набор кнопок по умолчанию. Да и стиль оформления кнопок панели более-менее кроссбраузерен и не нуждается в дополнительном исправлении. С учетом того, что разработка плагина WP Comment Quicktags Plus автором уже давно прекратилась плагин Comment Form Quicktags остается единственным простым вариантом добавления панели с кнопками форматирования текста.

Скачиваем плагин с его домашней страницы и устанавливаем его:

1. Распаковываем архив.

2. Копируем папку comment-form-quicktags в /wp-content/plugins/.

3. Заходим в админку блога на вкладку «Плагины» и активируем плагин.

Настройка плагина происходит в «Параметрах\Comment Form Quicktags«. Плагин переведен на русский язык и никаких сложностей с его настройкой возникнуть не должно:

От себя только хочу добавить – читайте, что написано выше формы настройки. Изменили кнопку – нажали «Правка/Добавить«, затем обязательно кликайте на кнопку «Обновить» – без финального нажатия на «Обновить» ваши изменения в кнопках не будут сохранены.

Плагин дает возможность настроить уровень доступа к кнопкам:

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

Кстати, по поводу кнопки добавления картинки. Добавить ее легко:

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

Но даже при таком добавлении картинок есть подвох — по умолчанию тег img запрещен для роли «подписчика» в блоге. Исправить это легко, откройте файл functions.php в папке вашего шаблона и добавьте туда код:

global $allowedtags; $allowedtags_add = array ( ‘img’ => array ( ‘src’ => array(), ‘alt’ => array(), ‘title’ => array(), ‘height’ => array(), ‘width’ => array()) ); $allowedtags = array_merge ($allowedtags, $allowedtags_add);

И еще одна вещь — обязательно убедитесь, что в вашем шаблоне задано максимальное ограничение ширины картинок. Иначе вставленная посетителем большая картинка разорвет дизайн шаблона блога. Надо указать что-то типа:

Панель с кнопками автоматически встраивается над окном с текстом комментария. В большинстве шаблонов это встраивание происходит корректно, но в некоторых шаблонах (вроде Twenty Eleven) вам придется вручную через css поправить положение панели (или формы добавления комментария), чтобы она не выглядела так:

Такое некорректное встраивание происходит из-за того, что плагин ищет текстовое поле для ввода комментария и встраивает себя непосредственно над ним, игнорируя всяческие изыски дизайнеров по украшательству формы комментирования. Чтобы исправить форму в том же Twenty Eleven достаточно в файле стилей styles.css (шаблона, а не плагина) добавить строчки:

#respond .comment-form-comment label

И тогда форма комментирования будет выглядеть, как и было задумано:

Плагин переведен на русский язык не полностью – тексты вставки ссылок и картинок не переведены. Перевести их легко, откройте файл плагина quicktags.php и найдите там строчки:

var URL = prompt(‘Enter the URL’ ,defaultValue);

var myValue = prompt(‘Enter the URL of the image’, ‘http://’);

+ ‘» alt=»‘ + prompt(‘Enter a description of the image’, »)

Поменяйте их на что-нибудь типа:

var URL = prompt(‘Введите URL’ ,defaultValue);

var myValue = prompt(‘Введите URL картинки’, ‘http://’);

+ ‘» alt=»‘ + prompt(‘Введите описание картинки’, »)

Оформление кнопок панели форматирования достаточно корректно и кнопки выглядят более-менее одинаково во всех браузерах. Но при желании оформление можно поменять, для этого отредактируйте файл style.css в папке плагина. Например, если убрать комментирование у этого кода:

/*-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;*/

То кнопки вашей панели станут слегка закругленными:

Единственное, что бы я поправил в этой панели это вид курсора при наведении на кнопку. Как-то курсор руки выглядит логичнее. Для этого надо исправить начало файла style.css так:

C курсором руки панель смотрится, на мой взгляд, лучше:

Совсем забыл упомянуть — менять расположение кнопок в панели можно банальным перетаскиваем мышкой, не забудьте только потом нажать кнопку «Обновить«:

На этом настройка плагина закончена. Хочу лишь добавить: если вы пользуетесь моим хаком защиты от спама путем подмены полей, то никаких дополнительных действий от вас не потребуется. Плагин ищет последнее текстовое поле на странице и работает именно с ним. Убедитесь только, что текстовое поле в коде файла comments.php задано в одну строчку типа:

Если будет найден хоть один перенос строки, то плагин вообще не выведет свою панель с кнопками. Вот так будет неправильно:

Это связано с особенностями определения плагином поля для ввода комментирования. Просто имейте это ввиду, если вдруг в вашем шаблоне при активации плагина панель с кнопками не появилась.

Многие блогеры игнорируют плагины с кнопками форматирования текста, а зря. Вроде бы элементарная вещь, но она очень способствует появлению комментариев на сайте.

Comment Form Quicktags
Автор плагина: Regen
Рассматриваемая версия: 1.3.2 от 12.07.2011
Текущая версия: 1.3.2 от 12.07.2011
Совместимость с версией WordPress: 2.9 и выше
Активных установок плагина: 400+
Скачать плагин версии 1.3.2 (всего скачено 25 297 раз)

Топ-пост этого месяца:  Joomla загрузка файлов

Понравился пост? Подпишись на обновления по RSS или Twitter !

Как вставить код на сайт в WordPress?

1. Вы можете вставить код просто текстом. Этот способ имеет много минусов. Во-первых, не будут отображаться отступы в коде, т.к. текстовый редактор просто будет вырезать все табуляции и повторяющиеся пробелы. Этого можно избежать, используя для вставки кода тег ). Во-вторых, если вам понадобиться нумерация строк, то вам придется проставлять ее вручную. Такая нумерация не очень удобна, т.к. при копировании кода, нумерация строк тоже будет скопирована. В-третьих, код будет отображаться некрасиво и не будет подсветки кода.
Этот вариант подойдет для вставки небольших кусков кода.

2. Использовать специальный плагин для вставки кода в WordPress. Он значительно упростит вставку кода в статьи и сделает за вас всю работу. Рекомендую использовать именно этот вариант. Для WordPress Есть несколько таких плагинов, но мне больше всего понравился WP SyntaxHighlighter. В нем есть множество настроек и несколько тем оформления кода, поэтому дальше в этой статье речь пойдет именно о нем. Кстати, именно этот плагин используется на блоге seofine.ru, пример вы можете посмотреть в статье «Как подключить смайлы в комментариях?«.

Итак, сначала установим сам плагин. Тут ничего сложного нет, установка происходит стандартным образом. Подробнее об установке плагинов в WordPress, вы можете прочитать в статье « Установка плагинов в WordPress« .

Настройка WP SyntaxHighlighter

После того как плагин будет установлен, в меню Параметры появится пункт WP SyntaxHighlighter . Кликаем по нему и попадаем на страницу настроек плагина.

WP SyntaxHighlighter в меню

Страница настроек WP SyntaxHighlighter

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

Не работает плагин Syntax Highlighter (подсветка кода) WordPress

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

Почему я выбрал именно SyntaxHighlighter?

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

А на выходе получим вот такую подсветку:

Тут любой Ваш код

Исправляем ошибку плагина с подсветкой.

Лично у меня возникла такая проблема, после работы с дизайном, установкой плагинов подсветка пропала. Пробовал найти замену плагину, это оказалось не просто и я решил покопаться и поискать причину.

Полазил в сети, увидел много подобных отзывов что плагин не работает и случайно попал не его официальный сайт Syntax Highlighter.

Там я узнал, что существует еще и плагин Syntax Highlighter ComPress(от этого же разработчика). После установки этого плагина проблема пропала — подсветка заработала.

Кстати заметил интересны момент, что отдельно плагины не работают, только вместе ) Так же обязательно должно быть наличие функции в подвале:

Code Prettify Syntax Highlighter — автоматическая подсветка кода в постах

Если вы в своих постах часто приводите примеры программного кода, то значит вы уже столкнулись с проблемой подсветки этого кода и сохранения его без изменений. Дело в том, что при сохранении поста WordPress автоматически переводит все его содержимое в HTML-разметку, и если вы в посте опубликуете фрагмент кода, то он тоже будет переведен. В итоге там, где должен быть текст, демонстрирующий код элемента, появится сам элемент, да еще, скорее всего, с ошибками, так как вы приводите лишь пример части кода, а не полное его содержание.

Для того, чтобы опубликовать текст без изменений, нужно использовать специальный HTML-тег pre:

code тут текст, который должен остаться неизменным

Однако этот текст не имеет подсветки, и при публикации больших фрагментов программного кода в нем будет трудно разобраться. Решить эту проблему поможет плагин [text]Code Prettify Syntax Highlighter[/text].

Плагин сделан на основе js-скрипта google-code-prettify, автоматически распознающего и подсвечивающего программный код. Для того, чтобы ваш код был сохранен без изменений и выделен в посте отдельным блоком, нужно в настройках блога указать автоматическую замену pre на pre со специальными стилями, по которым плагин будет определять, какой текст обрабатывать.

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

Панель форматирования комментария

Добавляем к форме комментария панель форматирования комментариев (Quicktags) без плагина. Расширяем стандартную форму комментария.

Кнопки добавления тегов (Текст)

Данная техника добавляет панель с кнопками для добавления тегов.

Вставляем код в functions.php

Не совсем корректно работает кнопка link: форма добавления ссылки появляется в футере. Решается добавлением стиля с атрибутом position: fixed;

Стили кнопок форматирования

Примеры ниже в комментарии

Форма комментария в виде редактора TinyMCE (Визуально)

Вставляем в functions.php

В данном решении стили не нужны. Недостатком является отсутствие кнопки добавить изображение.

Подумать, как реализовать переключение ввода Визуально/Текст

Промониторил несколько плагинов:
TinyMCE Comment Field — WYSIWYG (1000) — после установки запросил установить еще один плагин — я его сразу удалил. TinyMCE Visual Editor Comment (1000) — при активации, выдал фатальную ошибку и отключился.

Панель комментирования в 2-х режимах

Настроил панель, таким образом чтобы была возможность переключения между визуальным и текстовым режимом

‘buttons’ => ‘strong,em,del,img,ul,ol,li,code’ — этой строкой настраиваем кнопки форматирования html

$mce_buttons = array( ‘bold’, ‘italic’, ‘underline’, ‘strikethrough’, ‘hr’, ‘bullist’, ‘numlist’, ‘underline’, ‘undo’, ‘redo’, ‘fullscreen’ ); — этой переменной настраиваем кнопки форматирования визуального редактора.

Поделится информацией с друзьями

5 лучших бесплатных плагинов для вставки и подсветки кода

Отображение кода в WordPress – нелёгкая работа. Когда вы используете CMS WordPress, вы сталкиваетесь с проблемой вставки кода в вашу запись на блоге. Проблема в том, что WordPress по умолчанию изменяет HTML код. Это вызывает трудности у тех, кто хотел бы отобразить HTML код в своих записях на блоге. Это, в основном, разработчики и блоггеры, связанные с программированием, кто, например, хочет обучить своих пользователей работе с определёнными HTML кодами.

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

Топ-пост этого месяца:  Обязательные поля формы. Как сделать поля формы обязательными

1 – Crayon Syntax Highlighter

[wp-pic type=»plugin» slug=»crayon-syntax-highlighter» layout=»large» ]

Crayon Syntax Highlighter – это лучший способ показать код в красочном виде. Как следует из названия, этот плагин показывает отображаемый код в красочном виде. Crayon Syntax Highlighter помогает пользователю понять код ясно, так как он окрашивает разные атрибуты кода в разные цвета. Также он показывает код с номерами строк, чтобы показать длину кода.

Особенности:

  • Перенос строки
  • Поддержка несколько языков
  • Различные шрифты
  • Поддержка подсветки в всплывающем новом окне

2 – Syntax Highlighter Evolved

[wp-pic type=»plugin» slug=»syntaxhighlighter» layout=»large» ]

Syntax Highlighter Evolved является одним из лучших и очень удобным плагином для подсветки кодов в ваших записях в WordPress. Этот плагин делает только то, для чего он предназначен, то есть отображает коды и ничего более. Этот плагин также показывает номера строк, чтобы определить длину кода.

Особенности:

  • Простой в использовании
  • Занимает мало места
  • Отображает номера строк

3 – Advanced Code Editor

[wp-pic type=»plugin» slug=»advanced-code-editor» layout=»large» ]

Advanced Code Editor – плагин для подсветки кода, который имеет 11 тем для подсветки. Этот плагин поддерживает такие языки, как PHP, HTML, CSS , JavaScript. Он также позволяет посмотреть исходный код в своём редакторе. Этот плагин также имеет функцию автоматического заполнения, поддерживающую 3500 функций WordPress.

Особенности:

  • Темы для создания красивого внешнего вида
  • Функция автозаполнения
  • Поиск и замена.
  • Поддержка нескольких языков.

4 – WP Syntax

[wp-pic type=»plugin» slug=»wp-syntax» layout=»large» ]

WP Syntax – это плагин, который даёт простой взгляд на отображаемый код. Этот плагин даёт вам свободу выбора – отображать номера строк или нет. WP Syntax поддерживает все основные языки, используемые для кода, позволяет избегать конфликтов с большинством сторонних плагинов.

Особенности:

  • Простой взгляд на код
  • Можно отображать номера строк, можно нет
  • Поддержка основных языков
  • Отсутствие конфликтов с другими сторонними плагинами

5 – Fv Code Highlighter

[wp-pic type=»plugin» slug=»fv-code-highlighter» layout=»large» ]

Плагин Fv Code Highlighter – для тех, кто любит код в цвете, этот плагин использует такую же цветовую схему, как и Adobe Dreamweaver. Если вы работаете в Dreamweaver, то этот плагин покажется вам знакомым. Этот плагин также поддерживает множество языков, таких как PHP, JavaScript, CSS, HTML, XML, XHTML. Вы можете изменить цветовую схему отображаемого кода путём внесения изменений в CSS плагина. Но плагин достаточно тяжёлый, хотя автор с каждым обновлением уменьшает нагрузку от него.

Особенности:

  • Цветовая схема такая же, как в Adobe Dreamweaver
  • Поддержка несколько языков
  • Возможность изменения цветовой схемы с помощью CSS

ЗАКЛЮЧЕНИЕ
Это лучшие бесплатные плагины для вставки и подсветки кода для WordPress. Если вы хотите пополнить этот список или просто хотите сказать нам, какие плагины вы хотите использовать, то можете использовать раздел комментариев внизу для того, чтобы сообщить нам об этом.

Как в WordPress красиво подсветить вставки кода?

На всех сайтах, где обсуждаются вопросы программирования на том или ином языке, присутствуют вставки частей готового кода. Это могут быть блоги, форумы, сайты вопросов/ответов и пр. Довольно удобно смотреть на представленный код, когда все его директивы и части языка выделяются цветом, что позволяет легче его воспринимать. WordPress, по умолчанию, не поддерживает какую-либо подсветку кода. Код выводится довольно единообразно.

Плагин Crayon Syntax Highlighter

Бесплатный плагин Crayon Syntax Highlighter обеспечивает большой набор возможностей подсветки кода, среди которых:

  • поддержка многих языков программирования;
  • настройка языков;
  • выбор готовых тем и настройка каждого их элемента;
  • удобный вывод кода на сайте (кнопки копирования в буфер обмена, нумерации строк, открытия в новом окне).

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

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

Как можно заметить, в окне присутствует огромное количество всевозможных настроек. Для вставки нашего кода мы будем использовать лишь несколько из них. В поле Language можно выбрать язык программирования, на котором написан вставляемый код. Укажем, например, PHP. Далее, в текстовом блоке Code, нужно вставить сам код и нажать кнопку Add.

В итоге в редакторе наша запись будет выглядеть следующим образом:

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

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

Красивая подсветка 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. – если активировать данную функцию, то длинные строки будут автоматически переноситься, а если убрать, то появиться полоса прокрутки.
Топ-пост этого месяца:  Метод TypeScript String concat добавление нескольких строк и возврат одной новой

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

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

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

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

SyntaxHighlighter подсветка синтаксиса кода на сайте

Дата публикации: 2012-12-14

От автора: иногда необходимо опубликовать на своем сайте исходный код программы, с подсветкой синтаксиса. Именно эту задачу мы с Вами будем решать в данном уроке. С помощью плагина SyntaxHighlighter и нескольких строк кода PHP мы реализуем публикацию кода с подсветкой его синтаксиса.

В качестве исходников к данному уроку я воспользуюсь исходниками из урока Установка визуального редактора с файловым менеджером. Сразу оговорюсь, что если Вы публикуете материал на своем сайте без использования визуального редактора, то Вы будете избавлены от некоторых недостатков визуальных редакторов. Если же Вы используете все же визуальные редакторы, то публиковать код нужно будет в режиме кода (не в визуальном режиме).

Внимание. В связи со спецификой публикации (при публикации используются BB-теги, которые пересекаются с публикуемыми BB-тегами) рекомендуется просмотреть текстовую версию из исходников.

Итак, приступим к публикации кода с подсветкой синтаксиса

Детали урока «Подсветка синтаксиса кода на сайте»

Тема: PHP, JavaScript

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Сложность: Средняя

Урок: Видео версия (.mp4)

Время: 01:04:27

Размер архива: 168 Mb

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

На момент записи урока версия данного плагина — 3.0.83. Но в уроке мы воспользуемся более ранней версией, которую я нашел в сети. Почему не актуальной версией? Дело в том, что в актуальной версии автор плагина почему-то убрал иконку копирования кода:

Подсветка кода в статьях WordPress при помощи Google Code Prettify

Сегодня в очередном уроке рассмотрим один из большинства примеров реализации подсветки кода в статьях WordPress. В этом варианте воспользуемся модулям от Google, который позволяет подсвечивать синтаксис кода с разными языками программирования. У него есть ряд своих особенностей, включая построение на JavaScript основе с библиотекой-агностик. Поэтому его можно легко установить на любой сайт. Но кто хочет пойти по пути меньшего сопротивления, то для этого есть специальные плагины вставки кода.

Модуль Google Code Prettify возможно интегрировать на сайт двумя способами: через тег подключения скрипта, то есть напрямую загружать, или скачать как отдельные файлы. По сути Code Prettify добавляет свои стили тегу pre или code с определенными классами, а также допускается формирование содержимого внутри этих тегов как нумерованным списком


    . Это в том случае, если нужно отображать нумерацию строк, а так каждый элемент будет просто обернут в тег .

Преобразование содержимого тега PRE в HTML-сущность

Чаще всего используется тег pre в качестве обвертывания фрагментов кода. Он сохраняет пробелы, перенос строки и форматирует текст должным образом. Но имеется один недостаток, в WordPress’e вставленный HTML код будет интерпретироваться как реальный HTML. Поэтому нужно сделать правильную конвертацию кода, чтобы сохранять корректный HTML код.

Это первая деталь доработок, вторая заключается в автоматичном добавлении к тегам pre определенные классы. Такое применение по меньшей мере будет предусмотрительным решением, так как подсветка кода задается только тем тегам pre , у которых имеются определенные классы. А, значит, если этого не сделать, то вам придется вручную добавлять нужный класс всем уже имеющимся тегам pre в статьях. Вот поэтому проще сделать все в автоматическом режиме.

Откройте файл functions.php , в конце перед знаком ?> добавляем следующий код:

Теперь тегу pre автоматически присваивается класс prettyprint и класс linenums , что дает нумерацию строк (по желанию можно убрать).

Подключение Code Prettify к WordPress

Выше говорилось о способах подключения модуля Prettify и не упомянутых его особенностей. Давайте все это разберем по пунктам.

Особенности:

  • Легкий вес, при загрузке не блокирует загрузку страницы
  • Готовые темы оформления внешнего вида (стили CSS)
  • Поддерживает весь синтаксис без необходимости указывать точный язык
  • Можно указывать точный язык программирования
  • Поддержка кроссбраузерность

Подключение через CDN (Сеть Доставки Контента)

Многие выбирают именно этот вариант подключения поскольку у него имеется ряд своих преимуществ: улучшает кэширование, уменьшает задержку и прочее. Открываем файл functions.php и добавляем такой код:

Подключение стандартным путем

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