» »

Подсветка кода светлого дизайна uCoz


Подсветка кода светлого дизайна uCoz

Реальная и красивая подсветка кода для сайта светлого дизайна системы uCoz. Которая сделана очень грамотно и не нужно не чего закачивать на сайт и все корректно отражается. Думаю многие скажут, когда есть подсветка, то сам код просматривать намного легче. И для этого хотят по интернету и найти по сути хорошую, чтоб срабатывало мгновенно почти не возможно. Но вот поделился со мной администратор сайта веб мастер, и установил код и стили, чтоб было реально видно. И скажу, совершенно другой вид на сайте стал, если есть скрипт и вы заходите, то визуально это намного лучше, чем все будет темное. А здесь все распределено по классом и у каждого знака, свой оттенок.

Установка:

Этот код ставим перед тегом /b0dy что в самом низу, и ставим там, где располагаются скрипты. Но они у меня на каталоге файлов, значит поставил вид материала и комментарий к нему и был прописан.

Код
<script src="http://zornet.ru/Ajaxoskrip/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;  
}


Все работает так как изображение было взято сайта, где устанавливал.
24.12.2015 Просмотров: 463 Комментарий: (23)

Поделиться в социальных сетях

Материал разместил

Комментарий: 23
Kvint
Kvint 24.12.2015 20:271
0
А при чем здесь скрипт выделить все, его же нужно ставить в низ сайта.
Kosten
Kosten 24.12.2015 20:362
0
Это точно подмечено, но думал, что работать будет. И с низ сайта убрал, и не появилась надпись выделить все. Что просто сейчас убрал этот скрипт, который отвечает за выделить код и оставил только этот.

Код
<script src="http://zornet.ru/Ajaxoskrip/uLight.js"></script>


И вот как на изображение стоит. Но не исключаю, у кого этой функций нет, возможно появиться, если не появится, то можно убрать.

FeStemBer
FeStemBer 24.12.2015 20:443
+1
Но а так бы не плохо было бы, чтоб не ставить в низ сайта.

Во общем теперь так устанавливаем.

Вид материала и комментариев к нему ставим скрипт перед /body

Код
<script src="http://zornet.ru/Ajaxoskrip/uLight.js"></script>


А потом стили.



Но как то так теперь.
Kosten
Kosten 24.12.2015 22:4121
0
Вот это правильно, но думаю нужно будет перенести в материал, то есть люди, которые не читают комментарий и потом пишут и задают вопросы.
Kosten
Kosten 24.12.2015 20:484
0
Но тогда и примечание по этому материалу, как сделан, что по весу было снижено и на каких браузерах работает.

Примечание:

Kvint
Kvint 24.12.2015 20:505
0
Все работает, спасибо, давно хотел поставить, да только не попадался код. От гугл не понял как там устанавливают.
Kosten
Kosten 24.12.2015 20:526
0
Kvint, ты поставил как написано, без выделение кода?
Kvint
Kvint 24.12.2015 20:599
0
Да убрал скрипт выделить все, так как у меня уже есть, попробовал также, с низа убрал и поставил полностью код, но не появилось.
AnTron
AnTron 24.12.2015 20:557
0
То что нужно, работает отлично, но думаю у кого интернет слабый, то они могут застать скрипт еще темный, но потом он станет цветным.
nikolla76
nikolla76 24.12.2015 20:588
0
А что сразу бы под темный дизайн не сделать, этот явно не подойдет, разон на светлом, может есть на сайте такой скрипт.
Kvint
Kvint 24.12.2015 21:0110
0
С правой стороны есть поиск по сайту, что учить как маленьких, тут скриптов много, явно все можно не упомнить.
Kosten
Kosten 24.12.2015 21:0111
0
Точно не скажу, мне кажется нет такого, но не утверждаю.
Kosten
Kosten 24.12.2015 22:4222
0
nikolla76, реально постараюсь найти, просто в интернете искать, лучше у знакомых поспрашивать в этом случай.
ZruBkul
ZruBkul 24.12.2015 21:0412
0
Что то у меня все как было, так и осталось, не говорю что не работает, как вижу, возможно что то не так.
Сопрано
Сопрано 24.12.2015 21:0613
0
ZruBkul, попробуй просто обновить страницу, может в этом дело, Вообще когда что то устанавливаем, то не забываем обновлять.
ZruBkul
ZruBkul 24.12.2015 21:1014
0
Trantel, спасибо, все пошло как нужно, теперь также как здесь все.
1 2 »
avatar