• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать подсветка кода для сайта uCoz
Создать подсветка кода для сайта uCoz
Kosten
Среда, 16 Марта 2016 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Создавая сайт, мы узнаем, что по умолчанию подсветка кода не идет с ним и ее нужно создавать. Здесь еще главный аспект, это тематика сайта, если вы скрипты будете заливать, то думаю вам пригодиться. А если простой блог под статьи, то она совершенно не нужна. Что первое хочется сказать за точно нужно поставить, это просто внешний вид, или все будет в темном, или стили и коды будут распределены но оттенку цвета.



И так начнем:

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 { }        

/* Выделение кода        
------------------------------------------*/        
/* 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

Есть здесь минус, просто весит больше чем нужно.
Прикрепления: 7219042.png (179.5 Kb)
Страна: (RU)
Kosten
Среда, 16 Марта 2016 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Теперь давайте перейдем к полному виду code для uCoz с подсветкой синтаксиса, где будет и тетрадная клетка, также можно сказать, чтоб не чего не искать а сделать так как на изображение. Тут немного просто больше добавить нужно, так как будет Подсветка синтаксиса с ней идет Нестандартный скроллинг но и сам вид дизайн.



Установка
Создайте папку images и загрузите файлы из нее через Файловый менеджер.

CSS:

Код
/* Вид Code */  
.bbCodeName {display:none}  
.bbCodeBlock {margin: 0;padding: 5px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-size:12px !important;background: #FFF url('/images/code.gif') !important;border: 1px solid #B5C1E8 !important;word-break: break-all;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px}  
.codeMessage {width:100%;padding:0;border: 0 !important; overflow:hidden}

/*Подсветка синтаксиса*/
.cssContainer {color: #FF00FF;}
.cssTag {color: #990099;}
.cssTag span {color: #006600 !important;}
.jsTag, .jsTag .blueColSimp {color: #990000 !important;}
.doct, .doct span {color: #009999 !important;}
.regExp, .regExp span {color: #006600 !important;}
.greenCol {color: #006600 !important;}
.blueCol {color: #0047BD !important;}
.dblueCol {color: #001199 !important;}
.blueColSimp {color: #0047BD;}
.pinkCol {color: #FF00FF !important;}
.redCol {color: #FF0000 !important;}
.lettuceCol {color: #009999 !important;}
.lettuceColSimp {color: #009999;}
.purpleCol {color: #990099 !important;}
.purpleColSimp {color: #990099;}
.orangeCol {color: #FF9900 !important;}
.invComm, .invComm span, .invComm .blueColSimp {color: #0047BD !important;}
.brackets {color: #0047BD !important;}
.commCol, .commCol span, .commCol.invComm, .commCol.blueColSimp {color: #999999 !important;}


Этот код нужно установить в нижнюю часть сайта.

Код
<script type="text/javascript" src="/images/jq.syntax.js"></script>


Таблицу стилей CSS:

Код
/* jscrollpane */

.jspContainer{overflow:hidden;position:relative}  
.jspPane{position:absolute}  
.jspVerticalBar{position:absolute;top:0;right:0;width:4px;margin-bottom:5px;height:100%;background:transparent}  
.jspHorizontalBar{position:absolute;bottom:0;left:0;width:100%;height:4px;background:transparent}  
.jspVerticalBar *,.jspHorizontalBar *{margin:0;padding:0}  
.jspCap{display:none}  
.jspHorizontalBar .jspCap{float:left}  
.jspTrack{background:transparent;position:relative}  
.jspDrag{background:rgba(0,0,0,.4);position:relative;top:0;left:0;cursor:pointer}  
.jspDrag{-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px}
.jspDrag:hover{background:rgba(0,0,0,.6)}  
.jspDrag:active{background:rgba(0,0,0,.8)}  
.jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag{float:left;height:100%}  
.jspArrow{background:#50506d;text-indent:-20000px;display:block;cursor:pointer}  
.jspArrow.jspDisabled{cursor:default;background:#80808d}  
.jspVerticalBar .jspArrow{height:16px}  
.jspHorizontalBar .jspArrow{width:16px;float:left;height:100%}  
.jspVerticalBar .jspArrow:focus{outline:none}  
.jspCorner{background:#eeeef4;float:left;height:100%}


И последнее, копируем и идем опять в низ сайта и там размещаем.

Код
<script type="text/javascript" src="/images/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="/images/jquery.mousewheel.js"></script>

<script type="text/javascript">jQuery(function() {jQuery('.codeMessage').jScrollPane({hideFocus:true});})</script>


Чтоб в корень сайта залить в папку, что в начале статьи написано, нужно скачать это файл и все оттуда в папку закинуть.
Прикрепления: 3906498.png (114.4 Kb)
Страна: (RU)
ucozmental
Среда, 16 Марта 2016 | Сообщение 3
Оффлайн
Пользователи
Сообщений:112
Награды: 0
Что то понять не могу, 2 материала, и ихз этого возникает, какой из них лучше ставить, то один грузит, думаю второй не то что грузит а топит.
Страна: (RU)
Scheme
Среда, 16 Марта 2016 | Сообщение 4
Оффлайн
Пользователи
Сообщений:157
Награды: 1
ucozmental, первый код как понял идет только чисто на подсветку, то к нему почему то привинтили Выделить всё видать будет, но это нормально.

Но а второй код, он вообще все меняет, будет фон тетрадного листа, также скорл узкий, но если менять полностью хотите, то второй подойдет, если все вам устраивает и нужна только подсветка, то первый.
Страна: (RU)
Сафрон
Среда, 16 Марта 2016 | Сообщение 5
Оффлайн
Vip
Сообщений:224
Награды: 1
Все правильно, кому нужно тот выберет что ему для сайта больше подойдет.
Страна: (RU)
Траст
Четверг, 28 Апреля 2016 | Сообщение 6
Оффлайн
Пользователи
Сообщений:101
Награды: 0
Вот это нужнон, и как на светлый, а на темном и под дизайн еще будет.

Быстро, дешево и сердито!
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать подсветка кода для сайта uCoz
  • Страница 1 из 1
  • 1
Поиск: