Красивый вид code + подсветка синтаксиса
1169 просмотров || Скачали 256 раз || Оставили 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
Теги
Модификация "Тем", "Ответов" и "Автора темы" Удобное добавление фотографии в фотоальбом Редактирование титула в uWnd-окне Модуль Спасибо для uCoz Раздвижной полноэкранный 3D-слайдер с помощью jQuery и CSS3 "Drag and drop" элементов сайта Замена админ-бара на свой / WoS-Bar Игра "Шарик" в Ajax Большой сборник иконок социальных сетей с psd Изменение кнопок "Редактировать" и "Удалить" на форуме Игра Doodle Jump у вас на сайте! Шаблон Мегатрон 2.0 Музыкальный шаблон для uCoz Очень красивый шаблон Ability Красивый вид опросов Новая версия скрипта "Арена" от Яндекс'а Флэш шаблон Travel Club Новый вид истории ЛС Быстрая смена аватара в uWnd окне PSD макет блога Psshablon Запрет на определенные слова в названии темы Улучшаем навигацию в личных сообщениях Блочный вид форума Любое количество дополнительных полей для Каталога Файлов Рип шаблона sstalkers.ru + бонус Персональная страница пользователя в стиле Stalker Автоматическое заполнение тегов для всего сайта Генератор смайлов! Игровой шаблон Crea-Game Green для ucoz Эффект реалистичных дождевых капель на стекле через HTML5 Автоматическая подгрузка материалов Подробная информация об авторе материала Новая модер-панель для каталога файлов Рип шаблона Urip.Ru Рип игрового шаблона Acc-Team Красивый вид рейтинга материалов Карта "Сталкер Зов Припяти" v1.0 Скрипт изменения название модуля Красивый вид code + подсветка синтаксиса Красивый вид замечаний со шкалой Скрипт Генератора пароля при регистрации Новый вид отображения категорий Красивый флеш шаблон для uCoz Семейное положение из 1 поля AOL Вид соотношения гостей и пользователей Рип аякс окон Шаблон Awurs для сайтов World of Tanks Набор кистей "Курсоры" Быстрое редактирование материалов в каталоге файлов