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

Плагин для подсветки кодаЧастенько, для тех кто хотел бы поделиться собственными наработками по оформлению блога на WordPress, возникает необходимость опубликовать в сообщении html-код. Конечно, можно воспользоваться стандартным набором функций редактора WordPress и заключить код в конструкцию <code>код</code>.

Тогда это будет выглядеть примерно так:

h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal;
}
ol, ul {
list-style: none;
}

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

Плагинов для подсветки кода на WordPress достаточно много, некоторые из них я пробовала устанавливать, но остановилась на плагине WP-Syntax. Мне понравилось, что он достаточно функционален, при этом не имеет лишних наворотов, а значит не сильно тормозит загрузку страниц блога. После установки плагина, код, который вы захотите опубликовать в тексте сообщения, будет выглядеть так:

h1, h2, h3, h4, h5, h6 { 
    clear: both; 
    font-weight: normal; 
} 
ol, ul { 
    list-style: none; 
}

Для этого достаточно в режиме «Текст» добавить код между тегами <pre lang=”LANGUAGE”>код</pre>.

Кроме того, можно добавить нумерацию строк:

1
2
3
4
5
6
7
h1, h2, h3, h4, h5, h6 { 
    clear: both; 
    font-weight: normal; 
} 
ol, ul { 
    list-style: none; 
}

В этом случае код заключаем в конструкцию <pre lang=”LANGUAGE” line=”1″>код</pre>.

Так же, можно подсветить определенную строчку:

1
2
3
4
5
6
7
h1, h2, h3, h4, h5, h6 { 
    clear: both;     font-weight: normal; 
} 
ol, ul { 
    list-style: none; 
}

Для этого конструкция будет иметь вид <pre lang=”LANGUAGE” line=”1″ highlight=”2″>код</pre>. В значение highlight установите номер нужной строки, которую необходимо выделить цветом.

Еще есть возможность, в зависимости какой это код, php, css или xml, отображать его как в блокноте Notepad++, что очень удобно для зрительного восприятия. Пример:

1
2
3
4
5
6
7
h1, h2, h3, h4, h5, h6 { 
    clear: both; 
    font-weight: normal; 
} 
ol, ul { 
    list-style: none; 
}

В примере используется код css, поэтому конструкция будет выглядеть так <pre lang=”css” line=”1″>код</pre>.

Основные языки (lang), которые поддерживает плагин: PHP, CSS, XML, JAVA и другие. Весь список можно посмотреть на странице плагина.

Светлана Ковалева

Мастер креатива и нестандартных решений
ВКонтакте Facebook Twitter Одноклассники
Запись опубликована в рубрике Сайтостроение с метками , . Добавьте в закладки постоянную ссылку.
Подпишитесь на обновления блога:

4 комментария: Плагин для подсветки кода на WordPress

  1. Светлана, плагин неплохой, я его пробовал. Но у него есть значительный минус – когда начинаешь редактировать статью, то частенько слетает отображение кода. Особенно если переключаешься между визуальным и текстовым редактором. К тому-же в тексте статьи в админке нет чёткого обозначения границ вставленного кода. Это очень неудобно.
    Поэтому я использую Crayon Syntax Highlighter. Он, конечно-же потяжелее, но на самом деле не сильно влияет на загрузку страниц. Удобство его использования перекрывает всё.

    • Я, Александр, редко пользуюсь визуальным редактором, поэтому для меня это не проблема. Хотя, возможно для многих это неудобно. Каждый подбирает плагины под себя. Отлично, что вы нашли тот, который удовлетворил ваши потребности!

    • Егор говорит:

      Crayon Syntax Highlighter я недавно удалил. Он выводит в header аж 3 своих скрипта. И еще, посмотрите на исходный код страницы после него.
      А так, отличный плагин.

    • Ничего страшного не происходит. Чем так напугал исходный код страницы? Какая разница – этот ли код там вставлен или другой?
      Для меня удобство использования перевесило все остальные факторы. Страницы кешируются, отдаются из кеша быстро, так, что это не основание отказываться от удобств.

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