Подсветка кода uCoz - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


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

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

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

Установка:

1. Нужно разместить внизу всех страниц (где нужна работа скрипта) перед закрывающим тегом </body> этот скрипт:
Для начало нам следует разместить в низ вашей страницы перед закрывающим тегом
</body>  следующий js:
Code
<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++


Code
/* Подсветка кода          
------------------------------------------*/          
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;          
}

Важно!

При копировании материала указывать ссылку на источник.

- 414
- 14-Декабря-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта