ПРИВЕТСТВУЮ ВАС Гость| RSS
Заказать шапку
Заказать кнопки
Заказать иконки
Заказать аватар
Заказать аватар для ВК
Заказать рекламку
Заказать баннер
Заказать наградки
Заказать неопределенное
Гостевая книга
Наши друзья
Набор в команду
 Конкурсы, дуэли
Задать вопрос

ВНИМАНИЕ! ВНИМАНИЕ! ВНИМАНИЕ!

ФОРУМ ПЕРЕЕЗЖАЕТ НА ДРУГОЙ АДРЕС.
Сейчас ведется его реконструкция.

АДРЕС БУДЕТ ВЫЛОЖЕН ПОЗЖЕ!

Все заказы приняты в работу!


Забрать готовый заказ
Забрать готовую работу можно в соответствующих темах с заказами либо в Готовых работах.


Кто еще не забрал свой заказ - прошу забрать и отписаться об этом
Кликать каждый день
Рейтинг форумов Forum-top.ru
         

  • Страница 1 из 1
  • 1
Форум » ВСЕ ДЛЯ ДИЗАЙНА ВАШЕГО САЙТА » СКРИПТЫ ДЛЯ UCOZ » Подсветка синтаксиса кода от Google-Code
Подсветка синтаксиса кода от Google-Code
РОЗАРИДата: Вторник, 05 Февраля 2013, 21:08 | Сообщение # 1
Бог проекта
 Творец
Постов: 1381
Награды: 37  +
Монеты: 
38  ±
 Offline
Подсветка кода от Google-Code


Долго искала подобный код, который после установки еще и работал и наконец это свершилось)

1. Начнем с подключение JS:
ПУ - Управление дизайном (шаблоны) - Общий вид страниц форума
Размещаем этот код перед закрывающим тегом </body> :
Код
<script src="http://www.center-dm.ru/ucoz/vid_code/v2/code_cdm.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(/>Код</g,'><a href="#" onclick="selectCode(this);return false;">Выделить всё<\/a><').replace('<!--uzc-->','<!--uzc--><code>').replace('<!--\/uzc-->','<\/code><!--\/uzc-->');   
codediv[i].innerHTML=s;}}        
$(function() {prettyPrint();});
</script>

2. Теперь установим CSS:
Теперь нам следует прописать css стили ячейки с кодом и саму подсветку определённых тегов
Заходим в Таблицу стилей (СSS) и вставляем в самый низ
Код
/* Подсветка кода        
------------------------------------------*/        
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;        
}


3. Изменим внешний вид code
Заходим в Таблицу стилей (СSS) и вставляем в самый низ
Код
/* Ячейка с кодом        
------------------------------------------*/        
.bbCodeName {        
        padding:0!important; /* - запрещаем внутренние отступы */        
        margin-bottom:5px; /* - нижний внешний отступ */        
}        

.codeMessage {        
        margin: 0px 0px 15px 0px; /* - нижний внешний отступ */        
        padding:5px 10px; /* - внутренние отступы */        
        border:1px solid #CEE7EC!important; /* - рамка вокруг ячейки кода */        
        background:#fff url(http://www.center-dm.ru/sites/fon_code.gif); /* - фон ячейки кода*/        
        font:11px Verdana,Arial,sans-serif; /* - шрифт и его размер */        
        text-align:left; /* - прижимаем текст к правой стороне */        
        color:#555; /* - цвет текста */        
}


Жизнь коротка - Нарушай правила - Прощай быстро - Целуй медленно - Люби искренно - Смейся неудержимо. И никогда не сожалей о том, что заставило тебя улыбнуться...
 
Форум » ВСЕ ДЛЯ ДИЗАЙНА ВАШЕГО САЙТА » СКРИПТЫ ДЛЯ UCOZ » Подсветка синтаксиса кода от Google-Code
  • Страница 1 из 1
  • 1
Поиск:

Сегодня были:
Copyright РОЗАРИ, FantasyArt © 2024
При копировании материалов сайта ссылка на
источник обязательна!
Создать бесплатный сайт с uCoz
  Зефир, помощь ролевым The Dark Wood