).
phpBB 3.1.5+ extension
copyright (c) 2014 c61 c61@yandex.ru http://c61.su
license http://opensource.org/licenses/gpl-license.php GNU Public License
Hcode: Расширенный функционал ББ-кода code и подсветка синтаксиса
Создано по мотивам мода phpBB 3.0 hcode http://c61.su/forum/viewtopic.php?f=11&t=88
Расширение предназначено для расширения фунционала ББ-кода code, в том числе:
- сохранения кодов табуляции в публикуемом коде (в немодифицированной конференции табуляции заменятся на пробелы);
- добавления возможности расширения окошка кода по вертикали (при появлении прокрутки) и горизонтали;
- добавления возможности нумерации строк;
- подсветки синтаксиса кода с указанием языка (в том числе с автоматическим разпознаванием языка).
Установка
Копировать содержимое каталога 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, в этом случае следует отредактировать файл, добавив перед:код:
Код: Выделить всё
</body>Код: Выделить всё
<!-- 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> </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]
Скриншоты:
Тема на моей тестовой площадке тынц
