Подсветка текста с блоками кода в форуме phpBB3

[PPK]

Существует библиотека google-code-prettify (http://code.google.com/p/google-code-prettify/) для подсветки текста кода (программы/скрипта) на странице, пример установки этой библиотеки в форум phpBB.

gprettify.zip

1. Скачать архив, распаковать, заменить файлы форума файлами из директории /root/
2. Переделать файлы:
styles/prosilver/template/bbcode.html заменить

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

<!-- BEGIN code_open --><dl class="codebox"><dt>{L_CODE}: <a href="#" onclick="selectCode(this); return false;">{L_SELECT_ALL_CODE}</a></dt><dd><code><!-- END code_open -->

на

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

<!-- BEGIN code_open --><dl class="codebox"><dt>{L_CODE}: <a href="#" onclick="selectCode(this); return false;">{L_SELECT_ALL_CODE}</a></dt><dd><code class="prettyprint linenums"><!-- END code_open -->

styles/prosilver/template/overall_header.html после

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

<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

добавить

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

<link href="{ROOT_PATH}/tracker/addons/css/gprettify/prettify.css" rel="stylesheet" type="text/css" />

перед

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

</head>

добавить

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

<script src="{ROOT_PATH}tracker/addons/js/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(
	function()
	{
		prettyPrint();
	}
);
// ]]>
</script>

styles/subsilver2/template/bbcode.html заменить

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

<!-- BEGIN code_open -->
<div class="codetitle"><b>{L_CODE}:</b></div><div class="codecontent">
<!-- END code_open -->

на

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

<!-- BEGIN code_open -->
<div class="codetitle"><b>{L_CODE}:</b></div><div class="codecontent"><code class="prettyprint linenums">
<!-- END code_open -->

заменить

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

<!-- BEGIN code_close -->
</div>
<!-- END code_close -->

на

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

<!-- BEGIN code_close -->
</code></div>
<!-- END code_close -->

styles/subsilver2/template/overall_header.html после

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

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

добавить

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

<link href="{ROOT_PATH}/tracker/addons/css/gprettify/prettify.css" rel="stylesheet" type="text/css" />

перед

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

<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP and S_NEW_PM -->

добавить

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

<script src="{ROOT_PATH}tracker/addons/js/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(
	function()
	{
		prettyPrint();
	}
);
// ]]>
</script>

3. Обновить стили, очистиь кеш.
4. Скриншоты:
Отображение блока кода в стиле subsilver2 по умолчанию

Отображение блока кода в стиле subsilver2 после установки мода

пример работы так-же можно видеть на этом форуме.
5. Для библиотеки существует несколько стилей подсветки (http://google-code-prettify.googlecode. ... index.html), для смены стиля нужно в приведённом выше коде, вместо

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

<link href="{ROOT_PATH}/tracker/addons/css/gprettify/prettify.css" rel="stylesheet" type="text/css" />

использовать любой из следующих вариантов

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

<link href="{ROOT_PATH}/tracker/addons/css/gprettify/sons-of-obsidian.css.css" rel="stylesheet" type="text/css" />

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

<link href="{ROOT_PATH}/tracker/addons/css/gprettify/desert.css" rel="stylesheet" type="text/css" />

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

<link href="{ROOT_PATH}/tracker/addons/css/gprettify/sunburst.css" rel="stylesheet" type="text/css" />

--
Для работы мода так же необходимо подключение библиотеки jQuery.

[9CaraTT]

Спасибо! А можешь подсказать как на саб сильвере сделать "выделить всё" ? )

[PPK]

Как дополнение к этому моду:
styles/subsilver2/template/bbcode.html заменить

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

<!-- BEGIN code_open -->
<div class="codetitle"><b>{L_CODE}:</b></div><div class="codecontent">
<!-- END code_open -->

<!-- BEGIN code_close -->
</div>
<!-- END code_close -->

на

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

<!-- BEGIN code_open -->
<div><div class="codetitle"><b>{L_CODE}:</b> <a href="#" onclick="selectCode(this); return false;">{L_SELECT_ALL_CODE}</a></div><div class="codecontent"><code class="prettyprint linenums">
<!-- END code_open -->

<!-- BEGIN code_close -->
</code></div></div>
<!-- END code_close -->

styles/subsilver2/template/overall_header.html перед

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

$(document).ready(
	function()
	{
		prettyPrint();
	}
);

добавить

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

function selectCode(a)
{
	// 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();
	}
}

[k750]

Здравствуйте!Подскажите как изменить или добавить новый бб код

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

 чтоб он выглядел вот так
[img]http://forumimage.ru/uploads/20140224/139328105011502052.png[/img]
тоесть обрамлён в такую фиксированную рамку.Зарание спасибо.

[PPK]

встроенный бб-код code и так по умолчанию обрамляется в такую рамку (т.е. появляются полосы прокрутки) если его ширина/высота больше определённых значений.

[k750]

встроенный бб-код code и так по умолчанию обрамляется в такую рамку (т.е. появляются полосы прокрутки) если его ширина/высота больше определённых значений.

к сожалению у меня в 3.0.11 стиль subsilver2 нет такой опции...,если надо могу скрин выложить.

[PPK]

мм.. я у же и забыл, что в subsilver2 не так, /styles/subsilver2/theme/stylesheet.css после

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

.codecontent {

добавить

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

	overflow: auto;
	display: block;
	height: auto;
	max-height: 200px;
	white-space: normal;	

[k750]

мм.. я у же и забыл, что в subsilver2 не так

Спасибо Вам большое,всё работает.

[9CaraTT]

Когда на страничке несколько ббкодов

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

 в subsilver2, при нажатии ВЫДЕЛИТЬ ВСЁ выделяет только первый ббкод, а не тот возле которого нажал

[t4p2]

[quote="9CaraTT"]Когда на страничке несколько ббкодов

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

 в subsilver2, при нажатии ВЫДЕЛИТЬ ВСЁ выделяет только первый ббкод, а не тот возле которого нажал[/quote]
Ага... у меня так-же... Вы нашли решение?

У меня еще со стилями что-то не понятное творится.
Поумолчанию стиль используется [b]prettify.css[/b] ([url=http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html]Зашла на Gallery of themes for code prettify - выглядит красиво[/url])
т.е. выглядеть должно вот так:
[img]http://s8.hostingkartinok.com/uploads/images/2015/12/382257a2254c9c053740c59570c6e744.png[/img]

а у меня выглядит вообще не красиво:
[img]http://s8.hostingkartinok.com/uploads/images/2015/12/2e790f4cf5073e6bf70cb470adc87957.png[/img]

Текст в коде какой-то мелкий... Можно как-то сделать, чтобы одинаковый по размеру был с форумным текстом?