Создавая сайт, мы узнаем, что по умолчанию подсветка кода не идет с ним и ее нужно создавать. Здесь еще главный аспект, это тематика сайта, если вы скрипты будете заливать, то думаю вам пригодиться. А если простой блог под статьи, то она совершенно не нужна. Что первое хочется сказать за точно нужно поставить, это просто внешний вид, или все будет в темном, или стили и коды будут распределены но оттенку цвета.
И так начнем:
1) Нужно поставить внизу всех страниц (где будут скрипты) перед закрывающим тегом этот скрипт. Но в моем случай сделал так, поставил в низ сайта и все.
Код
<script src="http://zornet.ru/SKRIPT/Kransel/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>
Это просто подключили самый основной скрипт, который и будет отвечать за все почти.
Теперь остались стили, где вся расцветка распределена в CSS.
Код
/* Подсветка кода ------------------------------------------*/ 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 { }
Теперь давайте перейдем к полному виду code для uCoz с подсветкой синтаксиса, где будет и тетрадная клетка, также можно сказать, чтоб не чего не искать а сделать так как на изображение. Тут немного просто больше добавить нужно, так как будет Подсветка синтаксиса с ней идет Нестандартный скроллинг но и сам вид дизайн.
Установка Создайте папку images и загрузите файлы из нее через Файловый менеджер.
ucozmental, первый код как понял идет только чисто на подсветку, то к нему почему то привинтили Выделить всё видать будет, но это нормально.
Но а второй код, он вообще все меняет, будет фон тетрадного листа, также скорл узкий, но если менять полностью хотите, то второй подойдет, если все вам устраивает и нужна только подсветка, то первый.
