MaxHub
Служба Заботы MaxSite CMS

Плагин подсветки синтаксиса Highlight

Плагины » Контент / 9 декабря 2015

Плагин подсветки синтаксиса для MaxSite CMS, основанный на функционале highlight.js. Позволяет без лишних телодвижений подсвечивать исходный код на странице, очень прост в использовании.

Пример подсветки кода Java

Для MaxSite CMS уже есть несколько аналогичных плагинов, но в них используются устаревшие библиотеки, и отмечаются некоторые конфликты/неудобства.

Особенности

  • highlight.js43 версии: 9.10.0
  • Языки: 172* в текущей поставке только HTML, CSS, Java, JavaScript, PHP
  • Стили: 80
  • Компактный размер (около 15 кб)
  • Автоопределение используемого языка
  • Не конфликтует с другими парсерами (HTML, BBCode)

Пример подсветки кода Java в стиле IDE IntelliJ Idea был продемонстрирован выше.

Несколько других примеров стилей

После активации плагина в его настройках следует выбрать тему оформления:

Выбор темы оформления

Использование плагина:

Highlight имеет всего одну настройку - стиль оформления, он выбирается в админке, как показано выше. Стили оформления позволяют здорово оживить исходный код, повысив его привлекательность и читабельность. Большинство из них скопированы из существующих сред разработки. Все примеры стилей можно посмотреть на сайте разработчика37.

Далее в тексте страницы нужно обрамить исходный код тегом pre:

<pre>Текст программы</pre>

Для маленьких блоков кода система автоматического распознавания языка не всегда работает верно, так что, в этом случае язык лучше указывать вручную:

<pre class="java"> код Java </pre>

Если параллельно задействован плагин BBCode, то можно использовать следующий синтаксис:

[pre class="java"] код Java [/pre]

Плагин так же понимает код, сгенерированный встроенным визуальным редактором:

[pre lang=html] тут какая-то HTML разметка [/pre]

Другие стили, а так же самые последние версии highlight.js доступны тут45.

Скачать:

  • Текущая версия плагина: 0.3 от 07.04.2017 (проверялся только на cms 0.96).
  • highlight_0_3.zip49

  • Предыдущая версия плагина: 0.2 от 08.12.2015 (проверялся только на cms 0.93).
  • highlight_0_2.zip46

    Автор: Leonis

    Благодарности

    Код этого плагина не написан с нуля. В нём есть немного генов из плагинов SHJS (Максим) и Highlight (Bugo). Всё, что касается JS и стилей является трудом большого количества разработчиков проекта highlight.js, за что им низкий поклон.

    Любые рекомендации - приветствуются!

    Leonis 6 1546
    Комментариев: 6
    1. Совсем забыл добавить, что 9-я версия highlight.js по сравнению с предыдущими была заметно переработана - компактный код, компактные стили. Если сравнивать с другими плагинами подсветки кода, то этот вдвое снижает нагрузку на интернет-канал, примерно 15 кб против 30-ти. Мелочь, а приятно wink

    2. Leonis, спасибо, что поделились наработкой! Можно было ещё несколько скриншотов с примерами оформления привести для наглядности smile

    3. Мне кажется, лишние картинки будут загромождать описание. 65 стилей оформления - я даже все не просмотрел, потому что терпения не хватило. Выбрал наиболее привычный стиль от IntelliJ Idea, так как в нём сейчас пишу smile

      На сайте разработчика есть специальная страничка (ссылка есть в описании), где можно быстро и удобно посмотреть в работе все стили.

      Кстати, это идея - сделать виджет, в котором можно было бы менять стили оформления на лету, либо, сделать то же самое в админке, хотя, это будет труднее.

    4. Мне кажется, лишние картинки будут загромождать описание. 65 стилей оформления - я даже все не просмотрел, потому что терпения не хватило.

      Я имел в виду пару-тройку самых симпатичных разместить и было бы достаточно smile

      Кстати, это идея - сделать виджет, в котором можно было бы менять стили оформления на лету, либо, сделать то же самое в админке, хотя, это будет труднее.

      Смена стиля оформления кода мне никогда в голову не приходила - главное чтобы сам код был полезным smile Так что на ваше усмотрение smile

    5. Немного покопавшись в стилях понял, что их выбор тревожит только самого владельца сайта - посетители вряд ли заметят разницу между idea, github и googlecode.

      Не нашёл как прикреплять картинки, поэтому отправил материал через красную кнопку. Выбор стиля подсветки сильно зависит как от дизайна сайта, так и от кода. Один и тот же стиль в комбинации с одними языками весьма хорош, а другие подсвечивает безобразно.

      То есть, надо просто решить - будет ли фон подсветки светлым, тёмным, или каким-то экзотическим. По одному варианту из каждой категории выслал.

      Всем приятно провести праздники, а MaxSite известности и побольше креативных разработчиков smile

    6. Обновил до версии 0.3 (новый highlight.js). Если плагин не работает (не подсвечивает код), то вероятно есть конфликт с установленными плагинами. У меня бодался с parser-default, shjs, psevdocode. Повыключал эти плагины, потом последовательно повключал - глюк ушёл и код стал подсвечиваться как надо. Причину не выяснил, кому интересно - напишите, почему такое может быть.

    Оставьте комментарий!

    grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

    Вход / регистрация или войти без комментирования
      Имя и сайт используются только при регистрации

    Авторизация MaxSiteAuth. Войти через loginza

    (обязательно)