Как выделять синтаксически конструкции кода, которые вы демонстрируете на страницах своего сайта, работающего на CMS WordPress.

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

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

Crayon

Во всех современных редакторах кода, есть синтаксическая подсветка.

Под CMS WordPress существуют довольно много бесплатных плагинов, которые синтаксически разделяют код,  в записях и на страницах вашего сайта. Один из наиболее понравившихся мне – это плагин Crayon Syntax Highlighter. Данный плагин грамотно разделяет весь код, отделяя его по смыслу,  соответствующими цветами. Стиль подсветки плагина похож на стилистику редактора “Notepade++”. Благодаря такой разметке посетитель быстро сможет определить, где начало и конец функций, а также где парные теги и свойства стилей CSS.

Crayon Syntax Highlighter

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

Теперь, когда вы пишите статью и и вам нужно привести пример кода, вы вставляете его между парными тегами <pre>….</pre> или <code>…</code>.  А плагин Crayon Syntax Highlighter понимает что это код, и автоматически красиво раскрашивает его.

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

1 Бал2 Бала3  Бала4  Бала5  Балов
loadingЗагрузка...

<<< >>>

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