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

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

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


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