Измененный вид тега code с возможностью выделить код + подсветка синтаксиса от google-code.
Пример можно увидеть на нашем сайте, смотрится довольно неплохо и при этом нет ничего лишнего.
Для начала изменим внешний вид. Вставляем данный код себе в css:
Код
.bbCodeName {
padding:0!important;
margin-bottom:5px;
}
.codeMessage {
margin: 0px 0px 15px 0px;
padding:5px 10px;
border:1px solid #CEE7EC!important;
background:#fff url(http://wos.ucoz.com/winter-2015/bb-fon.png);
font:11px Verdana,Arial,sans-serif;
text-align:left;
color:#555;
}
Если хотите, перезалейте фон к себе на сайт, вот картинка:
Далее установим кнопку "Выделить все". Заходим в ПУ → Управление дизайном → Каталог файлов → Страница материала и комментариев к нему, ищем там
$MESSAGE$ и после него вставляем этот скрипт:
Код
<script type="text/javascript">
function selectCode(a){
var e=a.parentNode.parentNode.getElementsByTagName('code')[0];
if(window.getSelection){
var s=window.getSelection();
if(s.setBaseAndExtent){
s.setBaseAndExtent(e,0,e,e.innerText.length-1);
}else{
var r=document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);}
}else if(document.getSelection){
var s=document.getSelection();
var r=document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}else if(document.selection){
var r=document.body.createTextRange();
r.moveToElementText(e);
r.select();}}
// Замена Code на Выделить всё...
codediv=document.getElementsByTagName('div');
for(i=0;i<codediv.length;i++){
if(codediv[i].className=="bbCodeBlock"){
s=codediv[i].innerHTML;
s=s.replace(/>Code</g,'><a href="#" onclick="selectCode(this);return false;">Выделить всё<\/a><').replace('<!--uzc-->','<!--uzc--><code>').replace('<!--\/uzc-->','<\/code><!--\/uzc-->');
codediv[i].innerHTML=s;}}
$(function() {prettyPrint();});
</script>
Если не хотите ставить эту кнопку, но надпись "Код:" над кодом не нравится, то вставьте в
css вот это:
Код
.bbCodeName {
display:none;
}
Теперь приступим к установке подсветки синтаксиса кода. Я немного перекрасил его, сделав более похожим на подсветку кода юкоз. Как по мне, так выглядит привычнее. Снова заходим (если успели закрыть) в "Страницу материала и комментариев к нему" и после