WP-Syntax: красивая подсветка кода на страницах блога WordPress

Плагин Wp-Syntax устанавливается на блог, если нужна подсветка кода PHP либо любого другого на страницах блога под управлением CMS WordPress.

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

Подсветка кода нужна для того, чтобы акцентировать внимание на важных местах заметки. Почему нужно устанавливать плагин, ведь можно выводить код в тексте простым текстом, а выделить код подчеркивание, цветом, оформить как цитату в визуальном редакторе WordPress. Но тогда какой-то элемент кода, к примеру этот «<?php», может некорректно отобразиться в статье подобным образом «&lt;?php». Он становиться не работоспособным, написанная статья не отвечает на вопрос посетителя, а ведь этого требуется поисковыми системами от наших ресурсов.

Установка плагина WP-Syntax для подсветки кода в статьях блога

Плагин доступен к скачиванию на странице http://wordpress.org/extend/plugins/wp-syntax/

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

Как настраивается подсветка кода в статьях?

Напишите статью, опубликуйте или запланируйте его ее на блоге. В текстовом редакторе NotePad++ оформите тот код, который Вы желаете вставить в какое-то место заметки. При необходимости разбейте его на строки.

Откройте в заметку в режиме «Текст». Окружите его тегами <pre> ...</pre>. Сохраните изменения. Чтобы более наглядно оформить код между тегами используется несколько атрибутов, которые прописываются таким образом.

<pre lang="LANGUAGE" escaped="true" line="1" highlight="3">Код для подсветки</pre>

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

abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit,
avisynth, bash, bf, bibtex, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cil, cfdg, cfm, cmake,
cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, fortran,
freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno,
intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas,
lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2,
objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php,
plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots,
ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript,
vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp,  z80

Если Вы пишите о Joomla, WordPress, DLE, чаще всего будете использовать такие обозначения языка:

• php — код написан на языке программирования php (Personal Home Page Tools или Инструменты для создания персональных веб-страниц)
• css — язык стилей, который определяет отображение интернет-страниц.
• perl — высокоуровневый интерпретируемый динамический язык программирования общего назначения

escaped="true" — защитит от ошибочного вывода кода в тексте страницы. Его я советую использовать всегда.

line="1" — выполняется вывод строк кода с указанием их номеров, начиная с единицы. Полезно в том случае, когда Вы в статье размещаете несколько блоков с подсвеченным кодом, или он очень длинный. Читателям необходимо в таком случае его выделять таким образом, чтобы не скопировать номера, или после вставки его в документ аккуратно очистить.

highlight="3" — выполняется выделение строки, в моем случае третьей, в подсвеченном коде.

Пример работы выделения кода в статье на примере активации вывода «хлебных крошек» на блоге под управлением wordpress.

Плагин WP-Syntax работает правильно:

1
2
3
4
5
6
7
8
9
10

<!--хлебные крошки-->
 <div>
 <?php
 if(function_exists('bcn_display'))
 {
 bcn_display();
 }
 ?>
 </div>
<!--конец хлебные крошки-->

Плагин WP-Syntax работает не правильно:

<!--хлебные крошки-->
 <div>
 <?php
 if(function_exists('bcn_display'))
 {
 bcn_display();
 }
 ?>
 </div>
<!--конец хлебные крошки-->

Чтобы на первых порах не допустить не корректного подсвечивания кода после сохранения статьи, вычитайте её, перед этим очистите кэш браузера и кэш самого блога. Чаще всего ошибки возникают из-за неиспользования атрибута escaped="true". В последней версии плагина WP-Syntax автор исправил ошибку со сбрасыванием атрибутов тега <pre> после пересохранения отредактированной записи.

Установка плагина WP-Syntax button и для чего он нужен Вам

Плагин WP-Syntax button доступен к скачиванию по адресу http://wordpress.org/plugins/wp-syntax-button/. Он работает в связке с уже описанным плагином WP-Syntax. После его активации на панели визуального редактора создаётся кнопка «code»(1).  Она вызывает панель, с помощью которой формируется контейнер <pre>...</pre>: выбираю название языка программирования из выпадающего списка(2) и проставляю номер первой строки(3). После нажатия кнопки(4) в тексте записи создается контейнер. Его вы увидите, когда перейдете во вкладку «Текст» редактора wordpress. И только тогда Вы можете вставить между контейнерами код, который должен в записи быть подсвеченным.

Если оставить пустым поле ввода(3), тегу <pre> не присваивается атрибут line, если ввести цифру 2 или 3 и так далее, то числовая нумерация строк кода будет начитаться с второго номера или с третьего.

seomans.ru благодарит за Ваше внимание.