[BETA] hcode - расширенный функционал code

Расширенный функционал ББ-кода code и подсветка синтаксиса

Начиная с версии 3.1.x, моды были заменены "расширениями", которые выполняют ту же самую функцию, но без изменений в исходном коде движка.
Аватара пользователя
c61
Разработчик модов
Сообщения: 249
Зарегистрирован: 24.08.13 16:46

c61 » 13.09.15 16:01

Hcode: BBCode code advanced functionality and sintax highlighting
phpBB 3.1.5+ extension

copyright (c) 2014 c61 c61@yandex.ru http://c61.no-ip.org
license http://opensource.org/licenses/gpl-license.php GNU Public License


Hcode: Расширенный функционал ББ-кода code и подсветка синтаксиса

Создано по мотивам мода phpBB 3.0 hcode http://c61.no-ip.org/forum/viewtopic.php?f=11&t=88

Расширение предназначено для расширения фунционала ББ-кода code, в том числе:
  • сохранения кодов табуляции в публикуемом коде (в немодифицированной конференции табуляции заменятся на пробелы);
  • добавления возможности расширения окошка кода по вертикали (при появлении прокрутки) и горизонтали;
  • добавления возможности нумерации строк;
  • подсветки синтаксиса кода с указанием языка (в том числе с автоматическим разпознаванием языка).

Похожих расширений phpBB 3.1 несколько, но ни одно из них не устроило меня по функционалу, поэтому и было реализовано это расширение.


Установка

Копировать содержимое каталога root в корневую папку конференции с сохранением структуры каталогов (расширения phpBB 3.1 располагаются в /ext).


Особенности

В phpBB 3.1 замена обрабтчика ББ-кода code (и прочих) реализована начиная с версии 3.1.5, что является ограничением на использование данного расширения.

Подсветка синтаксиса реализована на стороне браузера клиента при помощи highlight.js ( см. https://highlightjs.org/ ). Поскольку разрабочики highlight.js принципиально не реализуют встроенную в свои скрипты нумерацию строк кода, таковая выполнена независимо, причем при включении нумерации длинные строки автоматически разворачиваются, что является особенность данной версии и в дальнейшем может быть изменено. Список поддерживаемых языков и стилей см. https://highlightjs.org/static/demo/ . При указании html используется xml, js и javascript равнозначны, по умолчанию подсветка выполняется по правилам для xml. Стиль подсветки по умолчанию - default.css - может быть заменен.

Изменение свойств окна кода и подсветка запускаются в самом конце загрузки страницы.

Расширение может использоваться для стилей prosilver и subsilver2, а также иных, базирующихся на вышеперечисленных (например, от Artodia), со следующими ограничениями:
  • для ББ-кода code расширение выполняет подмену одиночных тегов "pre" и "code" на "pre" с вложенным "code", используя события ядра core.modify_bbcode_init, core.validate_bbcode_by_extension и core.bbcode_cache_init_end, core.bbcode_second_pass_by_extension; для некорректно реализованных стилей подмена может оказаться ошибочной;
  • описание ББ-кода code в шаблоне (файл bbcode.html, может отсутствовать в случае наследования из базового стиля) не должно содержать одновременно теги "pre" и "code";
  • наличие только тега "code" является признаком prosilver-совместимого стиля;
  • наличие только тега "pre" является признаком subsilver2-совместимого стиля;
  • в subsilver2 в файле styles/subsilver2/template/overall_footer.html может отсуствовать событие overall_footer_body_after, в этом случае следует отредактировать файл, добавив перед:код:

    Код: Выделить всё

    <!-- EVENT overall_footer_body_after -->
  • для subsilver2 также необходим патч, в styles/subsilver2/template/viewtopic_body.html найти:

    Код: Выделить всё

    				<table width="100%" cellspacing="5">
    и заменить на:

    Код: Выделить всё

    				<table width="100%" cellspacing="5" style="overflow: hidden; table-layout: fixed">
  • при масштабировании блока кода с нумерацией строк в subsilver2 возможно расхождение строк, данная фича изучается.


Совместимость с другими ББ-кодами и расширениями

Замечания по совместимости:
  • ББ-коды спойлеров, в которых используется свойство стиля display:none, в случае нахождения кода под спойлером приводят к неработоспособности highlight.js из-за неопределенного offsetWidth и т.п.; работоспособные спойлеры прилагаются ниже;
  • в стилях Artodia используются фиксированные размеры шрифтов, поэтому расширения, изменяющие размер шрифта контента, могут не изменять размер шрифта блока кода, если нет необходимого изменения стиля;
  • для совместимости с расширениями типа "быстрый ответ", использующими ajax, в закрывающую часть ББ-кода code встроен javascript переинициализации подсветки синтаксиса.


Рекомендуемые совместимые ББ-коды спойлеров

Без названия спойлера:
  • Использование BBCode:

    Код: Выделить всё

    [spoiler]{TEXT}[/spoiler]
  • Замена HTML:

    Код: Выделить всё

    <div style="margin: 8px auto; border: 1px solid #C3CBD1; border-left-width: 2px; width: 99%;">
     <div style="background: #E9E9E9; min-height: 19px; font-size: 0.9em; font-weight: normal; cursor: pointer;" onclick="
    (function(d,i){
    var h=d[1],h2=d[d.length-1],b=i[1],b3=i[0];
    if(h2.style.display!=''){
    h.style.padding='6px';
    h.style.height='auto';
    h.style.visibility='visible';
    h2.style.display='';
    b3.src=b.src;b.src=h2.getElementsByTagName('img')[0].src;
    }else{
    h.style.padding='0';
    h.style.height='0';
    h.style.visibility='hidden';
    h2.style.display='none';
    b.src=b3.src;}
    }).call(this,$(this).parent().children('div'),$(this).children('img'));">
      <img style="display: none;" src="" />
      <img style="margin: 0; padding: 5px 5px 0;" src="data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=" />
      <b>&nbsp;</b>
     </div>
     <div style="min-height: 0px; height: 0; visibility: hidden; background: #F5F5F5; border-top: 1px solid #C3CBD1; padding: 0; margin: 0;">
      {TEXT}
     </div>
     <div style="display: none; background: #E9E9E9; min-height: 19px; font-size: 0.9em; font-weight: normal; cursor: pointer;" onclick="
    (function(d){
    d[1].style.padding='0';
    d[1].style.height='0';
    d[1].style.visibility='hidden';
    this.style.display='none';
    var i=$(d[0]).children('img');i[1].src=i[0].src;
    var dVT=$(window).scrollTop(),dVB=dVT+$(window).height(),eT=$(i[1]).offset().top,eB=eT+$(i[1]).height();
    if(!((dVT<eT)&&(dVB>eB)))$('html,body').scrollTop($(i[1]).offset().top);
    }).call(this,$(this).parent().children('div'));">
      <img style="margin: 0; padding: 5px 5px 0;" src="data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw==" />
      <i>{L_COLLAPSE_VIEW}</i>
     </div>
    </div>
  • Подсказка:

    Код: Выделить всё

    Спойлер [spoiler]скрытый текст[/spoiler]

С названием:
  • Использование BBCode:

    Код: Выделить всё

    [spoiler={TEXT1}]{TEXT2}[/spoiler]
  • Замена HTML:

    Код: Выделить всё

    <div style="margin: 8px auto; border: 1px solid #C3CBD1; border-left-width: 2px; width: 99%;">
     <div style="background: #E9E9E9; min-height: 19px; font-size: 0.9em; font-weight: normal; cursor: pointer;" onclick="
    (function(d,i){
    var h=d[1],h2=d[d.length-1],b=i[1],b3=i[0];
    if(h2.style.display!=''){
    h.style.padding='6px';
    h.style.height='auto';
    h.style.visibility='visible';
    h2.style.display='';
    b3.src=b.src;b.src=h2.getElementsByTagName('img')[0].src;
    }else{
    h.style.padding='0';
    h.style.height='0';
    h.style.visibility='hidden';
    h2.style.display='none';
    b.src=b3.src;}
    }).call(this,$(this).parent().children('div'),$(this).children('img'));">
      <img style="display: none;" src="" />
      <img style="margin: 0; padding: 5px 5px 0;" src="data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=" />
      <b>{TEXT1}</b>
     </div>
     <div style="min-height: 0px; height: 0; visibility: hidden; background: #F5F5F5; border-top: 1px solid #C3CBD1; padding: 0; margin: 0;">
      {TEXT2}
     </div>
     <div style="display: none; background: #E9E9E9; min-height: 19px; font-size: 0.9em; font-weight: normal; cursor: pointer;" onclick="
    (function(d){
    d[1].style.padding='0';
    d[1].style.height='0';
    d[1].style.visibility='hidden';
    this.style.display='none';
    var i=$(d[0]).children('img');i[1].src=i[0].src;
    var dVT=$(window).scrollTop(),dVB=dVT+$(window).height(),eT=$(i[1]).offset().top,eB=eT+$(i[1]).height();
    if(!((dVT<eT)&&(dVB>eB)))$('html,body').scrollTop($(i[1]).offset().top);
    }).call(this,$(this).parent().children('div'));">
      <img style="margin: 0; padding: 5px 5px 0;" src="data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw==" />
      <i>{L_COLLAPSE_VIEW}</i>
     </div>
    </div>
  • Подсказка:

    Код: Выделить всё

    Спойлер [spoiler=название спойлера]скрытый текст[/spoiler]

История версий

0.0.4 - 20151221
- устранена ошибка немоноширинного шрифта для prosilver; ВНИМАНИЕ !!!: необходимо добавить в стили pre code для prosilver в класс .hcodetd строку:

Код: Выделить всё

	font-family: Monaco, "Andale Mono","Courier New", Courier, mono;

0.0.3 - 20150923 (не распространялась):
- устранена ошибка выделения всего кода для subsilver2

0.0.2 - 20150923:
- устранены ошибки выделения кода (и соответственно неверного копирования, в том числе с номерами строк), спасибо Shredder'у за тестирование
- устранены ошибки сворачивания/разворачивания строк
- в список авторов включен Shredder ( http://phpbb-work.ru , роль - тестер )
- ВНИМАНИЕ !!! при переходе с предыдущей версии необходимо отключить расширение в админке, удалить данные расширения и удалить все файлы расширения

0.0.1 - 20150913:
- расширение портировано из мода phpBB 3.0 hcode http://c61.no-ip.org/forum/viewtopic.php?f=11&t=88

Скачать:
hcode_v_0_0_4.zip
(392.04 КБ) Скачиваний: 1207
hcode_v_0_0_2.zip
(391.88 КБ) Скачиваний: 1149


Скриншоты:






hc_ex3.gif



Тема на моей тестовой площадке тынц

P.S. Просьба сообщать о багах, глюках и т.п.

staiki
Сообщения: 74
Зарегистрирован: 14.06.15 10:41

staiki » 15.09.15 18:22

c61 писал(а): Просьба сообщать о багах, глюках и т.п.

Как можно сообщать о багах если ты толком не объяснил что оно делает? Ещё и пост удалил. Удаляю нафиг это не понятно что..

Xisp
Сообщения: 196
Зарегистрирован: 05.04.14 18:00

Xisp » 15.09.15 19:21

staiki писал(а):если ты толком не объяснил что оно делает?


В первом сообщении более чем понятно всё описано.

staiki писал(а):Ещё и пост удалил.


Он не мог этого сделать физически.

staiki писал(а):Удаляю нафиг это не понятно что..


Лол, а зачем ставили непонятно что? Вы что, ставите все расширения, что видите?

Shredder
Администратор
Сообщения: 1064
Зарегистрирован: 22.08.13 09:05

Shredder » 19.09.15 00:34

Пока расширение сырое.

1) Выделение в FF работает вот таким образом:

Появляется какая-то рамка, но сам код визуально не выделен.

2) После нажатия "Развернуть строки", название этой ссылки меняется на "Свернуть" и остаётся таким навсегда, сколько его ни жми)) Хотя сама функция работает нормально, и аналогичная функция развёртывания кода тоже функционирует нормально.

3) При включении нумерации код копируется вместе с номерами строк, причём номера при последующей вставке идут отдельным блоком:


4) В IE (тестировал на 11) и FF при нажатии на "Выделить всё" код копируется с лишним пробелом и/или символом табуляции перед началом блока с кодом. В Опере и Хроме этой проблемы нет.
Мои моды и расширения для phpBB
Выполняю работы по phpBB3 на заказ. Пишите в личку или на почту.
Бесплатная поддержка - только в темах.

Аватара пользователя
c61
Разработчик модов
Сообщения: 249
Зарегистрирован: 24.08.13 16:46

c61 » 23.09.15 10:39

Shredder, thnks, устранил кучу ошибок и наверняка понаделал новых :)

Аватара пользователя
Predator
Сообщения: 109
Зарегистрирован: 06.11.15 13:59

Predator » 12.11.15 19:17

staiki писал(а):если ты толком не объяснил что оно делает?

Чего тут объяснять еще? Подсветка синтаксиса кода!

Shredder писал(а):Пока расширение сырое.

А на данный момент?

c61, Я для движка e107 делал подсветку кода на geshi, ты не смотрел GeSHi - Generic Syntax Highlighter?

Аватара пользователя
c61
Разработчик модов
Сообщения: 249
Зарегистрирован: 24.08.13 16:46

c61 » 12.11.15 19:38

Predator писал(а):geshi
Ага. Пересмотрел с десяток всяких-разных. То одни проблемы, то другие. Выбрал highlightjs со своими проблемами )) Обоснование выбора заняло бы с десяток страниц текста...

На данный момент "сырость" наблюдается в мобильных браузерах и ещё кое-где. Не доводил "да ума", некогда.

Аватара пользователя
Predator
Сообщения: 109
Зарегистрирован: 06.11.15 13:59

Predator » 12.11.15 19:48

c61 писал(а):На данный момент "сырость" наблюдается в мобильных браузерах и ещё кое-где. Не доводил "да ума", некогда.

Жаль, что не доводил. Так стоит ставить или повременить пока?

Добавлено спустя 23 минуты 39 секунд:
А конкретно указывать, подсветку какого кода использовать нельзя? Например так: [code=php] было бы очень удобно, а если ничего не указано, т.е. просто [code] тогда подсветка по-умолчанию указанная в админке расширения.

Аватара пользователя
c61
Разработчик модов
Сообщения: 249
Зарегистрирован: 24.08.13 16:46

c61 » 12.11.15 22:06

Доводить буду, сроки не определены... В code конечно же можно явно указать язык после =, умолчание задается в админке. Можно потестить, буду только рад. Известные баги - с нумерацией строк, в некоторых браузерах корявости, а также был замечен глюк с выделением кода но забыл где :(

Аватара пользователя
Predator
Сообщения: 109
Зарегистрирован: 06.11.15 13:59

Predator » 13.11.15 09:40

c61 писал(а):Известные баги - с нумерацией строк, в некоторых браузерах

Пока смотрел только в Opera глюков вроде нет. Посмотрю также в других, как время будет. А какие именно глюки были замечены тобой?


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

Сейчас у меня по-умолчанию выбрана подстветка кода php, но подсвечивает он как-то странно, явно не php :)

Добавлено спустя 52 секунды:
c61 писал(а):В code конечно же можно явно указать язык после =

Т.е. это уже реализовано?

Добавлено спустя 18 минут 4 секунды:
PS: И вот еще что: У меня на форуме сделан BBcode [icode] типа однострочный инлайновый код, в нём используется html-тэг <code> так вот, после установки твоего расширения его вид изменился. Я конечно понимаю, почему, но сейчас сижу думаю, как их сдружить, чтобы ничего не менялось, глянуть можно тут.

Скриншоты:
С включенным расширением:
1.PNG


С отключенным расширением:
2.PNG


Добавлено спустя 41 минуту 18 секунд:
Кстати, вышла новая версия highlight 8.9.1
Обновил у себя на форуме.

В настройках расширения заменить код в разделе: «Подсветка синтаксиса Стиль подсветки и скрипт» на тот, что ниже, сохранить изменения.

Код: Выделить всё

<!-- highlight.js links: comment/uncomment/modify what you want to use -->

<!-- for ALL Langs -->

<!-- Local -->
<!--
<link rel="stylesheet" href="ext/c61/hcode/includes/highlight.js/8.9.1/all/styles/default.css" type="text/css" />
<script type="text/javascript" src="ext/c61/hcode/includes/highlight.js/8.9.1/highlight.pack.js"></script>
-->

<!-- for Common Langs (22): Apache, Bash, C#, C++, CSS, CoffeeScript, Diff, HTML, XML, HTTP, Ini, JSON, Java, JavaScript, Makefile, Markdown, Nginx, Objective C, PHP, Perl, Python, Ruby, SQL -->

<!-- Local -->
<link rel="stylesheet" href="ext/c61/hcode/includes/highlight.js/8.9.1/common/styles/default.css" type="text/css" />
<script type="text/javascript" src="ext/c61/hcode/includes/highlight.js/8.9.1/highlight.pack.js"></script>

<!-- CDN: cdnjs -->
<!--
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
-->

<!-- CDN: jsdelivr -->
<!--
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.9.1/styles/default.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.9.1/highlight.min.js"></script>
-->


Распаковать архив и залить папку со всем содержимым в каталог /ext/c61/hcode/includes/highlight.js/
highlight_8.9.1.zip
(170.31 КБ) Скачиваний: 900

Аватара пользователя
c61
Разработчик модов
Сообщения: 249
Зарегистрирован: 24.08.13 16:46

c61 » 16.11.15 09:03

Т.е. это уже реализовано?
Уже отвечал на этот вопрос: Да.
Predator писал(а):У меня на форуме сделан BBcode [icode] типа однострочный инлайновый код...
Попробуйте в <code> добавить класс "hljs nohighlight":

Код: Выделить всё

<code class="hljs nohighlight">

Predator писал(а):Сейчас у меня по-умолчанию выбрана подстветка кода php, но подсвечивает он как-то странно, явно не php
php автоматом плохо распознаётся, highlightjs на нём глючит, лучше поставьте по умолчанию xml. При явном указании php глюков нет.
Predator писал(а):Отсюда вопрос, зачем дублировать ссылку и какой в ней сокральный смысл?!
Одно дело разворот по вертикали, другое - по горизонтали. А нужно ли показывать ссылки в зависимости от высоты окна и ширины строк - реализовано лишь частично.

Аватара пользователя
Predator
Сообщения: 109
Зарегистрирован: 06.11.15 13:59

Predator » 16.11.15 10:36

c61 писал(а):Попробуйте в <code> добавить класс "hljs nohighlight"

Не помогло.

Аватара пользователя
c61
Разработчик модов
Сообщения: 249
Зарегистрирован: 24.08.13 16:46

c61 » 16.11.15 10:47

Predator писал(а):Не помогло.
Хммм... Наверно раскраска ушла, но code блочный, поэтому на отдельной строке. Проверил нижеприведенный код, вроде нормально, может с display поиграться (в лоб, потом можно облагородить):

Код: Выделить всё

<code class="hljs nohighlight" style="display:inline">

Аватара пользователя
Predator
Сообщения: 109
Зарегистрирован: 06.11.15 13:59

Predator » 16.11.15 12:30

Попробую поиграюсь конечно со стилями.

Добавлено спустя 14 минут 54 секунды:
Добавил к стилю своего icode

Код: Выделить всё

vertical-align: middle!important; display: inline-block!important
и всё стало нормально :)

Аватара пользователя
Predator
Сообщения: 109
Зарегистрирован: 06.11.15 13:59

Predator » 12.09.22 11:39

Shredder, Привет!
Ты не в курсе, есть ли у расширения такой функционал (если нет, как добавить?), если ввести знак равно после code и поставить единицу, то окно с кодом отображается развёрнутым независимо от настроек в админке.

Код: Выделить всё

[code=1]

Ответить