Подсветка синтаксиса в BBCode - code

Идём в overall_header.html, найти </head>, добавить перед:

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

<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<script type="text/javascript">
// <![CDATA[
	function highlightInit() {
		var boxes = document.getElementsByTagName('code');
		for (i = 0; i < boxes.length; i++) {
			if (boxes[i].innerHTML.indexOf('<span') < 0) {
				hljs.highlightBlock(boxes[i], null, true);
			}
		}
	}
	onload_functions.push('highlightInit()');
// ]]>
</script>
Потом идём в тему вашего стиля, добавляем:

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

dl.codebox code {
  color: #333333;
}
dl.codebox .no-highlight, dl.codebox .undefined {
    color: #00517F;
}
dl.codebox .ruby .subst, dl.codebox .tag, dl.codebox .tag .title, dl.codebox .lisp .title {
    color: #0000FF;
}
dl.codebox .attribute {
    color: #FF0000;
}
dl.codebox .rule .attribute {
    color: #8080C0;
}
dl.codebox .rule .value {
    color: #000000 !important;
}
dl.codebox .pseudo {
    color: #FF8000 !important;
}
dl.codebox .value .number {
    color: #000000 !important;
}
dl.codebox .important {
    color: #FF0000 !important;
}
dl.codebox .class {
    color: #FF0000;
}
dl.codebox .id, dl.codebox .at_rule .keyword {
    color: #0080FF !important;
}
dl.codebox .value {
    color: #8000FF !important;
}
dl.codebox .variable {
    color: #000080;
}
dl.codebox .string, dl.codebox .title, dl.codebox .constant, dl.codebox .parent, dl.codebox .tag .value, dl.codebox .rules .value, dl.codebox .rules .value .number, dl.codebox .preprocessor, dl.codebox .ruby .symbol, dl.codebox .ruby .symbol .string, dl.codebox .ruby .symbol .keyword, dl.codebox .ruby .symbol .keymethods, dl.codebox .instancevar, dl.codebox .aggregate, dl.codebox .template_tag, dl.codebox .django .variable, dl.codebox .smalltalk .class, dl.codebox .addition, dl.codebox .flow, dl.codebox .stream, dl.codebox .bash .variable, dl.codebox .apache .tag, dl.codebox .apache .cbracket, dl.codebox .tex .command, dl.codebox .tex .special, dl.codebox .erlang_repl .function_or_atom {
    color: #800080;
}
dl.codebox .comment, dl.codebox .annotation, dl.codebox .template_comment, dl.codebox .diff .header, dl.codebox .chunk {
    color: #008000;
    font-style: italic;
}
dl.codebox .number {
    color: #FF6000;
}
dl.codebox .regexp {
    color: #8000FF; /* Only JS? */ 
}
dl.codebox .literal {
    color: #0000C0; /* Only JS? */ 
}
dl.codebox .function .title {
    color: #000000; /* JS */ 
}
dl.codebox .date, dl.codebox .smalltalk .symbol, dl.codebox .smalltalk .char, dl.codebox .go .constant, dl.codebox .change {
    color: #008800;
}
dl.codebox .label, dl.codebox .javadoc, dl.codebox .ruby .string, dl.codebox .decorator, dl.codebox .filter .argument, dl.codebox .localvars, dl.codebox .array, dl.codebox .attr_selector, dl.codebox .important, dl.codebox .pseudo, dl.codebox .pi, dl.codebox .doctype, dl.codebox .deletion, dl.codebox .envvar, dl.codebox .shebang, dl.codebox .apache .sqbracket, dl.codebox .nginx .built_in, dl.codebox .tex .formula, dl.codebox .erlang_repl .reserved, dl.codebox .input_number {
    color: #8888FF;
}
dl.codebox .css .tag, dl.codebox .javadoctag, dl.codebox .phpdoc, dl.codebox .yardoctag {
    /*font-weight: bold;*/ 
}
dl.codebox .keyword, dl.codebox .id, dl.codebox .phpdoc, dl.codebox .title, dl.codebox .built_in, dl.codebox .aggregate, dl.codebox .smalltalk .class, dl.codebox .winutils, dl.codebox .bash .variable, dl.codebox .apache .tag, dl.codebox .go .typename, dl.codebox .tex .command {
    color: #0000FF;
    /*font-weight: bold;*/ 
}
dl.codebox .phpdoc {
    color: #008000;
}
dl.codebox .javascript .keyword {
    color: #0000C0; /* ? */ 
}
dl.codebox .nginx .built_in {
    font-weight: normal;
}
dl.codebox .xml .css, dl.codebox .xml .javascript, dl.codebox .xml .vbscript, dl.codebox .tex .formula {
    opacity: 0.8;
 /* font-style: italic; */ 
}
Естественно цвета можно поменять на свои.

Если нужна кнопка - Развернуть-Свернуть, то скрипт в overall_header.html меняем на:

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

<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<script type="text/javascript">
// <![CDATA[
	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 (i = 0; i < boxes.length; i++) {
			if (boxes[i].innerHTML.indexOf('<span') < 0) {
				hljs.highlightBlock(boxes[i], null, true);
			}
			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>';
			}
		}
	}
	onload_functions.push('highlightInit()');
// ]]>
</script>
Учтите также, что автоопределение языка в Highlight.js часто ошибается. Например, PHP сплошь и рядом принимается за Perl. Чтобы ошибок было меньше, сделайте свою сборку Highlight.js, содержащую только те языки, которые вам необходимы.
Автор: Nekstati
Комментарии: 2

ArtProСемен 28 июл 2012, 15:52 Сообщение

А как это реализовать на клоне шаблонов SubSilver2?

Этот скрипт работает только на клонах Prosilve.
  • 0

xaocZ 28 июл 2012, 17:41 Сообщение

Если только этим - http://форумподдержки.рф - пользоваться :unknown
  • 0
Never opened myself this way
Life is ours, we live it our way
All these words I don't just say
And nothing else matters

Metallica - Nothing Else Matters

Похожие темы