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

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

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


Ещё статьи для вебмастеров, расширяющие технологический кругозор:
Памятка начинающему вебмастеру
Как работать с Flash в современное время
Спецсимволы HTML – коды около 2000 дизайнерских иконок
Blumentals WeBuilder – удобнейший редактор кода с предпросмотром
WYSIWYG Web Builder – мощный визуальный конструктор сайтов
RocketCake – лаконичный визуальный конструктор сайтов
Pinegrow – стильный визуальны конструктор сайтов
Lunacy – для макетирования интернет-страниц
Flip PDF – конвертор PDF документов в HTML5 приложение
Hi Slider – программа для создания продвинутых jQuery слайдеров
WOW Slider – программа для создания красивых HTML5 слайдеров
Amazing Slider – программа для создания HTML5 слайдшоу, галерей, альбомов
Scratch – визуальный язык программирования и редактор кода
Sozi – программа для создания стильных HTML5 презентаций с перелетами между слайдами
Stencyl – игровой движок для создания 2D-игр и публикации их в веб
Moodle – практика администратора СДО
MediaWiki – как использовать для ведения и хранения документации
MediaWiki – как скачивать Wiki-страницы в PDF
Nicepage – конструктор сайтов и тем для CMS
PowerPoint в HTML5 – обзор софта конвертации
SVG – как сделать анимацию линии (имитацию рисования)
TimelineJS – библиотека для хронологических лент
TurboSite – лаконичный конструктор многостраничных сайтов
TurboWarp – продвинутый форк Scratch для создания HTML5 игр и приложений
HTTP – коротко о протоколе
OpenAPI – спецификация, визуализация, инструментарий
Camtasia Studio – видеоредактор с экспортом в интерактивный HTML5 проигрыватель
Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare
Что нужно знать об электронных платежах вебмастеру интернет-магазина
Индекс цитирования сайта – что это?
Как создать интерактивный кроссворд на сайте?
Новости
Квадрат Немалевича
Объявление
# база учебных заведений для художников и дизайнеров
Книга - источник долголетия
Опарин. Дети вдохновляют
Книга для семейного чтения:
  • Стихотворные комментарии к детским рисункам
  • Энциклопедия абстрактных понятий
  • Загадки про животных
  • Детские стихи
PDF 250 стр. без сокращений, бесплатно
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь