TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как показать код в контенте сайта под управлением CMS WordPress – SyntaxHighlighter Evolved

1 295

Вам необходимо отобразить код в контенте WordPress? Сайт на WordPress устроен таким образом что по умолчанию отфильтрует любой необработанный код, добавленный в записи, страницы, виджеты или комментарии в блогах. В этой статье я расскажу, как легко отображать код скажем так “в чистом виде” на сайте под управлением CMS WordPress.

Содержимое:

  1. Краткое описание SyntaxHighlighter Evolved
  2. Настройки плагина
  3. Добавление PHP кода
  4. Добавление CSS кода
  5. Как показать код в WordPress не используя плагины
  6. Возможные проблемы и их решения связанные с палгином

Для того чтобы осуществить это Вам на помощь придет плагин из репозитория WordPress — Syntax Highlighter Evolved . Для получения дополнительной информации пошаговое руководство по установке плагина WordPress .

SyntaxHighlighter Evolved — данный помощник позволит Вам отобразить выделенный код в статье, странице или же виджите без потери форматирования или внесения каких-либо изменений вручную. Плагин использует пакет JavaScript SyntaxHighlighter от Alex Gorbatchev. Для демонстрации в реальном времени см. Домашнюю страницу этого плагина.

Список поддерживаемых языков (поддерживаются наиболее широко используемые языки), см. Документ поддержки WordPress.com .

После того как плагин был установлен и активирован Вам необходимо перейти в Настройки » Syntax Highlighter, для того что бы применить настройки палгина.

Как показать код в контенте сайта под управлением CMS WordPress - SyntaxHighlighter Evolved

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

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

Синтаксис Highlighter Evolved использует шорт коды для красивого отображения Вашего кода.

Каким образом у плагина получается справляться с своими задачами? Все дело в том что Вам нужно обернуть каждый язык программирования в свои шорт коды (соответственно для каждого языка свой шорт код, или же воспользеваться универсальными шорткодами

).

Для PHP оберните свой код следующим образом:

[php]

<?php

echo «Привет народ! :)»;

?>

[/ php]

Он отобразится в записи вот в таком виде:

Что бы отобразить CSS оберните стили шорткодами и :
[css]

input {

font-family: inherit

}

body {

background-color: white;

color: black;

font: normal 13px arial,sans-serif;

margin: 0

}

[/ css]

На сайте обернутый код будет выглядеть так:

input { font-family: inherit } body { background-color: white; color: black; font: normal 13px arial,sans-serif; margin: 0 }

Синтаксис Highlighter автоматически выводит код для конкретного языка. Плагин автоматически добавит номера строк и правильно отметит вкладку.

Приятным дополнением данного плагина является возможность копирования Вами вставленного кода, посетителями.

Как показать код в WordPress не используя плагины?

Многие блогеры не запускают блоги посвящённые веб разработке, поэтому им не нужно добавлять фрагменты кода в свои сообщения. В редких случаях вы можете добавить код путем кодирования кода в объекты HTML. Как этот фрагмент:

Проблема с преобразованием кода в объекты HTML заключается в том, что это трудно сделать вручную. Вы можете использовать онлайн-инструменты, подобные этому , для преобразования кода в объекты HTML.

Преобразуя PHP, HTML, JavaScript-код в объекты HTML, вы можете вставлять их в свои сообщения WordPress. Для дополнительных языков вы можете обернуть код между тегами и </ code>.

Если Ваш код просто отображается как raw. Но не преобразуется в поле кода или что-то еще. Убедитесь, что footer.php файле вашей темы находится строка

где-то внутри него, иначе плагин не сможет полноценно работать.

Источник записи: https://mediadoma.com

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