Подсветка html-кода от google-code для uCoz

3204 просмотров Alan_Writer 15.05.2013

Скачать 📥

Всем привет, в прошлом посте, мы с вами разобрали внешний вид отображение кода функции под названием CODE, а в этом посте как я и обещал, мы подключим подсветку синтаксиса кода uCoz.

Это первое решение которое попалось под мою руку, в интернете существуют и другие решения подсветки кода, но я начну с этого и в будущем буду делать определённые выводы после тестирование на своём блоге, дабы выделить лучший вариант. Но сегодня мы будем ставить подсветку синтаксиса net.tutsplus.com который мне пришлось адаптировать под uCoz.

Шаг 1 - Установим JS:

Для начало нам следует разместить в низ вашей страницы перед закрывающим тегом следующий js:
Код
<script src="http://www.center-dm.ru/ucoz/vid_code/podsvetka_v1/backlight_code.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[i].innerHTML;  
  s=s.replace(/>Code</g,'><a href="#" onclick="selectCode(this);return false;">Выделить всё<\/a><').replace('<!--uzc-->','<!--uzc--><code>').replace('<!--\/uzc-->','<\/code><!--\/uzc-->');  
  codediv[i].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 кода в одну строку, цвет всего кода окрашивается в один цвет.

    В целом на этом всё, спасибо за внимание!

  • Теги: Подсветка html-кода, google-code, для uCoz, код, подсветка, code
    0 Комментариев