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

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

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


Ещё статьи для вебмастеров, расширяющие технологический кругозор:
Памятка начинающему вебмастеру
Спецсимволы HTML - коды около 2000 дизайнерских иконок
Blumentals WeBuilder - удобнейший редактор кода с предпросмотром
WYSIWYG Web Builder - мощный визуальный конструктор сайтов
Pinegrow - визуальный редактор/конструктор сайтов
Lunacy - для макетирования интернет-страниц
Moodle - практика администратора СДО
MediaWiki - как использовать для ведения и хранения документации
MediaWiki - как скачивать Wiki-страницы в PDF
PowerPoint в HTML5 - обзор софта конвертации
SVG - как сделать анимацию линии (имитацию рисования)
TimelineJS - библиотека для хронологических лент
HTTP - коротко о протоколе
OpenAPI - спецификация, визуализация, инструментарий
Camtasia Studio = видеоредактор + видеограббер
Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare
Что нужно знать об электронных платежах вебмастеру интернет-магазина
Индекс цитирования сайта - что это?
Новости
Квадрат Немалевича
Объявление
# база учебных заведений для художников и дизайнеров
Книга - источник долголетия
Опарин. Дети вдохновляют
Книга для семейного чтения:
  • Стихотворные комментарии к детским рисункам
  • Энциклопедия абстрактных понятий
  • Загадки про животных
  • Детские стихи
PDF 250 стр. без сокращений, бесплатно
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь