Skip to content

README.md

Latest commit

 

History

History
86 lines (61 loc) · 6.03 KB

README.md

File metadata and controls

86 lines (61 loc) · 6.03 KB
Raw

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. При необходимости вы можете изменить источники в коде плагина на локальные копии.