Плагин WordPress для отображения кода на страницах

Январь 17, 2012   Александр Маврин   4 комментария

Привет друзьям, коллегам и прохожим. Когда-то давно я задался вопросом, как отобразить на страницах блога HTML код. Мне нужно было что-то показывать читателям. Что именно, сейчас уже не помню. Но если просто писать код на странице, то после сохранения топика его просто не будет видно. Ведь браузеры не отображают HTML код. И, как видимо не я один думал об этом, но и разработчики тоже не дремали и написали специальный плагин, с помощью которого как раз и можно отображать на страницах любой код.

Плагин называется WP-Sintax. Это простой плагин без подсветки кода, но с нумерацией строк. Все содержимое кода заключается в специальный блок с рамкой. Для того, чтобы вывести на странице содержимое какого-либо кода, нужно переключить редактор в режим HTML и написать специальный код, в который и поместить содержимое.

Вот пример:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Все это содержимое заключается в блок pre и пишется так: угловая скобка pre lang=кавычкиLANGUAGEкавычки угловая скобка закрыта.Сюда вставляем код. угловая скобка pre угловая скобка закрыта.

По умолчанию фон блока белый и рамка серая в 1px. Но цвет фона можно поменять на тот, который вам нравится. Для этого нужно зайти в Плагины, найти WP-Sintax и нажать «Изменить». Открыть на редактирование файл wp-syntax/wp-syntax.css и третья строчка сверху это и есть фон блока. Я поставил так:

background-color: #ffc;

Такие блоки можно использовать не только для вставки кода, но и для различных заметок на страницах. А для того, чтобы отобразить номера строк, нужно после pre написать

lang="LANGUAGE" line="1">

Вместо единицы может быть номер строки, с которой начинается код.
И получится вот так:

1
2
3
4
5
6
7
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Чтобы отображать большие куски кода на страницах, будет удобно установить спойлер для сайта.

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо


4 комментария
  1. Нужная и полезная информация. Спасибо!

  2. Доходчиво! Побольше бы такого материала.

  3. Венедикт:

    Очень хороший блог жена с удовольствием просматривает!

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

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