13 » » Подсветка синтаксиса кода WordPress

Подсветка синтаксиса кода WordPress

crayon-syntax-highlighter

Здравствуйте! В статье познакомлю вас с плагином под названием Crayon Syntax Highlighter для движка WP с помощью которого, можно сделать подсветку синтаксиса любого кода.

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

Для чего делается подсветка синтаксиса кода?

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

Использование движка WordPress хорошее тем, что здесь иметься много различных и очень полезных плагинов, которые легки в настройках и использовании. С их помощью, как один знакомый говорит можно «Вытворять» чудеса и удобства для пользователей ресурса. Благодаря чему ваш сайт будет удобен и привлекателен.

Так вот, и плагин Crayon Syntax Highlighter не исключение, он предназначен для удобства чтения кода в публикации на любом языке программирования.

В репозитории Вордпресс плагинов с подобными функциями больше чем предостаточно, конкретных цифр я не знаю. И все бороться за то, чтобы быть замеченными вебмастерами. Мне приглянулось всего несколько, а именно: SyntaxHighlighter Evolved и Crayon Syntax Highlighter. Благодаря методам проб, для рекомендации читателям упал мой взор на второй.

Плагин Crayon Syntax Highlighter

Все стандартно! Для того, дабы плагин оказался на вашем блоге (ресурсе) в рабочем состоянии и выполнял функции своего предназначения, нужно сначала загрузить и после активировать. И самое приятное, после активации его кнопка для работы с подсветкой синтаксиса кода располагается в зрительном редакторе написания статьи. Смотрите скриншот:

кнопка в редакторе

Этот плагин приглянулся тем, что:

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

Если есть необходимость, что-то настроить или дополнить, то в настройки можно попасть по следующему адресу в админ-панели: «Консоль» — «Настройки» — «Crayon».

настройки плагина для подсветки кода

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

Примеры тем визуального отображения блоков кода.

пример 1

вид оформления 2

Можно шрифт подобрать, метрику отметить и многое другое. Только не забудьте сохранить изменения после их внесения.

Как работать с плагином?

При надобности вставить код в статью нужно нажать на определенные кнопки в редакторе написания. Какие именно кнопки жать смотрите картинку выше.

После нажатия кнопок всплывет специальное окно «Редактора внесения тегов» куда и нужно внести код и отметить его язык.

рабочий редактор кода отображения

На это все. Никаких сложностей, правда? Устанавливайте и пользуйтесь. А также напишите пару слов в комментариях по теме статьи.

С уважением, автор блога ojseo.ru

Совсем плохоПлохоНичего такХорошоСупер (Пока оценок нет)

Загрузка...

13 Комментария

  1. Артём, как всегда, спасибо за статью...Трудился для нашего интереса...Если честно, то я не поняла, зачем он мне нужен, поэтому не стала заморачиваться, а просто честно прочитала всю статью и вот пишу теперь комментарий...Это чисто технические вопросы, а я с ними пока не дружу...Возможно это кому-то и будет интересно...С уважением, Анна.

    • Анна, (:thank_you:)

      Возможно, когда-то и придется столкнуться, будете знать что и где искать.

    • Привет! А каким тогда пользуешься? Если, конечно, пользуешься.

      • На жанный момент я не пользуюсь плагинами для подсветки кодов. Все коды обведены с помощью стилей CSS.Но, недавно прочитал статью на блоге Александра Каратаева, так в ней он посоветовал один очень легкий плагин, который также подсвечивант код, но практически не грузит сайт. Я сейчас не помню как он называется. Вот его я и хочу установить.

  2. Понравился плагин именно из-за кнопки в визуальном редакторе. Я пока пользуюсь wp-syntax, но думаю вообще отказаться от плагинов, благо шаблон настроен пол вывод кода в тегах «pre»

    • Кнопка вписывается очень удобно, это правда. Отказаться даже от SEO плагинов, которые просто необходимы?

  3. Интересно, вот это для моего сайта находка. Как раз думал как такое реализовать, потому что в будущем практически в каждую статью планирую вставлять код. А пока все выглядит dolinacoda.ru/recepty-css-navigacionnye-strelochki-na-chistom-css3

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *