⚙️ Руководство

Для технического блога точное и красивое отображение математических выкладок — это вопрос стандарта качества. Мы используем библиотеку KaTeX, так как она обеспечивает самый быстрый рендеринг формул без замедления загрузки страниц.

Ниже приведена краткая справка для авторов и настройки сайта.

🔧 1. Установка и активация

Для корректной работы математического движка необходим плагин KaTeX.

В админ-панели перейдите: Плагины → Добавить новый.
В поиске введите: KaTeX.
Выберите плагин KaTeX (автор: Automattic или совместимый аналог).
Нажмите «Установить» → «Активировать».

✍️ 2. Синтаксис для редактора Gutenberg

В стандартном редакторе WordPress формулы не рендерятся автоматически через знаки доллара ($). Необходимо использовать специальные шорткоды.

А. Строчные формулы (внутри текста)

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

Синтаксис:

[latex]код_формулы[/latex]

Пример:
Закон Ома для участка цепи записывается как $I = \frac{U}{R}$ , где I — сила тока.

Б. Блочные формулы (отдельная строка)

Используются для сложных вычислений, интегралов и матриц. Выравниваются по центру.

Синтаксис:

[latex display="true"]код_формулы[/latex]

Пример:

[latex display="true"]\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}[/latex]

📦 3. Как показать код формулы без рендеринга

Иногда нужно продемонстрировать сам код формулы, а не отрендеренный результат. Для этого используйте блок «Код» или блок «Предварительное форматирование» в редакторе Gutenberg.

Блок «Код» (рекомендуется)

В редакторе нажмите + (добавить блок).
Найдите блок Код (Code).
Вставьте туда шорткод формулы:

[latex]E = mc^2[/latex]

Блок отобразит код как есть, без рендеринга формулы.

🎨 4. Настройка оформления блоков кода

По умолчанию блоки кода имеют белый фон, который плохо сочетается с темной темой сайта. Чтобы это исправить:

Вариант A: Через CSS (рекомендуется)

Добавьте в Внешний вид → Настроить → Дополнительные стили следующий код:

/* Блок кода и preformatted текст */
.wp-block-code,
pre,
code {
  background: #0F172A !important;    /* Тёмный фон */
  color: #E2E8F0 !important;         /* Светлый текст */
  border: 1px solid #1E293B !important;
  border-radius: 6px;
  padding: 12px 16px;
}

/* Инлайн-код внутри текста */
:not(pre) > code {
  background: rgba(232, 160, 44, 0.15) !important;
  color: #E8A02C !important;
  padding: 2px 6px;
  border-radius: 4px;
}

Этот код сделает блоки кода темно-синими (в тон общей теме), а текст внутри — светлым. Встроенный код будет выделен полупрозрачным золотым фоном.

🤖 5. Системный промпт для нейросетей

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

Скопируйте этот текст в чат с ИИ перед написанием статьи:

Ты пишешь техническую статью для инженерного блога на базе WordPress.
ВАЖНОЕ ПРАВИЛО ФОРМАТИРОВАНИЯ: Для всех математических формул, уравнений и символов ты ОБЯЗАН использовать специфические шорткоды WordPress (плагин KaTeX), а не стандартный Markdown или LaTeX.
Для формул В СТРОКЕ (внутри текста) используй формат:
[latex]формула[/latex]
Для формул ОТДЕЛЬНОЙ СТРОКОЙ (по центру) используй формат:
[latex display="true"]формула[/latex]
Никогда не используй символы $ для формул.
Пример правильного вывода:
«Сила тока вычисляется по формуле [latex]I = U/R[/latex].»
Если нужно показать код формулы без рендеринга, оберни его в блок кода или используй HTML-сущности &#36; вместо $.
Теперь напиши статью на тему: [ВСТАВЬ ТЕМУ СТАТЬИ]

📊 6. Примеры использования

Правильно ✅

В блоке «Абзац»:

Мощность вычисляется по формуле [latex]P = UI[/latex], где...

В блоке «Код» (для примера):

[latex]P = UI[/latex]

Неправильно ❌