Публикация исходного кода в WordPress с помощью модуля SyntaxHighlighter

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

1
2
3
4
#button {
    font-weight: bold;
    border: 2px solid #fff;
}

Чтобы получить результат, аналогичный приведенному выше фрагменту, заключите свой код в эти теги:

ваш код

Параметр «language» определяет язык и правила подсветки синтаксиса. Поддерживаются следующие значения:

  • actionscript3
  • bash
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

Если значение параметра «language» не задано, используется значение «text» (без подсветки синтаксиса).
Код между тегами «code» будет автоматически закодирован для отображения, поэтому вам не стоит беспокоиться об элементах HTML или о чем-либо подобном.

Параметры конфигурации

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

  • autolinks (true/false) — Каждый URL в коде отображается как гиперссылка. Значение по умолчанию: true.
  • collapse (true/false) — Если задано значение true, при загрузке страницы область кода будет свернута. Для того, чтобы развернуть ее, нужно будет кликнуть по ней. Это полезно для больших фрагментов кода. По умолчанию задано значение false.
  • firstline (номер) — Определяет, с какого числа начинается нумерация строк. Значение по умолчанию: 1.
  • gutter (true/false) — Если задано значение false, номера строк будут скрыты. Значение по умолчанию: true.
  • highlight (номера, разделенные запятыми) — Номера строк, которые будут выделены, например, «4,7,19».
  • hmtlscript (true/false) — Если задано значение true, выполняется подсветка HTML/XML-кода. Это полезно при публикации смешанного кода, например, PHP внутри HTML. Работает только с некоторыми языками. Значение по умолчанию: false.
  • light (true/false) — Если задано значение true, номера строк и панель инструментов будут скрыты. Это полезно при размещении фрагмента кода из одной-двух строк. Значение по умолчанию: false.
  • padlinenumbers (true/false/целое число) — Позволяет контролировать дополнение номеров строк нулями. Значение true задает автодополнение, значение false отключает дополнение, число задает фиксированное количество знаков для номеров строк.
  • toolbar (true/false) — Если задано значение false, при наведении на код не будет появляться панель инструментов с кнопками. Значение по умолчанию: true.
  • wraplines (true/false) — Если задано значение false, будет отключен перенос строк. При наличии длинных строк появится горизонтальная полоса прокрутки.
  • title (строка) – заголовок для кода. Может быть полезным в сочетании с параметром collapse.

Примеры использования вышеописанных параметров:

8
9
10
11
Эта строка не выделена.
Эта строка выделена.
Эта строка выделена.
Эта строка не выделена.
0001
Это короткий фрагмент кода с дополнением номеров строк нулями до 4 знаков.
//В этом примере отключен перенос строк. Чтобы прочитать текст полностью, вам придется воспользоваться полосой прокрутки. Кроме того, в данном примере отключена нумерация строк и спрятана панель инструментов.

А это фрагмент кода побольше. Здесь выбран язык PHP и выделена строка номер 12.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>WordPress.com Code Example</title>
</head>
<body>
    <h1>WordPress.com Code Example</h1>
    <p><?php echo 'Hello World!'; ?></p>
    <p>Эта строка выделена.</p>
    <p>Очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень-очень длинная строка.</p>
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
    <p><a href="http://wordpress.com/">WordPress.com</a></p>
</body>
</html>

Благодарности
Для реализации данной возможности используется проект SyntaxHighlighter (автор Alex Gorbatchev). Пользователи WordPress.org могут установить соответствующий плагин.


Источник: https://ru.support.wordpress.com/code/posting-source-code/

Разработка и создание сайтов, интернет-магазинов, веб-приложений, порталов, лэндингов, мобильных приложений (Киев)

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

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