Приветствую Вас Прохожий | RSS Понедельник, 05.12.2016, 21:41
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 21
Гостей: 20
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

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

Подсветка кода uCoz от google-code Подсветка, кода, uCoz, от, google скрипт code
В этом посте мы узнаем, как благодаря google-code, мы сможем создать свою собственную подсветку кода для сайтов сделанных в системе uCoz.

Шаг 1 - Установим JS:
Для начало нам следует разместить в низ вашей страницы перед закрывающим тегом </body> следующий js:
JS
Code
<br><script src="http://istyle.pp.ua/img/color_code.js"></script> <br><script type="text/javascript"> <br>function selectCode(a){ <br>var e=a.parentNode.parentNode.getElementsByTagName('code')[0]; <br>if(window.getSelection){ <br>var s=window.getSelection(); <br>if(s.setBaseAndExtent){ <br> s.setBaseAndExtent(e,0,e,e.innerText.length-1); <br>}else{ <br>var r=document.createRange(); <br> r.selectNodeContents(e); <br> s.removeAllRanges(); <br> s.addRange(r);} <br>}else if(document.getSelection){ <br>var s=document.getSelection(); <br>var r=document.createRange(); <br> r.selectNodeContents(e); <br> s.removeAllRanges(); <br> s.addRange(r); <br>}else if(document.selection){ <br>var r=document.body.createTextRange(); <br> r.moveToElementText(e); <br> r.select();}} <br>// Замена Code на Выделить всё... <br> codediv=document.getElementsByTagName('div'); <br>for(i=0;i<codediv.length;i++){ <br>if(codediv[i].className=="bbCodeBlock"){ <br> s=codediv[i].innerHTML; <br> s=s.replace(/>Code</g,'><a href="#" onclick="selectCode(this);return false;">Выделить всё<\/a><').replace('<!--uzc-->','<!--uzc--><code>').replace('<!--\/uzc-->','<\/code><!--\/uzc-->'); <br> codediv[i].innerHTML=s;}} <br> $(function() {prettyPrint();}); <br></script>

Как вы понимаете мы с вами подключили основной скрипт отвечающий за подсветку синтаксиса кода uCoz и скрипт выделения кода в основной ячейки.
Шаг 2 - Установим CSS:
Теперь нам следует прописать css стили ячейки с кодом и саму подсветку определённых тегов, для белого варианта я решил создать подсветку схожую с подсветкой кода в программе Notepad++
CSS-Code
Code
/* Подсветка кода <br> ------------------------------------------*/ <br> div .codeMessage .nocode {background-color:none; color: #555 } <br> div .codeMessage .str {color: #cd5c5c } /* string - pink */ <br> div .codeMessage .kwd {color: #000080; font-weight: bold } <br> div .codeMessage .com {color: #00853E } /* comment - skyblue */ <br> div .codeMessage .typ {color: #00853E } /* type - lightgreen */ <br> div .codeMessage .lit {color: #cd5c5c } /* literal - darkred */ <br> div .codeMessage .pun {color: #555 } /* punctuation */ <br> div .codeMessage .pln {color: #555 } /* plaintext */ <br> div .codeMessage .tag {color: #5c71cd; font-weight: bold } /* html/xml tag - lightyellow */ <br> div .codeMessage .atn {color: #cd5c5c; font-weight: bold } /* attribute name - khaki */ <br> div .codeMessage .atv {color: #555} /* attribute value - pink */ <br> div .codeMessage .dec {color: #98fb98 } /* decimal - lightgreen */ <br><br>/* Specify class=linenums on a pre to get line numbering */ <br> ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */ <br> li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } <br><br>/* Alternate shading for lines */ <br> li.L1,li.L3,li.L5,li.L7,li.L9 { } <br><br>/* Выделение кода <br> ------------------------------------------*/ <br>/* webkit, opera, IE9 */ <br>.codeMessage ::selection { <br> background:#C0C0C0; <br>} <br>/* mozilla firefox */ <br>.codeMessage ::-moz-selection { <br> background:#C0C0C0; <br>}</div><div align="center">

Примечание:
Хочу отметить, что данное решение тестировалось в браузерах:
Firefox 12.0
Google Chrome 18.0
Opera 11.0
Apple Safariне меньше версии 5.1
Internet Explorer 8 и 9
В архиве вы найдёте два варианта подсветки синтаксиса кода uCoz, для светлого и тёмного дизайна сайта.
Плюсы данного решения:
Во-первых, адаптация под системный html код uCoz данного js, нам не надо прописывать вручную тег pre, достаточно воспользоваться стандартной функцией uCoz в bb панели, CODE.
Во-вторых, код отображается с отступами каждой строки, другие решения прописывают весь код в одно строку, что жутко неудобно.
В-третьих, мы получаем понятное копирование кода путём его выделения, нам не надо открывать дополнительные окна или подключать флеш плагин для его копирование в буфер.
Минусы данного решения:
Во-первых, большой вес основного js файла, 54кб, мне удалось его сжать до 22 кб в данном примере.
Во-вторых, при написании css кода в одну строку, цвет всего кода окрашивается в один цвет.
В целом на этом всё, спасибо за внимание!
Демо:
Автор\Источник: http://www.center-dm.ru/

Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 20.8Kb
Просмотров: 1819 | Комментарии: 2 | Рейтинг: 2.5/6 | |Категория: Скрипты Разное | Добавил: maksim | Дата: 17.05.2012 | Скачали: 6
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 2
2 wmysterio   Дата: 03.11.2013  Время: 01:52   [№ 15036]
Да, кописаст ещё тот )

К тому-же эту подсветку тяжело подстраивать под специфические скриптовые языки.

+1   Спам
1 мир   Дата: 17.05.2012  Время: 11:46   [№ 13038]
В последний раз я редактирую ваш копипаст, смотрите правила размещения, что за тупость выставлять описание на главной а новость без описания.. повторяю это было пследная новость от вас.


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru