Страница 2 из 2

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 04 янв 2015, 16:02
CabinetAdmin
Расширение собственного производства, позволяющее подсвечивать программный код в стандартном bbcode [cоde].

Расширение не имеет никаких настроек, так сказать - включил и пользуйся.

Для подсветки был взят давно известный скрипт от google prettify.js и принцип раскрытия блока кода от Nekstati (phpbbguru).

Версия для phpBB 3.2 и 3.3
Скачать:
highlightjs-0.0.2.zip
20.61 КБ 89 скачиваний

Версия для phpBB 3.1
Скачать:
highlightjs.zip
20.57 КБ 401 скачивание
Никаких путей изменять не надо, просто распаковать в ext/. Путь должен быть таким ext/xaocz/highlightjs. Потом в управлении расширениями найти и включить HighlightJs.

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 18 янв 2016, 21:15
CabinetAdmin
Не подгружается файл prettify.js, либо его просто нет в папке, либо нет файла overall_footer_after в папке event.

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 19 янв 2016, 01:58
PowerStyle
Тоже так думал но он есть

путь к prettify.js
ext\xaocz\highlightjs\styles\prosilver\template

путь к overall_footer_after
ext\xaocz\highlightjs\styles\prosilver\template\event

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

<!-- EVENT overall_footer_after --> // прописывать в файле overall_footer.html?

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

<script type="text/javascript" src="{T_JQUERY_LINK}"></script>
<!-- IF S_ALLOW_CDN --><script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript src="{T_ASSETS_PATH}/javascript/jquery.min.js?assets_version={T_ASSETS_VERSION}" type="text/javascript"%3E%3C/script%3E'));</script><!-- ENDIF -->
<script type="text/javascript" src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>
<!-- INCLUDEJS forum_fn.js -->
<!-- INCLUDEJS ajax.js -->

<!-- EVENT overall_footer_after -->

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}

<!-- EVENT overall_footer_body_after -->

</body>
</html>

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 19 янв 2016, 16:55
CabinetAdmin
Хм.... В списке появился файл prettify.js, консоль начала ругаться на prettyPrint();... Если заглянуть в файл prettify.js, у него какое-то странное содержимое, всё в одну строку. :scratch: Я конечно не знаю, почему так, может из-за хостера, фиг его знает, но если дело всё таки именно в хостинге и чтобы запустить скрипт, придётся удалить все комментарии из файла. Комментарии такого плана:

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

// Copyright (C) 2006 Google Inc.
т.е. те которые с двумя косыми впереди.

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 20 янв 2016, 19:07
PowerStyle
Да вы правы, после удаление всех комментариев, ВСЕ ЗАРАБОТАЛО!

И еще один вопрос.
Можно настроить для шаблона subsilver2?
Создание \ext\xaocz\highlightjs\styles\subsilver2 - не помогает, я еще внутри шаблона subsilver2 - не смотрел

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 20 янв 2016, 20:41
CabinetAdmin
В сабсильвере работать не будет. Хотя я ещё ни разу не "щупал" саб на новой версии, но скорее всего ббкод в нём устроен также как и в прошлой...

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 15 окт 2017, 14:38
LEOPARD
CabinetAdmin, привет!
Я перешел на бесплатный хостинг getbb.
В общем путем редактирования файлов (не установкой этого расширения) мне удалось поставить подсветку кода, но есть проблема. Длинно строчный код не переводится на новые строки и нету спойлера.

Можете помочь мне его воткнуть так, как он должен работать? он очень важен для меня, т.к. у меня есть база твиков, а там сумасшедше длинные коды.

Есть таблица стилей, куда можно вписывать CSS:
+Скриншот
Есть шаблоны файлов:
+Скриншот
Единственный минус - нет доступа к файлам. Есть менеджер картинок и туда можно заливать и CSS и js, но как этот экст прикрутить и заставить работать правильно?
+Скриншот

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 16 окт 2017, 17:45
CabinetAdmin
Да там сложностей то никаких нет, в расширении только шаблонные правки.
Получается так: в футер перед </body> вставляете то, что находится в overall_footer_after, за исключением <!-- INCLUDEJS prettify.js -->, вместо него обычным:

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

<script type="text/javascript" src="путь до/prettify.js"></script>
Скрипт в менеджер и указываем путь.
Ну а стили в то поле для стилей, что у вас на скриншоте. Либо, так же как и скрипт, в менеджер и в хедере перед </head> добавить:

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

<link href="путь до/prettify.css" rel="stylesheet">
зы.
LEOPARD писал(а): Я перешел на бесплатный хостинг getbb.
А зачем? Если не секрет:)

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 16 окт 2017, 20:48
LEOPARD
CabinetAdmin писал(а): А зачем? Если не секрет:)
Ну у меня ребенок, а хост в 500р/мес. напрягал меня.

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 16 окт 2017, 20:51
LEOPARD
Вот, что у меня прописано в стилях:

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

/* Подсветка синтаксиса кода CODE prettify.js. */
.pln { color: #000 }  /* plain text */

@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #008000; font-style: italic;}  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #0000FF; }  /* a markup tag name */
  .atn { color: #FF0000;}  /* a markup attribute name */
  .atv { color: #8000FF !important;}  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 2px; border: 1px solid #888 }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */

/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #F8F8F8!important;}

.codebox {
	background: none;
	border-width: 0px;
}

.codebox code {
	background-color: #fff;
	padding: 0;
}

.codebox > p {
	border-bottom-width: 0;
	margin-bottom: 7px;
}

.codebox li {
	border-left: 3px solid #6CE26C;
	padding-left: 7px;
}
И вот, что прописано в шаблоне overall_footer_after.html

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

<!-- IF SCRIPT_NAME == "viewtopic" or SCRIPT_NAME == "posting" or SCRIPT_NAME == "ucp" or SCRIPT_NAME == "search" -->

<script type="text/javascript" src="/store/leopard_5nx_org/images/prettify.js"></script>
<script type="text/javascript">
//<![CDATA[
	jQuery(function($) {
		//'use strict';
		$('.codebox code').each(function() {
			$(this).addClass('prettyprint linenums');
		});

		prettyPrint();
	});
	
	function expandCode(e) {
		var c = e.parentNode.nextSibling;
		if (c.style.maxHeight == 'none') {
			c.style.maxHeight = '200px';
			e.innerHTML = '{L_EXPAND_VIEW}';
		}
		else {
			c.style.maxHeight = 'none';
			e.innerHTML = '{L_COLLAPSE_VIEW}';
		}
	}

	function highlightInit() {
		var boxes = document.getElementsByTagName('code');
		for (var 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;">{L_EXPAND_VIEW}</a>';
			}
		}
	}
	highlightInit();
// ]]>
</script>
<!-- ENDIF -->
Код подсвечивается, но спойлера нету :(
Изображение

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 17 окт 2017, 16:02
CabinetAdmin
А, код находится под спойлером. Ну да, есть такое. Когда код находится под спойлером скрипт почему-то не отрабатывает и кнопка "развернуть" не появляется. Тут на форуме точно так же. Почему - не разбирался. Попробую поправить это дело.

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 17 окт 2017, 16:12
LEOPARD
CabinetAdmin, я проверял, даже без спойлера не появляется.

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 17 окт 2017, 16:56
CabinetAdmin
Такс. По переносам, открыть content.css, найти:

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

.codebox code {
и добавить к нему:

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

	white-space: pre-wrap;
	word-wrap: break-word;
LEOPARD писал(а): я проверял
Ага, форум то на 3.2 оказывается. На 3.2 скрипт не отрабатывает, поскольку тег code немного другой.
Для 3.2 скрипт должен быть следующим:

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

<script type="text/javascript">
//<![CDATA[
	jQuery(function($) {
		//'use strict';
		$('.codebox code').each(function() {
			$(this).addClass('prettyprint linenums');
		});

		prettyPrint();
	});
	
	function expandCode(e) {
		var c = e.parentNode.nextSibling.firstChild;
		if (c.style.maxHeight == 'none') {
			c.style.maxHeight = '200px';
			e.innerHTML = '{L_EXPAND_VIEW}';
		}
		else {
			c.style.maxHeight = 'none';
			e.innerHTML = '{L_COLLAPSE_VIEW}';
		}
	}

	function highlightInit() {
		var boxes = document.getElementsByTagName('code');
		for (var i = 0; i < boxes.length; i++) {
			if (boxes[i].scrollHeight > boxes[i].offsetHeight + 1) {
				boxes[i].parentNode.previousSibling.innerHTML += ' &middot; <a href="#" onclick="expandCode(this); return false;">{L_EXPAND_VIEW}</a>';
			}
		}
	}
	highlightInit();
// ]]>
</script>
Под спойлером не будет работать или надо переписывать его так, чтобы скрытие происходило не с помощью display: none;.

HighlightJs - Подсветка кода в BBCode - [code]

Добавлено: 17 окт 2017, 18:14
LEOPARD
CabinetAdmin, ну теперь хоть длинные-однострочные коды начали вмещаться :)
Спасибо за поправку!
Ну а про кнопку развернуть, не критично. Главное, что теперь весь код видно :)