Codeframe – плагин подсветки синтаксиса для Joomla 5

Плагин Codeframe для Joomla 5 (группа content) автоматически добавляет красивую подсветку синтаксиса кода в статьях с использованием библиотеки Prism.js. Он срабатывает на событие onContentPrepare, то есть перед выводом контента на экран.

Возможности

• Интеграция Prism.js (v1.29.0) – использует популярную и легкую библиотеку для подсветки. Ресурсы загружаются через CDN (jsdelivr).
• Автоматическая загрузка языков (Autoloader) – вам не нужно вручную подключать скрипты для каждого языка программирования. Плагин использует prism-autoloader, который подгружает нужную грамматику "на лету" в зависимости от класса блока (например, language-php, language-css).
• Кнопка "Копировать" (Copy to Clipboard):
  • Автоматически добавляет кнопку копирования кода в буфер обмена.
  • Кастомизация: в плагин вшиты CSS-стили, которые заменяют стандартный текст кнопки на SVG-иконку.
  • Интерактивность: при наведении кнопка подсвечивается, а при клике иконка меняется на галочку и появляется всплывающая подсказка "Скопировано!".
• Панель инструментов (Toolbar) – подключает плагин тулбара Prism, необходимый для работы кнопки копирования.

Настройки (Конфигурация)

В админ-панели плагина можно выбрать тему оформления (цветовую схему). Доступные варианты:

• Prism (светлая, по умолчанию)
• Prism Dark
• Coy
• Funky
• Okaidia
• Solarized Light
• Tomorrow
• Twilight

"Умная" обработка кода (JavaScript логика)

Плагин содержит встроенный JS-скрипт, который исправляет типичные проблемы верстки из визуальных редакторов (например, TinyMCE):

1. Обработка одиночных <code>:

   • Если тег <code> встречается без обертки <pre>, скрипт автоматически создает <pre> и оборачивает код в него (так как Prism требует структуру <pre><code>...</code></pre>).
   • Автоопределение Bash: если текст начинается с команд sudo, npm, git, docker, ему присваивается класс language-bash. Иначе — language-none.

2. Исправление разметки редакторов:

   • Часто редакторы сохраняют код просто как language-markup (HTML). Скрипт анализирует содержимое таких блоков:
     • Если начинается с <?php — меняет класс на language-php.
     • Если содержит JS-ключевые слова (const, let, function, console.log и т.д.) — меняет класс на language-javascript.

3. Принудительный рендеринг: вызывает Prism.highlightAll() после всех манипуляций с DOM, чтобы подсветка гарантированно применилась к исправленным блокам.

Производительность

• Плагин проверяет наличие тегов <code или <pre в тексте статьи перед подключением скриптов. Если кода в статье нет, лишние JS/CSS файлы не загружаются.

Установка

1. Скачайте архив плагина.
2. В панели управления Joomla перейдите в Расширения → Управление → Установка.
3. Загрузите архив и установите плагин.
4. Активируйте плагин в Расширения → Плагины (найдите "Codeframe" в группе "Content").
5. Настройте тему оформления в параметрах плагина.

Структура файлов

codeframe/
├── codeframe.php          # Основной файл плагина
├── codeframe.xml          # Манифест установки
├── lang/                  # Языковые файлы
│   ├── en-GB.plg_content_codeframe.ini
│   ├── en-GB.plg_content_codeframe.sys.ini
│   ├── ru-RU.plg_content_codeframe.ini
│   └── ru-RU.plg_content_codeframe.sys.ini
└── README.md              # Этот файл

Требования

• Joomla 5.x
• Включенный JavaScript в браузере пользователя

Лицензия

GNU General Public License version 2 or later.

Автор

Автор плагина – [vmwebio].
Версия: 1.0.0
Дата создания: Март 2024

---

Примечание: плагин использует внешние ресурсы (CDN) для загрузки Prism.js. Убедитесь, что ваш сайт имеет доступ к cdn.jsdelivr.net. При необходимости вы можете изменить источники в коде плагина на локальные копии.