Затем нужно сохранить любую страницу данного форума, на которой используется 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 + ' ';
}
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 += ' · <a href="#" onclick="expandCode(this); return false;">' + 'Развернуть' + '</a>';
}
}
}
onload_functions.push('expand_code_init()');
Использование BBcode
Код: Выделить всё
[syntax={TEXT1}]{TEXT}[/syntax]
Код: Выделить всё
<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]
Код: Выделить всё
<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>
Код: Выделить всё
/* 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. Наверняка не всё учтено, что-то сделано неграмотно, поэтому буду рад, если дополните.