Подсветка кода в статьях

код

Здравствуйте, читатели блога WPnotes.ru. Сегодня я бы хотел рассказать о неплохом плагине для подсветки кода в статьях — SyntaxHighlighter Evolved. 

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

Если кто-то не понял о какой подсветке кода идет речь, то приведу сразу пример для наглядного отображения. Можно вставлять код просто, при помощи функции copy/paste. В данном случае html пример:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Image</title>
<style>
img {
border: 3px solid;
}
</style>
</head>
<body>
<p><img src=»images/figure.jpg» alt=»Image» width=»100″ height=»100″></p>
</body>
</html>

Другой вариант — выделяем наш код и форматируем.

форматируем текст в WordPress

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image</title>
<style>
img {
border: 3px solid;
}
</style>
</head>
<body>
<p><img src="images/figure.jpg" alt="Image" width="100" height="100"></p>
</body>
</html>

Выглядит немного лучше чем первый вариант? А вот как выводит все тот же пример плагин:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image</title>
<style>
img {
border: 3px solid;
}
</style>
</head>
<body>
<p><img src="images/figure.jpg" alt="Image" width="100" height="100"></p>
</body>
</html>

Установка и настройка плагина SyntaxHighlighter Evolved

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

php

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

  • На ваш выбор 2-я и 3-я версия плагина, об их отличии ниже.
  • 8 различных тем оформления, как светлые, так и темные тона.
  • Отображать или нет номера строк.
  • Панель инструментов при наведении на область с кодом — позволяет скопировать код из всплывающего окна, а также напечатать его. Работает только во 2-й версии плагина.
  • Сделать ли ссылки кликабельными — при наведении мышью на ссылку в коде можно перейти по ней.
  • Сворачивание окна — если вы активируете данный пункт, то для просмотра кода нужно будет развернуть его. Удобно если вы выкладываете большие фрагменты кода.
  • Легкий режим — отсутствие номеров строк и панели с кнопками.
  • Перенос длинных строк, также действует только во 2-й версии плагина — в случае выбора данной настройки длинные строки переносятся и не появляется горизонтальная стока прокрутки.
  • Можно также задать номер строки с которой будет начинаться нумерация и ширину отступа.
  • За изменением настроек можно следить тут же на примере, что очень удобно.

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

На этом я закончу с разбором возможностей данного плагина, увидимся на WPnotes.ru!

Понравилась статья? Поделитесь с друзьями:


 

Навигация по записям

Подсветка кода в статьях: Один комментарий

  1. WPixel

    Предпочитаю wp-SyntaxHighlighter, так как он более продвинут в этом плане. До этого использовал другой но так и не научил его корректно отображать кирилицу 😀

Комментарии запрещены.