Подсветка синтаксиса в 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>

Расширение SyntaxHighlight

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

Ссылки

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