Красивый вид code + подсветка синтаксиса
1161 просмотр || Скачали 252 раза || Оставили 0 комментариев


Скачать. Размер файла: 22.9 Kb

Измененный вид тега code с возможностью выделить код + подсветка синтаксиса от google-code.

Пример можно увидеть на нашем сайте, смотрится довольно неплохо и при этом нет ничего лишнего.

Для начала изменим внешний вид. Вставляем данный код себе в css:

Код

.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://wos.ucoz.com/winter-2015/bb-fon.png);  
  font:11px Verdana,Arial,sans-serif;
  text-align:left;
  color:#555;  
}


Если хотите, перезалейте фон к себе на сайт, вот картинка:

Далее установим кнопку "Выделить все". Заходим в ПУ → Управление дизайном → Каталог файлов → Страница материала и комментариев к нему, ищем там $MESSAGE$ и после него вставляем этот скрипт:

Код

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


Если не хотите ставить эту кнопку, но надпись "Код:" над кодом не нравится, то вставьте в css вот это:

Код

.bbCodeName {
  display:none;
}  


Теперь приступим к установке подсветки синтаксиса кода. Я немного перекрасил его, сделав более похожим на подсветку кода юкоз. Как по мне, так выглядит привычнее. Снова заходим (если успели закрыть) в "Страницу материала и комментариев к нему" и после ставим вот это:

Код

<script src="http://wos.ucoz.com/winter-2015/js/podsvetka_code.js"></script>


js файл прикрепил к материалу.
В css ставим:

Код

div .codeMessage .nocode {background-color:none; color: #555 }
div .codeMessage .str {color: #cd5c5c }  
div .codeMessage .kwd {color: #555; font-weight: bold }
div .codeMessage .com {color: #aa5500 }  
div .codeMessage .typ {color: #00853E }
div .codeMessage .lit {color: #aa1111 }  
div .codeMessage .pun {color: #000 }
div .codeMessage .pln {color: #aa1111 }  
div .codeMessage .tag {color: #117700; font-weight: bold }  
div .codeMessage .atn {color: #0000cc; font-weight: bold }
div .codeMessage .atv {color: #aa1111}
div .codeMessage .dec {color: #98fb98 }  

/* 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;


На этом установка заканчивается smile
Можно немного поиграть css и настроить цветовую схему под себя.

Провел небольшой редизайн - Endless

Автор: RuleZ-DM
Сайт автора: http://center-dm.ru



Категория: Каталог файлов | Добавил: Endless | Теги: для юкоз, подсветка кода, ucoz, подсветка синтаксиса, code
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт
Поиск по сайту
Случайная статья
Случайный материал
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Теги
Способы скрыть админ-бар Красивый вид опросов для uCoz Подборка Flash часов №3 Красивый вид замечаний со шкалой Универсальный анти-мат на весь сайт Шаблон Awurs для сайтов World of Tanks Предпросмотр добавляемого материала в Ajax окне для любого модуля Шаблон DoubleGame для uCoz Рип шаблона Urip.Ru "Drag and drop" элементов сайта Персональный дневник сталкера Раздвижной полноэкранный 3D-слайдер с помощью jQuery и CSS3 Запрет на определенные слова в названии темы Карта "Сталкер Зов Припяти" v1.0 Оригинал шаблона Info-Rip Быстрая смена аватара в uWnd окне Красивый вид рейтинга материалов Красивый вид и форма добавления комментариев Игра "Угадай число" Шаблон Counter Strike Удобная форма добавления комментариев Clip2net Подборка Flash часов №2 Модификация "Тем", "Ответов" и "Автора темы" Персональная страница пользователя в стиле Stalker Набор слайдеров для uCoz Добавление сообщения на форум без перезагрузки страницы Вид соотношения гостей и пользователей Рип вида материалов ucozabc.ru Музыкальный шаблон для uCoz Новый вид репутации + сортировка Новый вид отображения категорий Статусы в списке пользователей Скрипт "Арена" для сталкер-сайтов Скрипт Генератора пароля при регистрации Любое количество дополнительных полей для Каталога Файлов Новый вид истории ЛС Красивый флеш шаблон для uCoz Эмуляция нажатия правой кнопки мыши Красивый вид code + подсветка синтаксиса Автоматические баллы Красивый вид опросов Игра "Шарик" в Ajax Генератор смайлов! Улучшаем навигацию в личных сообщениях Новая модер-панель для каталога файлов Необычный вид комментариев Флэш шаблон Travel Club Вывод полного имени файла Эффект реалистичных дождевых капель на стекле через HTML5