Уважаемые пользователи!
C 7 ноября 2020 года phpBB Group прекратила выпуск обновлений и завершила дальнейшее развитие phpBB версии 3.2.
С 1 августа 2024 года phpBB Group прекращает поддержку phpBB 3.2 на официальном сайте.
Сайт официальной русской поддержки phpBB Guru продолжит поддержку phpBB 3.2 до 31 декабря 2024 года.
С учетом этого, настоятельно рекомендуется обновить конференции до версии 3.3.

bbcode CODE в точности как на данном форуме.

Поддержка старых модов или модов, созданных авторами не из нашего сообщества, а также любые вопросы, связанные с модами для phpBB 3.0.x, кроме относящихся к форуму Для авторов (phpBB 3.0.x).
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Woland
phpBB 1.4.0
Сообщения: 32
Стаж: 10 лет 6 месяцев

bbcode CODE в точности как на данном форуме.

Сообщение Woland »

Расскажу, как я передирал с данного форума CODE с раскраской синтаксиса и какие особенности передрать пока не смог. Первым делом скачал отсюда дистрибутив highlight.zip, предварительно отметив все флажки (для поддержки максимального количества языков).
Затем нужно сохранить любую страницу данного форума, на которой используется CODE с подсветкой синтаксиса. Среди сохраненных файлов страницы есть файл npp.css, я переименовал его в phpbbguru.css и заменив внутри файла все pre на div.codebox pre, сохранил его в папку styles, имеющуюся внутри скачанного архива highlight.zip. Сам архив я распаковал в корневую директорию форума в папку highlight.

Уточню, что у меня на форуме используется нестандартный стиль whiteb, в котором отсутствует файл forum_fn.js, поэтому я сам создал данный файл и разместил его в папке шаблонов используемого у меня стиля [ROOT]/styles/whiteb/template/
Вот содержимое моего файла forum_fn.js:

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

/**
* phpBB3 forum functions
*/

function selectCode(a)
{
	// Timeout to prevent quick_quote()
	setTimeout(function() {

		// Get ID of code block
		var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];

		// Not IE and IE9+
		if (window.getSelection)
		{
			var s = window.getSelection();
			// Safari
			if (s.setBaseAndExtent)
			{
				s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
			}
			// Firefox and Opera
			else
			{
				// workaround for bug # 42885
				if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
				{
					e.innerHTML = e.innerHTML + '&nbsp;';
				}

				var r = document.createRange();
				r.selectNodeContents(e);
				s.removeAllRanges();
				s.addRange(r);
			}
		}
		// Some older browsers
		else if (document.getSelection)
		{
			var s = document.getSelection();
			var r = document.createRange();
			r.selectNodeContents(e);
			s.removeAllRanges();
			s.addRange(r);
		}
		// IE
		else if (document.selection)
		{
			var r = document.body.createTextRange();
			r.moveToElementText(e);
			r.select();
		}
	}, 0);
}


/**
* “Expand code” link in codeblock
*/
	function expandCode(e) {
	var c = e.parentNode.parentNode.getElementsByTagName('pre')[0];
		if (c.style.maxHeight == 'none') {
			c.style.maxHeight = '200px';
			e.innerHTML = 'Развернуть';
		}
		else {
			c.style.maxHeight = 'none';
			e.innerHTML = 'Свернуть';
		}
	}

function expand_code_init() {
	var boxes = document.getElementsByTagName('pre');
	for (i = 0; i < boxes.length; i++) {
		if (boxes[i].scrollHeight > boxes[i].offsetHeight + 1) {
			boxes[i].previousSibling.innerHTML += ' &middot; <a href="#" onclick="expandCode(this); return false;">' + 'Развернуть' + '</a>';
		}
	}
}
onload_functions.push('expand_code_init()');
Далее, я создал в админке bbcode:
Использование BBcode

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

[syntax={TEXT1}]{TEXT}[/syntax]
Замена HTML

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

<div class="codebox">
	<div>
Код:
		<a onclick="selectCode(this); return false;" href="#">Выделить всё</a>
·
		<a onclick="expandCode(this); return false;" href="#">Развернуть</a>
	</div>
	<pre><code class="{TEXT1}">{TEXT}</code></pre>
</div>
Подсказка

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

Блок code с подсветкой синтаксиса: [syntax=язык(c|css|delphi|sql|vb|xml|js|java|vhdl|bash|cf|csharp|diff|erl|groovy|jfx|pl|php|text|ps|python|ruby|scala|as3|...)] контекст [/syntax]
После этого открыл на редактирование шаблон overall_header.html (админка - стили - компоненты стилей - шаблоны - изменить - выбрать файл шаблона), перед </head> сделал вставку:

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

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<script type="text/javascript" src="{ROOT_PATH}/highlight/highlight.pack.js"></script>
<link rel="stylesheet" type="text/css" href="{ROOT_PATH}/highlight/styles/phpbbguru.css" />
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
И последнее, открываем на редактирование файл темы текущего стиля - stylesheet.css (админка - стили - компоненты стилей - темы - изменить - выбрать файл темы) и добавляем в конец

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

/* Code block */
.codebox {
	margin: 0.7em 0 0;
	padding: 3px;
	border: 1px solid #E0E0E0;
	border-left: 3px solid #95C07E;
	font-size: 1em;
	background: url("../imageset/bg_panel3.png") repeat-x scroll 0 0 #F4F8FE;
}

.codebox a {
    color: #2B98B7;
    text-decoration: none;
    direction: ltr;
    unicode-bidi: embed;
}

.codebox a:hover, .codebox a:active, .codebox a:focus {
   text-decoration: underline;
   color: #EC7500;
}

.codebox div {
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	padding-left: 3px;
	font-size: 0.8em;
	font-weight: bold;
	display: block;
}

.codebox pre {
	display: block;
	height: auto;
	max-height: 200px;
	overflow-y: auto;
	/* Prevent horizontal scrolling to fix IE8 overflow bug.
	This fix can be used only with white-space: pre-wrap & word-wrap: break-word. */
	overflow-x: hidden;
	margin: 2px 0;
	padding: 5px 0.3em 0;
	background: none;
	border: none;
	font: 0.9em/1.3em Consolas, "Lucida Console", "Liberation Mono", Menlo, monospace;
font-size:	11.65px;
	color: #00517F;
	white-space: pre-wrap;
	word-wrap: break-word;
	-moz-tab-size: 4; -o-tab-size: 4; -webkit-tab-size: 4; tab-size: 4;
}

.codebox code {
	padding: 0;
	background: none;
	border: none;
	font: inherit;
}
Данный стиль был выдран из сохраненных файлов страницы данного форума, но в блок .codebox pre { мне пришлось добавить font-size: 11.65px;, т.к. почему-то после компиляции стиля, размер шрифта подсвечиваемого текста не хотел быть равным размеру на данном форуме, пришлось принудительно установить размер.
Файл bg_panel3.png, на который есть ссылка из стиля, я взял отсюда и подложил в папку [ROOT]styles/whiteb/imageset/ используемого у меня стиля.

Далее следует обновить в кэше шаблоны, сбросить кэш форума и блок SYNTAX будет выглядеть и подсвечиваться как на данном форуме CODE.
Что сделать не удалось:
1. Размер шрифта ссылок ВЫДЕЛИТЬ ВСЕ, РАЗВЕРНУТЬ - не удалось сделать один в один, но "на глаз" разница не заметна.
2. Хочется сделать такую же кнопку CODE с выпадающим списком языков подсветки, но не знаю, как грамотно это сделать, буду благодарен, если кто проконсультирует.
3. Наверняка не всё учтено, что-то сделано неграмотно, поэтому буду рад, если дополните.
Закрыто

Вернуться в «Поддержка модов для phpBB 3.0.x»