Рейтинг@Mail.ru
Евгений Попов раскрывает Все технические моменты онлайн-бизнеса в видеоформате 2011.
02.12.2011 – 03:08 | Нет комментариев

Вышел новый обучающий видеокурс от Евгения Попова - “Все технические моменты онлайн-бизнеса в видеоформате 2011”. Здесь есть ВСЕ!

Читать запись полностью »
Бесплатное

курсы ,тренинги ,уроки ,советы новичкам

SEO

Поисковая оптимизация , раскрутка и продвижение

О разном

Прикольное , любопытное , интересное , полезное.

Сервисы

Онлайн инструменты. Веб сервисы

Wordpress

Полезные плагины, хаки, советы

Главная » Wordpress

Как красиво вставить программный код в WordPress. Подсветка синтаксиса.

Опубликовал в 04.03.2012 – 00:50Комментариев 4

Crayon syntaxhighlighter3 Как правильно вставить программный код в статью. Как красиво подсветить синтаксис вставленного кода. WordPress плагин Crayon SyntaxHighlighter.

Публикуя статьи в WordPress блоге , иногда сталкиваешься с необходимостью разместить фрагменты кода на разных языках программирования (html,PHP,CSS..)  да так что бы при желании его легко можно было скопировать и вставить, при этом что бы не пострадал его первозданный вид, а следовательно и работоспособность .

Просто так вставить программный код в тексте статьи не получится. Все дело в том что WordPress корежит код, пытаясь его “отредактировать” по своему.

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

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

Как же легко и красиво вставить программный код в виде текста в WordPress блоге , подсветить и сохранить его работоспособность при копировании ? Об этом говориться в этой статье.

Для вставки кода в WordPress существует множество плагинов. По запросу SyntaxHighLigter в хранилище плагинов WordPress нашлось более 30 вариантов.

Наиболее популярные : SyntaxHighlighter Evolved, WP SyntaxHighlighter, СodeСolorer

Я испробовал несколько подобных плагинов и в результате остановился на Crayon SyntaxHighligter . Не потому что он лучше всех ( я не все пробовал :) , возможно есть лучше) , а просто потому что после установки он сразу нормально заработал, в отличие от других , не пришлось ковыряться в коде и дружить его с другими уже установленными плагинами.

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

 

Подробнее о WordPress плагине Crayon SyntaxHighligter

Crayon Syntax High Ligter описание Автор плагина Арам Кочарян (Aram Kocharyan)

:!: Для работы плагина требуется WordPress не ниже версии 3.0.

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

Ниже внешний вид окна с фрагментом CSS файла и подсвеченным синтаксисом.pic08

Плагин создан на PHP и jQuery поэтому работает довольно шустро. Он вполне удовлетворяет моим требованиям, прост в установке и настройке, вставляемые с его помощью блоки кода неплохо смотрятся в статьях и остаются работоспособными при копировании и вставке.

 

Как установить Crayon SyntaxHighligter

Первым делом плагин нужно, конечно же, скачать.

Скачать его можно прямо с сайта автора, или из хранилища плагинов для WordPress. Есть также русифицированная версия плагина на сайте minimusa (автор русского перевода).

Плагин устанавливается без каких либо особенностей, л юбым удобным для вас способом. Например закачав с помощью FTP-менеджера папку syntaxhighlighter из скачанного архива на сервер в папку с плагинами /WP-content/Plugins/ , либо из админ панели блога, как это делаю я ;-)

После установки переходим раздел не активированных плагинов («Inactive») Находим Crayon SyntaxHighligter и активируем его.

02_20120301_thumb8[6] Теперь у нас есть установленный и активированный плагин Crayon SyntaxHighLlighter. 05_20120301_thumb[5]

В панели “ПАРАМЕТРЫ” (слева) появился новый раздел Crayon – в нем находятся настройки плагина.

Заходим в него и приступаем к настройке.

 

 

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

Ниже перечислены некоторые возможности и настройки плагина .

  • Можно выбрать одну из четырех тем подсветки синтаксиса .
тема Classic

тема Classic

тема Epicgeeks

тема Epicgeeks

тема Neon

тема Neon

тема Twilight

тема Twilight

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Можно настроить размеры окна, отступы, цвета, шрифт (8 шрифтов на выбор)
  • Есть предпросмотр настроек окна без перезагрузки страницы, что очень удобно. Для этого нужно поставить птичку слева от “Разрешить показ примера”. Ниже выбор шрифта и его размер.

pic09

  • Пользователь может отключить “разукрашивание” и посмотреть просто черно-белый программный код в этом же окне, или в новом, а также скопировать весь текст в буфер, нажав одну кнопку.

 

Верхняя панель окна с кодом

008_ 2012-03-02

Элементы верхней панели окна

 

1. Нумерация строк (вкл./выкл.)

2. Скопировать текст в буфер.

3. Открыть код в новом окне . Полезно для больших фрагментов программного кода.

4. Подсветка синтаксиса кода (вкл./выкл.)

5. Язык программирования Можно показывать и прятать верхнюю панель. Она может быть спрятанной и всплывать при наведении курсора мышки.

  • Разрешить копирование/вставку кода. Скопированный код вставляется в неизменном виде. Копировать можно выделив часть, или весь код мышкой. Можно также нажав одну кнопку в панели инструментов выделить и скопировать в буфер обмена весь код в окне.
  • Включать и отключать нумерацию строк . Настроить нумерацию строк с нужной цифры.
  • Вставлять в одном блоке фрагменты кода на нескольких языках программирования . Команды каждого языка будут корректно подсвечены.
  • Использовать упрощенные мини теги (шорткоды) для вставки кода в тексте статьи.
  • Использовать HTML теги разметки <pre> <code> ...... </code> </pre>
  • Выделять (подсвечивать другим цветом) указанные строки кода.
  • Вкл./выкл. полосы прокрутки текста в высоту и ширину. Полосы появляются при наведении мышки.
  • Можно указать свой заголовок для окна с кодом
  • Название распознанного языка программирования отображается в правом верхнем углу окна
  • Код можно подставлять из локального файла и даже из URL. Удобная возможность сохранить работоспособность кода в статье после различных обновлений сайта.
  • По расширению файла определяется язык программирования и соответственно его подсветка. Можно вставить в одно окно код из разных файлов и все они будут корректно подсвечены в едином окне.

Список поддерживаемых языков программирования и расширений файлов

(настройки плагина – раздел “языки”)

002_ 2012-03-03

Список поддерживаемых языков программирования и расширений файлов

 

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

Это только основные возможности плагина. Более подробно можно ознакомиться на сайте разработчика.

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

 

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

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

В самом простом случае можно прописать следующую строку:

[сrayon] здесь находится вставляемый в статью программный код [/сrayon]

(синим цветом выделены шорткоды):

[рhр]ваш PHP код для размещения в статье [/рhр]

[сss]ваш CSS код[/сss]

:!: Кроме того можно вставлять в окне простой текст используя шорткод plain

[рlain] это просто текст[/рlain]

Для более продвинутой вставки кода используем такой формат строки с атрибутами:

[сrayon атрибут=”значение” атрибут=”значение”]здесь вставляем код[/сrayon]

С помощью атрибутов можно гибко управлять возможностями плагина.

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

Переводчик я начинающий, так что не судите строго ;) .


Перечень основных атрибутов плагина Crayon SyntaxHighlighter

Атрибут Описание Пример
lang Выбранное название языка программирования из списка. Список поддерживаемых языков находится в панели настроек плагина в разделе «Языки» («Languages»). См. таблицу lang="java"
url Загрузить локальный файл , или файл из интернета. Указываем относительный короткий локальный путь вместо абсолютного полного пути к файлу. Можно использовать закрывающий тег в значении для атрибута url: [сrayon url="java/code.java" /]. Плагин по расширению файла определяет язык программирования. Поэтому указав путь к файлу с поддерживаемым расширением, атрибут lang указывать не обязательно. (поддерживаемые расширения смотри в в панели настроек плагина в разделе «Языки» («Languages»)См. таблицу url="http://example.com/code.java" url="java/code.java"
title Текст заголовка окна с кодом. Появится в панели инструментов окна. title="Sample"
mark Выделение цветом важных строк кода .Можно выделить одну строку, или диапазон строк(через тире), или перечисленные через запятую строки. mark="5-10,12"

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

1
2
3
4
.post img {
vertical-align: middle !important; /* вертикальное выравнивание */
border: none; /*рамку не отображать*/
}

Для этого окна действуют общие настройки плагина Crayon SyntaxHighligter заданные в панели настроек. :!: Можно задать индивидуальные настройки для каждого окна с кодом . Для этого используем дополнительные параметры.

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

Некоторые возможности продемонстрированы в примерах ниже.

Пример:

Тот же блок кода в окне с индивидуальным настройками:

[сrаyon lang="css" font-size="12" title=" Пример индивидуальных настроек окна с кодом" mark="2,3" width="550px" toolbar="always" nums-toggle="true]

Пример индивидуальных настроек окна с кодом
CSS
1
2
3
4
.post img {
vertical-align: middle !important; /* вертикальное выравнивание */
border: none; /*рамку не отображать*/
}

Еще один пример индивидуальных настроек окна с кодом. В этом примере код подгружается из локального файла http://infodrug.ru/wp-content/uploads/CODE/fullscreen.html .

Путь к файлу указан относительный.
[сrayоn title="Пример окна с кодом. Код загружен из файла " font-size="12" font="tahoma" mark="3-8,15,16" width="530px" height="200px" toolbar="always" url="wp-content/uploads/CODE/fullscreen.html"]

Пример окна с кодом. Код загружен из файла
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
    <title>Flash Media Player</title>
    
    
    <script type="text/javascript" src="ufo.js"></script>
</head>
<body style="margin:0; padding: 0;">
<div id="player"></div>
<script type="text/javascript">
    var FO = {     movie:"flvplayer.swf",width:"100%",height:"100%",majorversion:"7",build:"0",bgcolor:"#FFFFFF",flashvars:"fullscreenmode=true&showfsbutton=true&autostart=true" };
    UFO.create(FO, "player");
</script>
    
</body>
</html>

Я специально не стал сокращать путь к загружаемому файлу, для наглядности примера. В общих настройках плагина сейчас прописано так:

Настройка относительного пути Crayon

В дальнейшем, сюда можно дописать: wp-content/uploads/CODE/ , тогда в параметре URL можно будет указывать просто имя файла с расширением.

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

Основные параметры представлены в следующей таблице. Их тут более чем достаточно 8O

Основные параметры настройки плагина

Параметр Допустимое значение Описание
theme string ID используемой темы оформления
font string ID используемого шрифта
font-size number > 0 Размер шрифта в px(пикселах) по умолчанию
min-height/max-height number > 0 followed by px/% Минимальная/максимальная высота блока в px(пикселах) или %
Height number > 0 followed by px/% Высота в px(пикселах) или %
min-width/max-width number > 0 followed by px/% Минимальная/максимальная ширина блока в px(пикселах) или %
width number > 0 followed by px/% Ширина в px(пикселах) или %
toolbar true/false/”always” Показывать или скрывать панель инструментов. “always” показывать всегда (даже когда курсор не наведен )
top-margin number >= 0 Верхний отступ в px(пикселах)
bottom-margin number >= 0 Нижний отступ в px(пикселах)
left-margin number >= 0 Отступ слева в px(пикселах)
right-margin number >= 0 Отступ справа в px(пикселах)
h-align “none/left/right/center” Горизонтальное выравнивание
float-enable true/false Разрешить плавающие элементы в окружении Crayon
toolbar-overlay true/false Использовать наложение панели инструментов на строки кода без смещения кодов вниз , если возможно.
toolbar-hide true/false Показывать панель инструментов по одиночному клику, если она накладывается на строки кода
toolbar-delay true/false Задержка затухания панели инструментов после ухода курсора мыши за пределы блока
show-title true/false Отображать заголовок, если указан
show-lang “found/always/never” В каких случаях показывать язык програмного кода (если определен/всегда/никогда)
striped true/false Показывать код на полосатом фоне
marking true/false Разрешить выделение цветом строк кода
nums true/false Показывать номера строк по умолчанию
nums-toggle true/false Разрешить переключение нумерации строк
plain true/false Разрешить показ кода в виде обычного текста. В случае запрета также будет запрещено переключение подсвеченного текст в обычный и копирование/вставка в режиме обычного текста.
plain-toggle true/false Разрешить переключение в режим обычного текста
show-plain-default true/false Отображать по умолчанию обычный текст вместо подсвеченного
copy true/false Разрешить копирование / вставку кода
popup true/false Разрешить открытие кода в новом окне
scroll true/false Показывать полосу прокрутки даже когда курсор не наведен.
tab-size number >= 0 Размер табуляции в пробелах
trim-whitespace true/false Убирать начальные и конечные пробелы в коде
mixed true/false Разрешить смешанную подсветку (когда используется несколько языков программирования в строках кода )
show_mixed true/false Показывать символ «+» в панели инструментов если используется подсветка смешанного кода.
start-line number >= 0 С какого номера начинается нумерация строк
fallback-lang string ID языка программирования, если он не определился автоматически (не поддерживается).
local-path string Путь к локальный папке на сайте, в которой хранятся файлы (для загрузки кода из файлов)
touchscreen true/false Запретить распознавание жестов мышью для сенсорных экранов (например, наведение курсора)
disable-anim true/false Запретить анимацию
runtime true/false Запретить статистику выполнения
error-log true/false Журнал ошибок для индивидуальных настроек Crayons
error-log-sys true/false Журнал ошибок для системно-независимых ошибок
error-msg-show true/false Разрешить показ сообщения при возникновении ошибки
error-msg string Текст сообщения, которое будет показано при возникновении ошибки
mixed true/false Разрешить использование смешанных языков программирования с использованием разделителей и тегов.

Заключение

Вот мы, наконец то, и познакомились с замечательным WordPress плагином Crayon Syntaxhighlighter. Теперь если у вас возникнет жгучее желание разместить в своем блоге фрагмент программного кода, или просто форматированный текст в окошке, вы будете знать как удовлетворить ваше желание :)

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

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

С уважением автор – Анатолий Климовский

До новых встреч .

——————————————————————————————————————————–

Решено успешно

Читайте также:


Комментариев 4 »

  • Отличный плагин! Похоже, мои мучения с плагинами для подсветки синтаксиса прекратились. В последней статье код выводится прекрасно. осталось в ранних его подправить.

    • InfoDrug InfoDrug:

      Рад что пригодилось. Я и сам не с первой попытки подобрал плагин подсветки синтаксиса. Перепробовал несколько и остановился на этом.

  • hen:

    Плагин Crayon Syntaxhighlighter стал конфликтовать со скриптом добавления ссылки на источник материала при копировании. То есть просто невозможно стало скопировать код оформленный с помощью Crayon Syntaxhighlighter.

  • Благодарю Вас за идею применения и за отличнейший пост. Auto SyntaxHighlighter vs Crayon Syntaxhighlighter, как небо и земля по функционалу и опциям.

    Удачи Вам и творческих успехов.

Оставьте комментарий

Добавьте комментарий ниже или обратную ссылку со своего сайта. Вы можете также подписаться на эти комментарии по RSS.

Вы можете использовать коды HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

На сайте используются Gravatar. Чтобы его получить зарегистрируйтесь Gravatar.

Подписаться, не комментируя