Подсветка кода uCoz
827материалов
228тем на форуме
3003комментария
6152пользователя

Подсветка кода uCoz


Описание:

Изначальный вид блоков цитат и кода в uCoz очень примитивный, поэтому чисто визуально я его немного модернизировал еще давно. Но все же на многих более солидных сайтах замечал еще более продвинутый их вид - с подсветкой, нумерацией и другими полезными мелочами. Сам я такое сделать конечно уже не мог, поэтому искал готовые решения, поскольку хотелось что-то подобное и у себя видеть. Те скрипты что раньше находил - были какими то слишком большими и не хотелось отягощать ими сайт. Поэтому тогда я это бросил.

Но сейчас опять решил попробовать, сперва нашел и установил вариант от Studio-AD, но у них во-первых много лишнего, во-вторых код CSS не подсвечивается почему-то. Поэтому стал искать что-нибудь другое и наткнулся на скрипт от Center-DM. Их код является адаптацией варианта подсветки от google-code для uCoz. Он оказался рабочим, хоть и выглядит попроще, но и ничего лишнего нет зато. Весит скрипт немного, ощутимых тормозов на странице не создает.

Сразу скажу, что в качестве демо - мой сайт, поскольку подсветку эту я поставил себе, она меня вполне устраивает и я ее оставлю. Ну а теперь перейдем к установке.

Установка:

1. Нужно разместить внизу всех страниц (где нежна работа скрипта) перед закрывающим тегом </body> этот скрипт:
Для начало нам следует разместить в низ вашей страницы перед закрывающим тегом следующий js:
Код
<script src="http://webmaster-ucoz.ru/ucoz/1/js/uLight.js"></script>          
<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.innerHTML;          
s=s.replace(/>Код</g,'><a href="#" onclick="selectCode(this);return false;">Выделить всё<\/a><').replace('<!--uzc-->','<!--uzc--><code>').replace('<!--\/uzc-->','<\/code><!--\/uzc-->');          
codediv.innerHTML=s;}}          
$(function() {prettyPrint();});          
</script>
Как вы понимаете мы с вами подключили основной скрипт отвечающий за подсветку синтаксиса кода uCoz и скрипт выделения кода в основной ячейки.

Шаг 2 - Установим CSS:
Теперь нам следует прописать css стили ячейки с кодом и саму подсветку определённых тегов, для белого варианта я решил создать подсветку схожую с подсветкой кода в программе Notepad++
Код
/* Подсветка кода          
------------------------------------------*/          
div .codeMessage .nocode {background-color:none; color: #555 }          
div .codeMessage .str {color: #cd5c5c } /* string - pink */          
div .codeMessage .kwd {color: #000080; font-weight: bold }          
div .codeMessage .com {color: #00853E } /* comment - skyblue */          
div .codeMessage .typ {color: #00853E } /* type - lightgreen */          
div .codeMessage .lit {color: #cd5c5c } /* literal - darkred */          
div .codeMessage .pun {color: #555 } /* punctuation */          
div .codeMessage .pln {color: #555 } /* plaintext */          
div .codeMessage .tag {color: #5c71cd; font-weight: bold } /* html/xml tag - lightyellow */          
div .codeMessage .atn {color: #cd5c5c; font-weight: bold } /* attribute name - khaki */          
div .codeMessage .atv {color: #555} /* attribute value - pink */          
div .codeMessage .dec {color: #98fb98 } /* decimal - lightgreen */          

/* Specify class=linenums on a pre to get line numbering */          
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */          
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type:none }          

/* Alternate shading for lines */          
li.L1,li.L3,li.L5,li.L7,li.L9 { }          

/* Выделение кода          
------------------------------------------*/          
/* webkit, opera, IE9 */          
.codeMessage ::selection {          
          background:#C0C0C0;          
}          
/* mozilla firefox */          
.codeMessage ::-moz-selection {          
          background:#C0C0C0;          
}

Примечание:

Хочу отметить, что данное решение тестировалось в браузерах:
  • Firefox 12.0
  • Google Chrome 18.0
  • Opera 11.0
  • Apple Safariне меньше версии 5.1
  • Internet Explorer 8 и 9
Плюсы данного решения:

  • Во-первых, адаптация под системный html код uCoz данного js, нам не надо прописывать вручную тег pre, достаточно воспользоваться стандартной функцией uCoz в bb панели, CODE.
  • Во-вторых, код отображается с отступами каждой строки, другие решения прописывают весь код в одно строку, что жутко неудобно.
  • В-третьих, мы получаем понятное копирование кода путём его выделения, нам не надо открывать дополнительные окна или подключать флеш плагин для его копирование в буфер.
Минусы данного решения:

  • Во-первых, большой вес основного js файла, 54кб, мне удалось его сжать до 22 кб в данном примере.
  • Во-вторых, при написании css кода в одну строку, цвет всего кода окрашивается в один цвет.

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 28.08.2016 в 12:30
Материал просмотрен: 1423 раза
Категория материала: Скрипты для uCoz
К материалу оставлены: 4 комментария

Пожаловаться
Сказать спасибо

4 комментария


Kosten
Kocsten @Kosten 19.12.2015 15:591
+3
Ссылка битая на ***
Ромчик
Хорошо, исправил!
vladim-paramon
Как заказать установку скрипта? В форме написано что только с сентября.
Ромчик
Если написано с сентября, значит с сентября. Заказать установку можете тут https://upartner.pro/
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта