Страница 2 из 2
HighlightJs - Подсветка кода в BBCode - [code]
Добавлено: 04 янв 2015, 16:02
CabinetAdmin
Расширение собственного производства, позволяющее подсвечивать программный код в стандартном bbcode [cоde].
Расширение не имеет никаких настроек, так сказать - включил и пользуйся.
Для подсветки был взят давно известный скрипт от google
prettify.js
и принцип раскрытия блока кода от Nekstati (phpbbguru).
Версия для phpBB 3.2 и 3.3
Скачать:
Версия для phpBB 3.1
Скачать:
Никаких путей изменять не надо, просто распаковать в 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, у него какое-то странное содержимое, всё в одну строку.
Я конечно не знаю, почему так, может из-за хостера, фиг его знает, но если дело всё таки именно в хостинге и чтобы запустить скрипт, придётся удалить все комментарии из файла. Комментарии такого плана:
т.е. те которые с двумя косыми впереди.
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 += ' · <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, найти:
и добавить к нему:
Код: Выделить всё
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 += ' · <a href="#" onclick="expandCode(this); return false;">{L_EXPAND_VIEW}</a>';
}
}
}
highlightInit();
// ]]>
</script>
Под спойлером не будет работать или надо переписывать его так, чтобы скрытие происходило не с помощью
display: none;
.
HighlightJs - Подсветка кода в BBCode - [code]
Добавлено: 17 окт 2017, 18:14
LEOPARD
CabinetAdmin, ну теперь хоть длинные-однострочные коды начали вмещаться
Спасибо за поправку!
Ну а про кнопку развернуть, не критично. Главное, что теперь весь код видно