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

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

Всем доброго времени суток! Как и обещал, эту неделю посвящаю нужным плагинам для движка 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. Нажимаем на него и откроется страница на русском языке для настроек модуля. Проблем с настройками у вас возникнуть не должно:

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

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

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

Crayon Syntax Highlighter

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

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

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

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

Добавить код Crayon

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

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

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

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

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

Настройки плагина Syntax Highlighter

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

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

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

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

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

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

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

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

При этом будут рассмотрены такие плагины, как Comment Form Quicktags, в этой статье, а так же Comment Toolbar и Qip Smiles в следующей статье этой серии.

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

  1. одним кликом вставлять цитаты в форму для их написания
  2. одним кликом вставлять имя человека, оставившего комментарий для того, чтобы ответить на его вопрос или задать ему свой
  3. перемещаться по комментам последовательно или сразу же переходить к первому, либо к последнему из них
  4. посетители вашего WP блога смогут использовать выделение жирным, курсивом и т.п.
  5. удобно вставлять ссылки в комменты
  6. вставлять в них код без потерь и в точно таком же виде как и в статьях, т.е. с использованием оформления и подсветки
  7. оживлять их смайликами

Вставка кода в WordPress с помощью SyntaxHighlighter Evolved

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

Плагин устанавливается в Вордпресс стандартным способом, а именно:

  1. распакуйте архив с плагином, используя ftp-менеджер подключитесь к вашему хосту и загрузите папку syntaxhighlighter в папку с WP плагинами wp-content/plugins/ на сервере вашего хостинга
  2. войдите в админку WordPress и выберете из левого меню вкладку «Плагины», а на ней «Inactive»
  3. найдите строку с SyntaxHighlighter Evolved и активируйте его

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

Ну вот, WP плагин установлен, теперь можно зайти в админку блога и ознакомиться с его настройками. Для этого выбираем из левого меню «Параметры» -> «SyntaxHighlighter» (если не русифицировали плагин) или «Подсветка синтаксиса» (если русифицировали).

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

Но с помощью этой страницы настроек можно много чего поменять и переделать под себя. В поле «Цвета» можно выбрать одну из семи цветовых палитр, которую будет в итоге использовать SyntaxHighlighter для подсветки синтаксиса языков программирования и разметки.

В поле «Разное» можно настроить:

  1. «Показывать номера строк» — ставьте галочку, если хотите, чтобы слева от строк подсвеченного кода показывалась их нумерация
  2. «Показывать панель инструментов» — ставьте галочку, если хотите, чтобы при наведении на окно кодом, появлялась панелька с тремя кнопками, позволяющими, во-первых, скопировать чистый фрагмент из всплывающего окна, во-вторых, скопировать его в буфер обмена и, в-третьих, вывести его на печать
  3. «Автоматически делать URL «кликабельными»» — при установленной галочке можно будет перейти по всем ссылкам, включенным в область с кодом, просто щелкнув по ним мышью. Это будет работать и в комментариях, и в статьях.
  4. «Сворачивать окно» — при установленной галочке в окне подсвечиваемого кода будет показана только его часть, а для просмотра полного варианта нужно будет щелкнуть по специальной ссылке. Можно активировать эту опцию, если вы планируете вставлять в статьи своего блога большие фрагменты
  5. “Использовать легкий режим — лучший выбор для однострочного фрагмента — при установленной здесь галочке не будут отображаться номера строк и всплывающая панелька с тремя кнопками.
  6. «Wrap long lines (disabling this will make a scrollbar show instead)» — если галочка установлена, то длинная строка будет переноситься на следующую строку с показом иконки переноса. В противном случае, в окне с подсветкой кода появится горизонтальная прокрутка

В поле «Номер начальной строки» можно назначить номер первой строки по умолчанию, а в поле «Размер табуляции», соответственно, размер знака табуляции в окне с подсветкой кода. Не забудьте сохранить проведенные изменения настроек плагина SyntaxHighlighter, нажав на кнопку «Сохранить изменения».

Что примечательно, все внесенные изменения после нажатия сохранения тут же отобразятся в админке (в окне под названием «Предпросмотр»). Как вы, наверное, уже поняли из приведенного выше примера использования данного расширения, его применение весьма простое.

Нужно всего лишь заключить код в статье или комментариях WP в специальные теги с квадратными скобками:

Другие варианты тегов из ассортимента плагина вы можете посмотреть в самом низу страницы настроек. У этих тегов могут использоваться специальные параметры, значения которых так же приведены в области «Параметры».

Какие именно языки поддерживает плагин SyntaxHighlighter вы можете увидеть на странице плагина.

Comment Form Quicktags — расширение функционала комментариев в WordPress

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

  1. распакуйте архив с плагином для Вордпресс comment-form-quicktags.1.2.1.zip , используя ftp клиент подключитесь к вашему сайту и загрузите папку comment-form-quicktags в папку с плагинами для WordPress wp-content/plugins/
  2. войдите в админку wordpress и выберете вкладку «Плагины»- «Inactive»
  3. найдите строку с Comment Form Quicktags и активируйте его

Теперь заходим в админку и выбираем из левого меню «Параметры» -> Comment Form Quicktags. На этой странице вы можете настроить, какие именно возможности форматирования текста комментариев будут доступны посетителям вашего блога.

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

  1. Выберите тэг (вкладку, например, «Вставка кода», как на приведенной выше картинке), чтобы его отредактировать или введите ID (в соответствующее поле «ID»), если хотите добавить новый тег
  2. Отредактируйте другие поля (в поле «Надпись (название)» вводите желаемое название вкладки)
  3. Нажмите кнопку «Правка/Добавить»
  4. Задайте порядок кнопок с тэгами в форме добавления комментария простым их перетаскиванием прямо в окне настройки (очень удобная возможность)
  5. Нажмите кнопку «Обновить», чтобы сохранить проведенные настройки

Теперь давайте настроим подсветку кода в комментариях WordPress средствами плагина SyntaxHighlighter Evolved. Для этого нужно будет внести изменение в настройку тега (вкладки) «Code».

Щелкаете по вкладке «Code» на странице настроек Comment Form и для начала переименовываете название вкладки, например, в «Вставка» (в поле «Надпись (название)»).

А вот в полях «Открывающий тэг» и «Закрывающий тэг» прописываете, например, [рhp] и [/рhp]. Теперь нужно нажать на кнопку «Правка/Добавить», при необходимости перетащить вкладку мышью на другое место в форме комментария и не забыть нажать на кнопку «Обновить» для окончательного сохранения настроек.

Как написано на странице настроек, данное расширение поддерживает следующие тэги:

На их основе можно создавать новые вкладки над полем для ввода текста комментариев в WordPress. Пример использования этого WP плагина вы можете увидеть у меня в комментариях.

Про Comment Toolbar и Qip Smiles читайте в этой статье.

Блог Виталия Кириллова | Все о создании,
продвижении сайтов и заработке в интернете

Создание и продвижение сайтов, заработок в интернете

Подсветка кода на основе SyntaxHighlighter

Всем привет! Сегодня на seo-mayak.com, по просьбам читателей, я расскажу, как реализована подсветка кода у меня на блоге.

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

Я не зря заговорил о плагине SyntaxHighlighter, так как именно его мы сегодня будет разбирать.

Наверное уже кто-то подумал, что я буду рассказывать, как установить и как пользоваться данным плагином. Увы, но вышеупомянутый плагин нам понадобиться лишь в качестве исходного материала и устанавливать мы его не будем. Мы просто возьмем из него самое необходимое, немного модернизируем, а результат интегрируем в шаблон.

Чего мы добьемся всеми этими действиями?

Прежде всего мы до минимум сократим количество подключаемых JS-файлов (файлов с расширением .js), что безусловно скажется на скорости загрузки сайта и общей нагрузке на сервер, но кроме того нам предстоит сократить JavaScript в отобранных файлах до возможного предела, чтобы соблюсти рекомендации PageSpeed.

Кто сталкивался с плагином SyntaxHighlighter, тот знает сколько JS-файлов он подключает и как это тормозит загрузку страницы.

Материал довольно не простой, но надеюсь, что веб-мастерам, публикующим на своих сайтах различные коды, данный пост будет полезен. Поехали!

Разбираем плагин SyntaxHighlighter

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

Итак скачиваем плагин и распаковываем архив в любое место на компьютере. Открываем папку «syntaxhighlighter», где нам нужна папка «syntaxhighlighter2»:

Далее переходим в папку «scripts». В общем наш путь должен быть таким: syntaxhighlightersyntaxhighlighter2scripts

Открываем конечную папку и видим ряд файлов с расширением .js:

Как видите, из всего списка на понадобится всего три файла:

shCore.js
shBrushCss.js
shBrushPhp.js

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

Копируем выбранные файлы в отдельную папку, возвращаемся на шаг назад и открываем папку «styles» (путь: syntaxhighlightersyntaxhighlighter2styles), где находятся файлы с расширением .css и изображения:

Здесь из css-файлов нам понадобится всего один:

А также три изображения:

help.png
printer.png
page_white_code.png

Копируем все вышеперечисленное в отдельную папку и все, плагин SyntaxHighlighter нам более не нужен. Теперь мы будем работать только с теми файлами, которые мы отсортировали. И начнем мы с сокращения JavaScript.

Как сократить JavaScript

Открываем в текстовом редакторе файл shCore.js (для редактирования файлов советую пользоваться Notepad++) и удаляем из него все лишнее, т.е. все строчки, которые находятся между символами /* и */.

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

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

На очереди у нас два файла, которые можно и нужно оптимизировать, дабы выполнить рекомендации PageSpeed: shBrushCss.js и shBrushPhp.js.

Для начала нам надо сделать из двух файлов один. Должен получиться следующий код:

Сохраняем файл под названием shBrushPhp.js.

Теперь идем на сервис info-pages.com.ua и вставляем скопированный код в верхнее поле. Выбираем «Нормальное сжатие» и жмем на кнопку «Получить код»:

Заменяем содержимое файла shBrushPhp.js на оптимизированный скрипт и не забываем сохранить изменения. На этом с оптимизацией JS-файлов мы закончили. Движемся дальше.

Оптимизация CSS

Подошла очередь «поиздеваться» над файлом shCore.css. Открываем файл и удаляем все комментарии разработчиков из верхней части.

Далее нам надо изменить путь до служебных картинок, которые мы позаимствовали у плагина SyntaxHighlighter. Ищем такие три строчки:

Строчка №208:

Строчка №213:

Строчка №225:

Добавляем к названию картинок, название папки, где они будут храниться. Должно получиться так:

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

Теперь идем на сервис csscompressor.com . Вставляем css-код в поле, выбираем режим наибольшего сжатия «Highest (no readability, smallest size)» и жмем на кнопку «Compress»:

Сжатый css-код можно временно сохранить в отдельном файле, так как чуть позже мы его переместим в другое место.

Переходим к завершающему этапу реализации подсветки кода на сайте.

Подсветка кода прямо из шаблона

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

Нам нужна папка с названием js:

Помещаем в данную папку файлы shCore.js и shBrushPhp.js. Если такой папки нет, то ее надо создать.

Далее, возвращаемся в корень темы и открываем папку images:

Закидываем в папку images изображения: help.png, printer.png и page_white_code.png. Данная папка должна иметься в любом шаблоне, хотя могут быть и исключения. Если такой папки нет, то тоже создаем ее.

У нас остался CSS-код, который надо также перенести в шаблон. Конечно можно создать отдельный CSS-файл и отдельно его подключить, но делать мы это не будем. Почему? Подробно описано тут.

Открываем уже имеющийся в шаблоне файл style.css (для редактирования файлов на сервере, советую пользоваться FTP клиентом Notepad++) и в самый конец, после последней скобки, вставляем наш сжатый CSS-код.

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

Если же ничего не изменилось и сайт корректно отображается, то движемся дальше.

Нам осталось подключить к сайту библиотеку SyntaxHighlighter и js-файлы.

Подсветка синтаксиса PHP, HTML, JS и других на WordPress без плагина

Очень многие вебмастера задавались вопросом подсветки синтаксиса программного кода на своем сайте. Данный вопрос особенно актуален, если сайт на тему программ, скриптов и т.д. Сплошь и рядом на таких сайтах в статьях встречаются фрагменты кодов разных языков: PHP, HTML, JS, SQL и т.д. Простым текстом такой код выглядит не привлекательно и не читаемо для программиста.

Согласитесь, такая картина не внушает доверия! Как же сделать подсветку синтаксиса в статьях? В нашем случае на сайтах WordPress? На самом деле это очень простой вопрос, но в поисках ответов очень часто вебмастера ставят тяжелые плагины, которые либо мешают работе других плагинов, либо конфликтуют с другими плагинами после очередного обновления, перестают работают ни с того, ни с сего.

Подсветка синтаксиса WordPress без плагина

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

  • Google Code Prettify
  • Highlight.JS
  • SHJS
  • SyntaxHighlighter
  • eSHi
  • Quick Highlighter
  • Chili
  • JUSH

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

  • SyntaxHighlighter
  • WP-Syntax
  • Syntax Highlighter Evolved
  • WordPress Rainbow Hilite

Собственно, все эти плагины и работают на базе вышеназванных библиотек для подсветки синтаксиса, но чем меньше вы используете на сайте плагинов, тем быстрее и безопаснее он работает! Поэтому давайте подключать “подсветку синтаксиса” без плагина!

Подсветка синтаксиса на базе Google Code Prettify

Рассмотрим пример подсветки синтаксиса на базе библиотеки от Google под названием “Google Code Prettify“. Данная библиотека весит около 93 КБ, но распознает такие языки как Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Ruby, PHP, VB и другие. Этого даже больше чем достаточно. А подключается и настраивается она очень легко, никаких трудностей у Вас не должно возникнуть. Итак.

Подключение

1. Скачайте библиотеку, содержимое папки с файлами, распакуйте на сервере, например в папке “syntax“;
2. Подключите в шапке Вашего сайта, как правило, в файле header.php, следующие строки:

После таких манипуляций в нашем редакторе появится кнопочка под названием “Pre”:

Выделив нужный нам фрагмент текста, то есть кода, и нажав на кнопочку “Pre”, нужный текст будет обрамлен конструкцией вида и после сохранения записи пользователи Вашего сайта увидят подсвеченный синтаксис!

Свои стили подсветки синтаксиса

Стили подсветки синтаксиса находятся в маленьком крошечном файле prettify.css. Вы можете изменить стили по своему усмотрению, либо использовать понравившийся Вам из числа классических. Ниже я приведу примеры:

Default (по умолчанию будет отображаться и без подключения файла со стилями)

Sunburst (by David Leibovic)

Doxy (by Robert Sperberg)

Desert (by techto…@)

Sons-Of-Obsidian (by Alex Ford)

Собственно и все! С задачей подсветки синтаксиса популярных языков программирования на сайтах WordPress мы справились без использования какого-либо плагина! Если функционала библиотеки Google Code Prettify Вам показалось мало, всегда можно почитать о тонких настройках тут. Всем пока! Не загромождайте свой сайт на WordPress ненужными плагинами! Кстати, на момент написания данного руководства, на данном сайте использовалась как раз библиотека Google Code Prettify!

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 плагином WP-Syntax

Здравствуйте! Сегодня речь пойдет о том, как можно вставить код в текст статьи или комментария. У WordPress есть специальный плагин для подсветки синтаксиса, называется он WP-Syntax.

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

Примеры использования тегов WP-Syntax для подсветки кода

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

Где language — название языка по спецификации GeSHi, полный список приведен на странице плагина. Мне в большинстве случаев достаточно использовать php , js , css , html5 , sql и т.д.

Номера строк

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

При копировании кода со страницы строковые номера не выделяются и не копируются, что очень важно. Мне довелось устанавливать множество плагинов подсветки и большинство из них имею свои недостатки, в том числе связанные с номерами.

Выделение важных строк

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

Обратите внимание, параметру highlight присвоено значение 3 , а нумерацию строк я задал начиная с шестой. Тем не менее подсветка будет именно у третьей строки сверху — это абсолютное значение.

Оптимизация плагина и дополнительная конфигурация

Плагин использует свои стили оформления, подключая отдельный css-файл в заголовке. Обращая внимание на скорость загрузки страницы, предпочтительно объединять css файлы в один общий. Для этого скопируйте все стили из файла wp-syntax.css, который находится в папке с установленным плагином в файл style.css темы WordPress.

Для того чтобы отключить автоматическое подключение wp-syntax.css в заголовке (исключаем повторную загрузку) добавьте в файл functions.php такую строчку:

Этот фильтр подходит для старых версий плагина, если Вы давно его не обновляли. Для последних версий начиная с 1.0 следует найти в папке установленного плагина файл wp-syntax.php и закомментировать одну из строк таким образом:

У плагина WP-Syntax, впрочем как у многих других, есть один неприятный глюк. Заключается он в том, что при редактировании статьи в HTML-режиме теги pre и сам код работают как надо, но стоит переключиться в визуальный режим, как все содержимое тегов бесследно исчезает. Для решения этой проблемы нам потребуется в файле /wp-content/plugins/wp-syntax/wp-syntax.php найти строку:

и заменить ее на:

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

Работа со стилями, изменение цвета подсветки

Плагин WP-Syntax основан на открытой библиотеке GeSHi. Для подсветки синтаксиса используется цвет шрифта, заданный по-умолчанию, однако в плагине реализован хук wp_syntax_init_geshi с помощью которого можно менять расцветку.

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

В отличие от SyntaxHighlighter Evolved, который подгружает на страницу тонны скриптов и стилей, WP-Syntax очень легкий и функциональный. И самое главное — работает как часы!

Добавление кнопок WP-Syntax в HTML редактор

Использование shortcode для быстрой вставки тегов подсветки значительно упрощает работу со статьями. Для добавления кнопок в режим HTML-редактора вставьте в файл functions.php следующий код:

‘ ); QTags.addButton( ‘CSS’ , ‘CSS’ , ” ); QTags.addButton( ‘PHP’ , ‘PHP’ , ” ); QTags.addButton( ‘JS’ , ‘JS’ , ” ); > >); script > >

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

В примере я добавил кнопки для следующих языков: HTML, CSS, PHP, JS. Вы можете дополнить список по своему желанию. Появились вопросы — задавайте! До новых встреч!

Подсветка кода. Плагин SyntaxHighlighter Evolved

Здравствуйте, уважаемые читатели моего блога!

Сегодняшний пост посвящен плагину SyntaxHighlighter Evolved, предназначенному для подсветки кода в статьях и комментариях WordPress блога. Проще говоря, плагин SyntaxHighlighter предназначен для того, чтобы вставить любой код (например, php или html) в текст статьи или в комментарии.

Я считаю, что подобное дополнение должно быть практически на любом блоге не зависимо от тематики. Мне, например, постоянно приходится вставлять коды в свои посты, посвященные урокам, в которых применяется редактирование шаблона WordPress. Коды часто приходится вставлять в комментарии или конкурсные статьи.

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

Вот пример использования этого плагина:

Таким образом можно вставлять любой код на страницы блога.

Установка плагина SyntaxHighlighter Evolved

Скачать SyntaxHighlighter Evolved можно перейдя по этой ссылке.

Теперь, как обычно, плагин необходимо поместить в папку «plugins» блога (wp-content/plugins/). Для русификации необходимо загрузить файлы из скачанного архива в папку с языковыми файлами плагина (wp-content/plugins/syntaxhighlighter/localization).

Затем активировать плагин через административную панель WordPress во вкладке «Плагины».

Настройки SyntaxHighlighter Evolved

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

Настройки плагина SyntaxHighlighter (на примере руссифицированной версии):

  • выбор версии Syntax. На своем блоге я использую версию 3х.
  • выбор цветовой схемы. Здесь можно выбрать семь различных цветовых решений.
  • показывать номера строк. Если отметить это поле, то строки кодов будут пронумерованы;
  • показывать панель инструментов. При активации этого пункта при наведении курсора на подсвеченный код будет всплывать панель, состоящая из трех кнопок, и позволяющая скопировать код или распечатать его;
  • автоматически делать урл кликабельным. Все ссылки в подсвеченном коде станут активными.

Внимание! Если к ссылкам не применен атрибут rel=”nofollow”, то ссылки будут индексироваться поисковыми системами!;

  • сворачивать окно с кодом. При активации данного параметра при открытии страницы изначально код будет отображаться в свернутом виде;
  • использовать легкий режим. При использовании этой опции не будут отображаться номера строк и панель инструментов (удобно для кода, состоящего из одной строки);
  • Wrap long lines (disabling this will make a scrollbar show instead). Если галочка стоит, то строки кода будут автоматически переноситься, а если нет, то появится полоса прокрутки.

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

Для того чтобы подсветить любой код, необходимо его заключить в специальные тэги с квадратными скобками, например,

[ php] Ваш код [ /php]

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

Стили оформления находятся в папке styles плагина (wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles). Ничего сложного там нет.

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

Теперь шрифт стал меньше:

Для этого я добавил строку: «font-size: 11px !important» в файл shThemeEclipse.css:

Здесь же можно изменять другие визуальные параметры плагина SyntaxHighlighter.

На этом у меня все. Как Вам статья?

Чтобы не пропустить выход новых постов, советую Вам подписаться на обновления моего блога.

TinyMCEComments

TinyMCEComments это плагин, добавляющий форме комментирования кнопки форматирования текста. В отличие от плагинов вроде Comment Form Quicktags и WP Comment Quicktags Plus этот плагин визуальный – то есть вы сразу видите результат, а не после публикации комментария. Для многих начинающих пользователей wysiwyg-редактирование текста гораздо удобнее, чем “непонятные” bb-коды или “непонятная” разметка в текстовых тегах.

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

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

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

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

Плагин использует встроенный в WordPress визуальный текстовой редактор TinyMCE, что дает вам возможность использовать в форме комментирования все функции этого редактора. Настроить их можно в “ПараметрахMCEComments“. Плагин не русифицирован, но разобраться в нем не слишком сложно. Большинству пользователей и не надо копаться в настройках плагина, так как набор кнопок по умолчанию вполне обеспечивает все потребности комментаторов. Разве что можно выбрать скин панели:

Добавление и удаление кнопок не визуальное – надо вписать текстовое значение кнопки в поле “Buttons in use“:

Маленький пример – заменим кнопки списков на кнопки “копирования” и “вставки”, для этого поле “Buttons in use” должно быть таким:

Визуально панелька станет такой:

Собственно, на этом все. Никаких манипуляций с кодом шаблона производить не надо – панелька будет встроена сразу после активации плагина. Я выборочно проверил несколько шаблонов – во всех встраивание происходит корректно, если текстовое поле для ввода комментария имеет стандартное имя “comment“. Но что делать, если вы используете этот хак защиты от спама, который основан на изменении имени поля для ввода комментария? Придется немного поправить файл плагина tinyMCEComments.php, найдите в этом файле указанную строчку и измените в ней имя текстового поля на используемое у вас в шаблоне:

После этого хак защиты от спама не помешает пользователям оставлять комментарии с визуальным их редактированием.

Теперь о неприятном – плагин TinyMCEComments неправильно подключает языковые файлы для редактора TinyMCE, что выливается в тултипы вида “advanced.bold_desc“:

Я не знаю баг ли это самого плагина или в WordPress нестандартно подключаются языковые файлы для TinyMCE. В любом случае такое поведение плагина надо поправить и самым простым способом будет добавление русского языкового файла для TinyMCE. Не буду вас заставлять создавать и редактировать этот файл, скачайте готовый файл по этой ссылке и распакуйте его в папку “wp-includes/js/tinymce/langs/“. После этого тултипы на русском языке у вас заработают. Я не переводил весь файл, только кнопки по умолчанию – так что, если вы будете использовать дополнительные кнопки, то исправьте их перевод с английского на русский в этом файле.

TinyMCEComments
Автор плагина: mk
Рассматриваемая версия: 0.4.8 от 26.09.2009
Текущая версия: 0.4.8 от 26.09.2009
Совместимость с версией WordPress: 2.5.0 и выше
Активных установок плагина: 1 000+
Скачать плагин версии 0.4.8 (всего скачено 72 472 раза)

Вставка кода в записи. Плагин ворпресс Crayon Syntax Highlighter

Приветствую!

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

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

Я пробовал использовать плагин WP-Syntax , но выяснялось, что вводить нужно вводить специальные коды вручную и так каждый раз. Плюс ко всему, вводить коды нужно было в режиме HTML . При сохранении страницы, точнее при её просмотре без сохранения код отлично подсвечивался, но при переходе в режим визуализации код, даже заключённый в специальные теги всё-равно преобразовывался. Поэтому от плагина WP-Syntax пришлось отказаться.

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

Установка плагина Crayon Syntax Highlighter

Для установки плагин Crayon Syntax Highlighter, нужно набрать в меню поиска плагинов прямо в админке вордпресс набрать «Crayon Syntax Highlighter«:

Поиск плагина в админке вордпресс

После этого нажимаем «поиск плагинов» и выбираем в открывшемся окне плагин «Crayon Syntax Highlighter» — «установить«. После установки нажимаем «Активировать плагин«. Всё — плагин работает!

Настройки плагина Crayon Syntax Highlighter

Для настройки плагина нужно перейти в меню «ПАРАМЕТРЫ«, которое находиться слево в меню админ-панели. Нажимаем на это меню, затем выбираем «Crayon«. Открывается страница с настройками плагина Crayon Syntax Highlighter:

Вообще у плагина очень много настроек, но они все очень легки для понимания. Я не стал ничего менять, только поставил галочку «Отображать полосу прокрутки всегда». Сделал это потому, что зачастую кож получается вытянутый горизонтально и без прокрутки всё это дело не очень удобно.

Работа с плагином Crayon Syntax Highlighter

Что действительно приятно в использовании этого плагина для вордпресс, это то, что ничего вручную вписывать не нужно. Чтобы вставить код на страницу нужно всего лишь нажать на специальную кнопку, которая появляется в редакторе:

Нажимаем на эту кнопку и втавляем нужный нам код (тот, который хотим подсветить и показать без преобразования в код страницы), в выпадающем меню «Язык» выбираем язык программирования, в котором написан вставляемы нами код, или оставляем его как есть — этот параметр влияет на то, какие коды и как будут подсвечиваться. Затем нажимаем кнопку вверху «Добавить». При необходимости можно сделать индивидуальные настройки, которые располагаются ниже:

То, как отображается вставляемый код на страницу с записями, вы можете посмотреть в записи «Редактируем виджет МЕТА«.

Интернет дайджест для вебмастеров и фотографов

Подсветка кода на основе SyntaxHighlighter

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

Чего мы добьемся всеми этими действиями?

Прежде всего мы до минимум сократим количество подключаемых JS-файлов (файлов с расширением .js), что безусловно скажется на скорости загрузки сайта и общей нагрузке на сервер, но кроме того нам предстоит сократить JavaScript в отобранных файлах до возможного предела, чтобы соблюсти рекомендации PageSpeed.

Кто сталкивался с плагином SyntaxHighlighter, тот знает сколько JS-файлов он подключает и как это тормозит загрузку страницы.

Материал довольно не простой, но надеюсь, что веб-мастерам, публикующим на своих сайтах различные коды, данный пост будет полезен. Поехали!

Разбираем плагин SyntaxHighlighter

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

Итак скачиваем плагин и распаковываем архив в любое место на компьютере. Открываем папку «syntaxhighlighter», где нам нужна папка «syntaxhighlighter2»:

Далее переходим в папку «scripts». В общем наш путь должен быть таким: syntaxhighlightersyntaxhighlighter2scripts

Открываем конечную папку и видим ряд файлов с расширением .js:

Как видите, из всего списка на понадобится всего три файла:

shCore.js
shBrushCss.js
shBrushPhp.js

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

Копируем выбранные файлы в отдельную папку, возвращаемся на шаг назад и открываем папку «styles» (путь: syntaxhighlightersyntaxhighlighter2styles), где находятся файлы с расширением .css и изображения:

Здесь из css-файлов нам понадобится всего один:

А также три изображения:

help.png
printer.png
page_white_code.png

Копируем все вышеперечисленное в отдельную папку и все, плагин SyntaxHighlighter нам более не нужен. Теперь мы будем работать только с теми файлами, которые мы отсортировали. И начнем мы с сокращения JavaScript.

Как сократить JavaScript

Открываем в текстовом редакторе файл shCore.js (для редактирования файлов советую пользоваться Notepad++) и удаляем из него все лишнее, т.е. все строчки, которые находятся между символами /* и */.

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

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

На очереди у нас два файла, которые можно и нужно оптимизировать, дабы выполнить рекомендации PageSpeed: shBrushCss.js и shBrushPhp.js.

Для начала нам надо сделать из двух файлов один. Должен получиться следующий код:

Можете самостоятельно объединить файлы или просто скопировать мой вариант.

Сохраняем файл под названием shBrushPhp.js.

Теперь идем на сервис info-pages.com.ua и вставляем скопированный код в верхнее поле. Выбираем «Нормальное сжатие» и жмем на кнопку «Получить код»:

Заменяем содержимое файла shBrushPhp.js на оптимизированный скрипт и не забываем сохранить изменения. На этом с оптимизацией JS-файлов мы закончили. Движемся дальше.

Оптимизация CSS

Подошла очередь «поиздеваться» над файлом shCore.css. Открываем файл и удаляем все комментарии разработчиков из верхней части.

Далее нам надо изменить путь до служебных картинок, которые мы позаимствовали у плагина SyntaxHighlighter. Ищем такие три строчки:

Ссылка на основную публикацию