Первая страница

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

полезные библиотеки и советы
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы

Инструменты подсветки синтаксиса кода языков программирования, запросов и форматирования на движке MediaWiki.

Библиотека highlight.js

Библиотека JS+CSS для подсветки кода различных языков. Подключается ссылками на js и css файлы (которые лежат или на cdn сервере разработчика, или скачаны и лежат на сервере проекта пользователя) в страниц. Есть выбор стилей подсветки и возможность их редактирования. В html коде страницы скрипт будет по умолчанию искать содержимое контейнера <pre><code>...</code></pre> и заниматься его подсветкой. Вес js файла можно снизить с 50 до 10 кб за счет удаления лишнего кода, относящихся не к нашим языкам программирования. А css файл для любого стиля весит 1 кб.

Советы по использованию библиотеки:
  1. Заменить конструкцию <pre><code> на <code> так:
    • В js файле заменить e=document.querySelectorAll("pre code") на e=document.querySelectorAll("code")
    • После того, как убрали <pre>, строки будут вытягиваться в одну. Тогда тэгу <code> на странице (или в css-файле классу .hljs) надо присвоить стиль:
    • white-space:pre-line; (внутренние пробелы не учитываются, строки переносятся)
      или
      white-space:pre-wrap; (внутренние пробелы учитываются, строки переносятся - предпочтительней)
  2. Если скрипт подключен, но обрабатывать <code> для подсветки не надо, то прописать ему class="nohighlight"
  3. Конструкцию <pre><code> заменить на вымышленный тэг <HL>:
    • В js файле заменить e=document.querySelectorAll("pre code") на e=document.querySelectorAll("HL")
    • В css файле классу .hljs присвоить white-space:pre-wrap; font-family:monospace;
    • При разметке статьи пользователю использовать для кода контейнер <HL>...</HL>
Пример подсветки кода JavaScript стилем Atelier Dune Dark:

highlight.js подсветка

Расширение SyntaxHighlight

Для MediaWiki есть расширение SyntaxHighlight. До 2015 г. оно работало с библиотекой GeSHi. После - с библиотекой Pygments. В обеих библиотеках есть поддержка подсветки XML.

Ссылки

highlight.js SyntaxHighlight
Сайт библиотеки
Инструкция по использованию
API
Конфигурирование
Примеры подсветки
Установка и применение расширения
Сайт GeSHi
Сайт Pygments

Анатолий Опарин

Новости

Объявление
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь