Блоговод | Подсветка кодов в блоге. Crayon Syntax Highlighter

Подсветка кодов в блоге. Crayon Syntax Highlighter

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

Итак! Представляю довольно свежий плагин подсветки синтаксиса кода написанный Арамом Кочеряном (Aram Kocharyan) .

Возможности

Плагин написан на PHP и, в отличии от других подобных плагинов, весьма “лёгок” и быстр.

На сегодняшний день плагин понимает 14 языков программирования и имеет возможности для увеличения числа оных как силами самого Арама, так и силами сторонних программистов. Для этого необходимо добавить соответствующий файл описания синтаксиса языка на базе прилагаемого шаблона и поместить его в папку langs – плагин сам его обнаружит и добавит в перечень распознаваемых языков. Очень радует то, что это единственный плагин, из известных мне плагинов, который правильно интерпретирует смешанные языки (например HTML в PHP или Javascript в HTML).

Плагин имеет несколько цветовых тем отображения кодов. Существующие меня вполне устраивают, но при желании всегда можно добавить свою и это предусмотрено в плагине.

Подсветка кода задаётся тегами коротких кодов crayon, с указанием языка программирования или тегами коротких кодов соответствующего языка (например php). Кроме того!!! Текст кода может быть взят из файла расположенного на сервере. Меня уже достало то, что частенько при обновлении WordPress мои коды корёжатся или вовсе исчезают. Грузить коды из файлов – отличный выход из этой неприятной ситуации.

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

Локализация

Плагин русифицирован и это заслуга Вашего покорного слуги. К сожалению автор плагина изменил мои файлы локализации и кое-что пошло не так. Видимо Арам не в курсе количества plurals (форм множественного числа) в русском языке и тем более не в курсе правил определения этих самых plurals. Кроме того, оригинал плагина предполагает локализацию только административной части плагина, локализация кнопок блока подсвеченного кода не предусмотрена (пока). Для тех кого такое положение дел с локализацией этого замечательного плагина не устраивает, предлагаю скачать либо мои оригинальные файлы локализации плагина (положить в папку trans), либо модифицированный плагин с локализацией Face View (страницы пользовательского просмотра).

Файлы локализации Crayon 1.7.17 (10,4 КиБ, 1 020 скачиваний)
Оригинальные файлы локализации (ru) для Crayon Syntax Highlighter 1.7.17

Crayon Syntax Highlighter 1.7.17 модифицированный (566,3 КиБ, 1 144 скачиваний)
Модифицированная версия Crayon Syntax Highlighter 1.7.17

Модификация небольшая, нет нужды скачивать весь модифицированный плагин – Вы сами можете внести изменения в свою копию плагина. Достаточно внести несколько (5) изменений в файл crayon_formatter.class.php.

				$plain_style = "-moz-tab-size:$tab; -o-tab-size:$tab; -webkit-tab-size:$tab; tab-size:$tab;";
				$readonly = $touch ? '' : 'readonly';
				$print_plain = $print_plain_button = '';
				$print_plain = '<textarea class="crayon-plain" settings="' . $plain_settings . '" '. $readonly .'  wrap="off" style="' . $plain_style .'">' . self::clean_code($hl->code()) . '</textarea>';
				$print_plain_button = $hl->setting_val(CrayonSettings::PLAIN_TOGGLE) ? '<a class="crayon-plain-button crayon-button" title="Toggle Plain Code"></a>' : '';
				$print_copy_button = !$touch && $hl->setting_val(CrayonSettings::PLAIN) && $hl->setting_val(CrayonSettings::COPY) ?
					'<a class="crayon-copy-button crayon-button" title="Copy Plain Code"></a>' : '';
			} else {
				$print_plain = $plain_settings = $print_plain_button = $print_copy_button = '';
			}
			
			$print_popup_button = $hl->setting_val(CrayonSettings::POPUP) ?
				'<a class="crayon-popup-button crayon-button" title="Open Code in Window" onclick="return false;"></a>' : '';
			
			if ($hl->setting_val(CrayonSettings::NUMS_TOGGLE)) {
				$print_nums_button = '<a class="crayon-nums-button crayon-button" title="Toggle Line Numbers"></a>';
			} else {
				$print_nums_button = '';
			}
			/*	The table is rendered invisible by CSS and enabled with JS when asked to. If JS
			 is not enabled or fails, the toolbar won't work so there is no point to display it. */

			$print_plus = $hl->is_mixed() && $hl->setting_val(CrayonSettings::SHOW_MIXED) ? '<span class="crayon-mixed-highlight" title="Contains Mixed Languages"></span>' : '';
			$buttons = $print_plus.$print_nums_button.$print_copy_button.$print_popup_button.$print_plain_button.$print_lang;
			$button_preload = '';
			foreach (array('nums', 'copy', 'popup', 'plain') as $name) {
				$button_preload .= '<a class="crayon-'.$name.'-button crayon-button crayon-pressed crayon-invisible"></a>';
			}

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

$plain_style = "-moz-tab-size:$tab; -o-tab-size:$tab; -webkit-tab-size:$tab; tab-size:$tab;";

$readonly = $touch ? '' : 'readonly';

$print_plain = $print_plain_button = '';

$print_plain = '<textarea class="crayon-plain" settings="' . $plain_settings . '" '. $readonly .' wrap="off" style="' . $plain_style .'">' . self::clean_code($hl->code()) . '</textarea>';

$print_plain_button = $hl->setting_val(CrayonSettings::PLAIN_TOGGLE) ? '<a class="crayon-plain-button crayon-button" title="Toggle Plain Code"></a>' : '';

$print_copy_button = !$touch && $hl->setting_val(CrayonSettings::PLAIN) && $hl->setting_val(CrayonSettings::COPY) ?

'<a class="crayon-copy-button crayon-button" title="Copy Plain Code"></a>' : '';

} else {

$print_plain = $plain_settings = $print_plain_button = $print_copy_button = '';

}

$print_popup_button = $hl->setting_val(CrayonSettings::POPUP) ?

'<a class="crayon-popup-button crayon-button" title="Open Code in Window" onclick="return false;"></a>' : '';

if ($hl->setting_val(CrayonSettings::NUMS_TOGGLE)) {

$print_nums_button = '<a class="crayon-nums-button crayon-button" title="Toggle Line Numbers"></a>';

} else {

$print_nums_button = '';

}

/* The table is rendered invisible by CSS and enabled with JS when asked to. If JS

is not enabled or fails, the toolbar won't work so there is no point to display it. */

$print_plus = $hl->is_mixed() && $hl->setting_val(CrayonSettings::SHOW_MIXED) ? '<span class="crayon-mixed-highlight" title="Contains Mixed Languages"></span>' : '';

$buttons = $print_plus.$print_nums_button.$print_copy_button.$print_popup_button.$print_plain_button.$print_lang;

$button_preload = '';

foreach (array('nums', 'copy', 'popup', 'plain') as $name) {

$button_preload .= '<a class="crayon-'.$name.'-button crayon-button crayon-pressed crayon-invisible"></a>';

}

Модификация (модифицированные строки выделены):

				$plain_style = "-moz-tab-size:$tab; -o-tab-size:$tab; -webkit-tab-size:$tab; tab-size:$tab;";
				$readonly = $touch ? '' : 'readonly';
				$print_plain = $print_plain_button = '';
				$print_plain = '<textarea class="crayon-plain" settings="' . $plain_settings . '" '. $readonly .'  wrap="off" style="' . $plain_style .'">' . self::clean_code($hl->code()) . '</textarea>';
				$print_plain_button = $hl->setting_val(CrayonSettings::PLAIN_TOGGLE) ? '<a class="crayon-plain-button crayon-button" title="'.crayon__('Toggle Plain Code').'"></a>' : '';
				$print_copy_button = !$touch && $hl->setting_val(CrayonSettings::PLAIN) && $hl->setting_val(CrayonSettings::COPY) ?
					'<a class="crayon-copy-button crayon-button" title="'.crayon__('Copy Plain Code').'"></a>' : '';
			} else {
				$print_plain = $plain_settings = $print_plain_button = $print_copy_button = '';
			}
			
			$print_popup_button = $hl->setting_val(CrayonSettings::POPUP) ?
				'<a class="crayon-popup-button crayon-button" title="'.crayon__('Open Code in Window').'" onclick="return false;"></a>' : '';
			
			if ($hl->setting_val(CrayonSettings::NUMS_TOGGLE)) {
				$print_nums_button = '<a class="crayon-nums-button crayon-button" title="'.crayon__('Toggle Line Numbers').'"></a>';
			} else {
				$print_nums_button = '';
			}
			/*	The table is rendered invisible by CSS and enabled with JS when asked to. If JS
			 is not enabled or fails, the toolbar won't work so there is no point to display it. */

			$print_plus = $hl->is_mixed() && $hl->setting_val(CrayonSettings::SHOW_MIXED) ? '<span class="crayon-mixed-highlight" title="'.crayon__('Contains Mixed Languages').'"></span>' : '';
			$buttons = $print_plus.$print_nums_button.$print_copy_button.$print_popup_button.$print_plain_button.$print_lang;
			$button_preload = '';
			foreach (array('nums', 'copy', 'popup', 'plain') as $name) {
				$button_preload .= '<a class="crayon-'.$name.'-button crayon-button crayon-pressed crayon-invisible"></a>';
			}

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

$plain_style = "-moz-tab-size:$tab; -o-tab-size:$tab; -webkit-tab-size:$tab; tab-size:$tab;";

$readonly = $touch ? '' : 'readonly';

$print_plain = $print_plain_button = '';

$print_plain = '<textarea class="crayon-plain" settings="' . $plain_settings . '" '. $readonly .' wrap="off" style="' . $plain_style .'">' . self::clean_code($hl->code()) . '</textarea>';

$print_plain_button = $hl->setting_val(CrayonSettings::PLAIN_TOGGLE) ? '<a class="crayon-plain-button crayon-button" title="'.crayon__('Toggle Plain Code').'"></a>' : '';

$print_copy_button = !$touch && $hl->setting_val(CrayonSettings::PLAIN) && $hl->setting_val(CrayonSettings::COPY) ?

'<a class="crayon-copy-button crayon-button" title="'.crayon__('Copy Plain Code').'"></a>' : '';

} else {

$print_plain = $plain_settings = $print_plain_button = $print_copy_button = '';

}

$print_popup_button = $hl->setting_val(CrayonSettings::POPUP) ?

'<a class="crayon-popup-button crayon-button" title="'.crayon__('Open Code in Window').'" onclick="return false;"></a>' : '';

if ($hl->setting_val(CrayonSettings::NUMS_TOGGLE)) {

$print_nums_button = '<a class="crayon-nums-button crayon-button" title="'.crayon__('Toggle Line Numbers').'"></a>';

} else {

$print_nums_button = '';

}

/* The table is rendered invisible by CSS and enabled with JS when asked to. If JS

is not enabled or fails, the toolbar won't work so there is no point to display it. */

$print_plus = $hl->is_mixed() && $hl->setting_val(CrayonSettings::SHOW_MIXED) ? '<span class="crayon-mixed-highlight" title="'.crayon__('Contains Mixed Languages').'"></span>' : '';

$buttons = $print_plus.$print_nums_button.$print_copy_button.$print_popup_button.$print_plain_button.$print_lang;

$button_preload = '';

foreach (array('nums', 'copy', 'popup', 'plain') as $name) {

$button_preload .= '<a class="crayon-'.$name.'-button crayon-button crayon-pressed crayon-invisible"></a>';

}

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

Удачи!

Похожие статьи:

18.01.2012 / Плагины / Метки: Wordpress, плагин, подсветка кодов

Поделитесь статьёй

Об авторе

minimus

Lead Frontend Developer (ReactJS, NodeJS)

[title element="h4"] Комментарии (26) [/title]

igbur – 22.01.2012 - 11:32:

ответ

Не зря зашел. Как раз искал для своего блога. Спасибо за полезный пост.

Давно Вы уже не писали в блог, где пропадали?

P.s. в форуме некоторые слова отображаются знаками вопросов, вот к примеру:

WordPress ?????? Special Text Boxes

??? ??????? ????????? ? ???????? Special Text Boxes
- minimus – 22.01.2012 - 20:35:
  
  ответ
  
  Плотно занимался плагинами Simple Ads Manager и Special Text Boxes. А форум слегка сломался после переезда на новый хостинг, надо заняться …
  - igbur – 22.01.2012 - 21:33:
    
    ответ
    
    Дайте рефку на //traffbiz.ru/ хочу зарегистрироваться.
    - igbur – 22.01.2012 - 21:47:
      
      ответ
      
      Извините нашёл. Ловите нового рефа)))
      - minimus – 22.01.2012 - 22:04:
        
        Спасибо! 🙂
        
        igbur – 22.01.2012 - 22:20:
        
        Появился вопрос, вставил код, а счетчик не появляется. Это модерация или что?
        И ещё, его можно как-нибудь закрыть от индексации?
        
        minimus – 22.01.2012 - 22:29:
        
        1. Предлагаемый код PHP записан короткой нотацией <?, WordPress его не запустит. Запишите открывающий тег так: <?php
        2. Лучше всего вставлять как указано в универсальном способе (через файл), а не так как советуют для WordPress.
        
        igbur – 22.01.2012 - 22:29:
        
        Почитал отзывы, как то страшновато за сайт стало, большинство пишет за вирусы и вылет сайта из пс, думаю пока повременю. Я бы посоветовал Вам снять этот счетчик, лучше перестраховаться ИМХО.
        
        Вот цитата:
        Аналогично, поставил на свои сайты счётчик, через неделю обнаружил в панели вебмастера Яндекс и Гугл, что все сайты на которых стоял счётчик помечены как распространяющие вредоносный код и в поиске выводятся с этим предупреждением. Снял счётчики, отправил заявки на перерасмотрение, ждал несколько дней пока предупреждение не сняли. А в самой партнёрке после того как я убрал их счётчик, аккаунт заблокировали
        
        minimus – 22.01.2012 - 22:37:
        
        Снимаю!!!
igbur – 22.01.2012 - 22:51:

ответ

Дайте рефку Adsence. И можно попросить Вас о консультировании при регистрации в Adsence. Не знаю примут ли мой сайт (не этот что в подписи)))
Хотел попробовать в яндекс директ – не берут(( не понимаю чего..
- minimus – 22.01.2012 - 22:56:
  
  ответ
  
  В AdSense не бывает реф. ссылок. Берут любые сайты, с любым траффиком. Один аккаунт на все сайты. Для регистрации нужен ящик на gmail и всё …
  - minimus – 22.01.2012 - 23:00:
    
    ответ
    
    Если хотите стать моим рефом – вот хорошая вещь: Wap-Trafik.ru, если Ваш сайт не работает с мобильными устройствами. Сервис выкупает мобильный траффик. Реф. ссылка: //wap-trafik.ru/?ref=138
  - igbur – 22.01.2012 - 23:01:
    
    ответ
    
    Оч жаль((
    P.s. Но где-нибудь я всё же стану Вашим рефом. Извините за беспокойство и этот спам…
    
    Да о плагине я и забыл, оч. понравился, установил все в норме. Спасибо.
Ник – 04.06.2013 - 11:36:

ответ

Автору Респект!!! Молодец!!! Спасибо!!!
Алексей – 24.07.2013 - 15:02:

ответ

Плагин – супер! Установил себе на блог. Спасибо за статью!
Сергей – 29.11.2016 - 12:20:

ответ

Все говорят о нумерации строк. А как ее включить?
- minimus – 29.11.2016 - 13:04:
  
  ответ
  
  Параметры плагина -> Display line numbers by default
Даниил – 28.02.2017 - 16:55:

ответ

Добрый день! Установил этот плагин, но подсветка не появилась. Не знаете в чем может быть дело?
- minimus – 28.02.2017 - 21:20:
  
  ответ
  
  А Вы коды, которые нужно подсвечивать, вставляли?
  - minimus – 28.02.2017 - 21:22:
    
    ответ
    
    Автоматом подсветятся только коды обёрнутые в тег pre…
Даниил – 28.02.2017 - 22:23:

ответ

Я понял. Спасибо. А нельзя ли настроить таким образом чтобы подсвечивалось автоматически без тегов? Как например если в Notepad++ подсветить код.
- minimus – 28.02.2017 - 22:26:
  
  ответ
  
  Нет, так нельзя…