Магазин
Правила Ответы на вопросы Конфиденциальность
Магазин
Правила Ответы на вопросы Конфиденциальность

Минимоды и хаки для phpBB3

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

Google code prettify - подсветка синтаксиса

Небольшие моды и хаки для форума phpBB3
Правила форума
При размещении мода/статьи взятой с другого форума/сайта обязательно необходимо указывать первоисточник сообщения.

Просмотры: 3804 • 
  • Аватара пользователя
    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 Сообщение
    Спасибо! А можешь подсказать как на саб сильвере сделать "выделить всё" ? )
    Последний раз редактировалось 9CaraTT 16 май 2012, 20:05, всего редактировалось 1 раз.
  • Аватара пользователя
    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 Сообщение
    PPK писал(а):встроенный бб-код 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 Сообщение
    PPK писал(а):мм.. я у же и забыл, что в subsilver2 не так
    Спасибо Вам большое,всё работает. :good:
  • Аватара пользователя
    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]

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

Вернуться в «Минимоды и хаки для phpBB3»

Time: 0.000s | Queries: 0 | Peak Memory Usage: 0.00 МБ | GZIP: Unknown | SQL Explain
Список форумов Участники темы