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

Плагин выделения синтаксиса

Плагин Syntax Highlighter с Prism.js интеграцией является универсальным дополнением к вашему веб-сайту, обеспечивающим выделение фрагментов кода и их легкую читаемость. Благодаря привлекательному визуальному представлению кода этот плагин гарантирует оптимальное взаимодействие как разработчиков, так и читателей. Ниже приведено подробное руководство по включению и настройке плагина выделения синтаксиса для максимальной полезности.

Включение плагина

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

Настройки выделения синтаксиса

После включения плагина выделения синтаксиса вы можете получить доступ к экрану его настроек. Здесь настройки удобно разделены на три категории: "Конфигурация темы", "Параметры отображения" и "Дополнительные параметры".

Настройка темы

Группа "Конфигурация темы" позволяет изменять внешний вид выделенного кода. Вот настройки, которые вы можете настроить в рамках этой группы:

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

Параметры отображения

В разделе "Параметры отображения" представлено несколько способов настройки отображения вашего кода. Настройки, доступные в этой группе, могут помочь сделать ваш код более читаемым и доступным для других:

Показывать номера строк: Включите эту функцию для нумерации каждой строки вашего кода. Это дает читателям более доступную точку отсчета.
Кнопка "Копировать в буфер обмена": Позволяет пользователям копировать фрагменты кода всего одним щелчком мыши.
Встроенный просмотр цвета: Эта функция удобна для таблиц стилей и позволяет читателям визуализировать цветовые коды с помощью встроенного предварительного просмотра.
Автоматическое связывание: преобразуйте URL-адреса и электронные письма в вашем коде в интерактивные ссылки.
Показывать скрытые символы: Эта функция выявляет скрытые символы, такие как табуляции и разрывы строк. Это особенно полезно для тех, кто стремится глубже понять базовые структуры кода.

Дополнительные параметры

Раздел "Дополнительные параметры" позволяет настроить способ загрузки скриптов плагина. Вот настройки, доступные в этой группе:

Загрузка: решите, куда вы хотите загружать скрипты выделения синтаксиса:
- Только на страницах публикаций
- На всех страницах (исключая страницы "404’ и ‘поиск’)

Помните, после внесения желаемых изменений крайне важно нажать на кнопку "Сохранить" в правом нижнем углу экрана настроек, чтобы убедиться, что ваши изменения вступили в силу.

Использование плагина выделения синтаксиса

Плагин выделения синтаксиса в Publii предлагает универсальные опции для интеграции кода в ваш контент, будь то с помощью редактора блоков или расширенного редактора WYSIWYG.

Интеграция с редактором блоков

С редактором блоков встраивать код просто. Когда вы пишете свой код внутри блока кода, он автоматически форматируется и выделяется в соответствии с указанным языком. Этот метод гарантирует корректное отображение кода при минимальном ручном вмешательстве.

Интеграция с редактором WYSIWYG

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

Встраивание кода вручную

Ручное встраивание кода по-прежнему доступно для пользователей, предпочитающих более практичный подход или не использующих редактор блоков. Введите следующую разметку в редакторе WYSIWYG и добавьте соответствующий класс для языка вашего кода.:

<pre class="language-sufix"><code> ...your_code_here... </code></pre>

Примечание: Класс "language-sufix" представляет язык, на котором вы написали свой код. Суффикс, сокращение языка в таблице выше, следует добавить в конец класса. Например, класс для HTML-кода будет "language-html".

Этот плагин поддерживает следующие языки (точно так же, как редактор блоков):

Language	Suffix
Apache Configuration	`apacheconf`
Bash	`bash`
BASIC	`basic`
Batch	`batch`
BBcode	`bbcode`
C	`c`
C-like	`clike`
C++	`cpp`
ColdFusion Script	`cfscript`
CSS	`css`
Dart	`dart`
Docker	`docker`
Elm	`elm`
GDScript	`gdscript`
Git	`git`
GLSL	`glsl`
Go	`go`
GraphQL	`graphql`
HAML	`haml`
Handlebars	`handlebars`
Haskell	`haskell`
HTML	`html`
HTTP	`http`
INI	`ini`
Java	`java`
JavaScript	`javascript`
JavaScript Extras	`js-extras`
JSONP	`jsonp`
JSX	`jsx`
JSON	`json`
Kotlin	`kotlin`
LaTeX	`latex`
Less	`less`
Lisp	`lisp`
Lua	`lua`
Makefile	`makefile`
Markdown	`markdown`
Markup	`markup`
Markup Templating	`markup-templating`
MATLAB	`matlab`
NASM	`nasm`
Nginx	`nginx`
Objective-C	`objective-c`
Pascal	`pascal`
Perl	`perl`
PHP	`php`
PowerShell	`powershell`
Pug	`pug`
Python	`python`
R	`r`
Regular Expressions	`regex`
RSS	`rss`
Ruby	`ruby`
SASS	`sass`
SCSS	`scss`
Scala	`scala`
Scheme	`scheme`
SQL	`sql`
Swift	`swift`
Twig	`twig`
TypeScript	`typescript`
VB.NET	`vbnet`
Visual Basic	`visual-basic`
YAML	`yaml`

Настройка внешнего вида выделения синтаксиса

Плагин выделения синтаксиса позволяет настраивать внешний вид блоков кода с помощью переменных CSS. Это дает вам полный контроль над внешним видом вашего кода и позволяет создавать единый стиль для всего вашего веб-сайта.

Плагин предлагает шесть предопределенных тем для подсветки синтаксиса. Вы можете легко адаптировать и переопределять эти темы, скопировав CSS-блоки (переменные) ниже в пользовательский инструмент CSS.

/* Beige Theme */
:root {
   --prism-text: #323C53;
   --prism-bg: #F5F2F0;
   --prism-light-shadow: white;
   --prism-selection: #B3D4FC;
   --prism-comment: slategray;
   --prism-punctuation: #999;
   --prism-namespace-opacity: 0.7;
   --prism-property: #905;
   --prism-string: #690;
   --prism-operator: #9A6E3A;
   --prism-operator-bg: rgba(255, 255, 255, 0.5);
   --prism-atrule: #07A;
   --prism-function: #DD4A68;
   --prism-regex: #E90;
   --prism-border: rgba(112, 128, 144, 0.7);
   --prism-space: #808080;
   --prism-url: #CF222E;
}

/* Black Theme */
:root {
   --prism-text: #F6F6F9;
   --prism-bg: #1E2128;
   --prism-light-shadow: rgba(0, 0, 0, 0.3);
   --prism-selection: #C1DEF1;
   --prism-comment: rgba(255, 255, 255, .5);
   --prism-punctuation: #B3B9C5;
   --prism-boolean: #E1A6F2;
   --prism-namespace-opacity: .7;
   --prism-property: #6AB0F3;
   --prism-string: #FFD479;
   --prism-operator: #AC8D58;
   --prism-atrule: #92D192;
   --prism-keyword: #FFEEAD;
   --prism-regex: #FD971F;
   --prism-border: #4C4C4C;
   --prism-space: #808080;
   --prism-url: #ED8EB2;
}

/* Brown Theme */
:root {
   --prism-text: #D7CFD6;
   --prism-bg: #322931;
   --prism-light-shadow: rgba(0, 0, 0, 0.3);
   --prism-selection: #C1DEF1;
   --prism-comment: #797379;
   --prism-punctuation: #B9B5B8;
   --prism-boolean: #FD8B19;
   --prism-namespace-opacity: .7;
   --prism-property: #FDCC59;
   --prism-string: #149B93;
   --prism-operator: #FD8B19;
   --prism-atrule: #149B93;
   --prism-keyword: #8FC13E;
   --prism-regex: #149B93;
   --prism-border: #6F5B6D;
   --prism-space: #876F84;
   --prism-url: #FD8A7D;
}

/* Gray Theme */
:root {
   --prism-text: #323C53;
   --prism-bg: #F6F6F6;
   --prism-text-shadow: 0 1px white;
   --prism-selection: #B3D4FC;
   --prism-comment: #666F78;
   --prism-punctuation: #999;
   --prism-namespace-opacity: .7;
   --prism-property: #C0341D;
   --prism-selector: #2D61C9;
   --prism-operator: #9A6E3A;
   --prism-operator-bg: rgba(255, 255, 255, 0.5);
   --prism-atrule: #07A;
   --prism-function: #E09142;
   --prism-regex: #E90;
   --prism-border: rgba(112, 128, 144, 0.7);
   --prism-space: #808080;
   --prism-url: #C0341D;
}

/* Violet Theme */
:root {
   --prism-text: #AFA0FE;
   --prism-bg: #2A2734;
   --prism-light-shadow: #4285F4;
   --prism-selection: #4285F4;
   --prism-comment: #959DAD;
   --prism-punctuation: #959DAD;
   --prism-namespace-opacity: .7;
   --prism-property: #9EBEFF;
   --prism-function: #9EBEFF;
   --prism-string: #FC9;
   --prism-operator: #DFEAFF;
   --prism-atrule: #EBF2FF;
   --prism-border: #3E4552;
   --prism-space: #808080;
   --prism-url: #FC98E9;
}

/* White Theme */
:root {
   --prism-text: #24292F;
   --prism-bg: white;
   --prism-light-shadow: white;
   --prism-selection: #9FC6E9;
   --prism-comment: #6E7781;
   --prism-punctuation: #24292F;
   --prism-namespace-opacity: .7;
   --prism-property: #0550AE;
   --prism-string: #0A3069;
   --prism-operator: #0550AE;
   --prism-atrule: #CF222E;
   --prism-function: #8250DF;
   --prism-regex: #0A3069;
   --prism-border: #D1D4D8;
   --prism-space: #808080;
   --prism-url: #CF222E;
}

Если вы хотите использовать другую тему для темного режима (например, черную тему), сохраняя другую тему в светлом режиме, вы можете добиться этого с помощью prefers-color-scheme медиа-запроса. Вот как вы можете применить черную тему для темного режима:

@media (prefers-color-scheme: dark) {
   /* Black Theme */
   :root {
      --prism-text: #F6F6F9;
      --prism-bg: #1E2128;
      ... [rest of the variables]
   }
}