CRE-ARTs
  • Авторизация

    ПАНЕЛЬ УПРАВЛЕНИЯ

    ! Гость (это Вы)

    • Регистрация
    • Забыл пароль?


    Рекомендуем пройти регистрацию, для удобства в использовании материалов.
  • Регистрация Забыл пароль?
Синие лента
Синие лента
Наш креативщик
CRE-ARTs.ru – ВЕБ-ДИЗАЙН И РАЗРАБОТКА САЙТОВ
На CRE-ARTs представленны лучшие шаблоны и скрипты,
собранные с различных источников в одном месте.
Наша почта: info@realarts.ru или art-creative@yandex.ru
  • Главная
  • Новости
  • Портфолио
  • Скрипты для uCoz
    • + Все скрипты
    • Разные скрипты
    • Мини - Чаты
    • Скрипты меню
    • Скрипты поиска
    • Статистика
    • Информеры и модули
    • Мини профили
    • Вид материалов и комментариев
    • Форма входа/регистрация
    • Персональные страницы
    • Переключатели и кнопки
    • Для форума
    • Коллекция слайдеров
  • Шаблоны для сайта
    • Шаблоны для uCoz
    • Шаблоны для форумов
    • HTML Шаблоны
    • Разные страницы
    • Студия S-ARTs
    • Студия elCreativo
    • Студия DCOReARTs
    • Студия SP-ARTs
    • Студия CENTROARTs
    • Студия RealARTs
    • Шаблоны разных CMS
  • Раздел дизайна
    • PSD исходники
    • PSD макеты
    • Верстка макетов
    • Статьи о Веб-Дизайне
  • Статьи
    • Статьи вебмастеру
    • Учебник SEO
    • Справочник ВебМастера
    • Руководство по раскрутке сайтов
    • Разное
  • Отзывы
  • Наши контакты
  • Правообладателям
  • Правила сайта
  • О нас
Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

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

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.
17 Марта 2014 Подробнее
Свернуть

Прямой эфир

  • artCreative
    Пользователь: artCreative
    В раздел по теме: Вид материалов как на Pinterest
    Посмотрите источник тут
    или аналогичный пост тут
  • artCreative
    Пользователь: artCreative
    В раздел по теме: Ссылка на источник при копировании текста
    Проверим, в ближайшее время исправим
  • muxa
    Пользователь: muxa
    В раздел по теме: Ссылка на источник при копировании текста
    Не работает
  • muxa
    Пользователь: muxa
    В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
    Все работает класс
  • muxa
    Пользователь: muxa
    В раздел по теме: Всплывающее меню на чистом CSS
    Не работает
  • muxa
    Пользователь: muxa
    В раздел по теме: Шаблон Фотошоп-Мастер
    Там ничего не работает.Тупо скачал и удалил.
  • vovany
    Пользователь: vovany
    В раздел по теме: Уникальная страница технических работ для uCoz
    только что вот заметил, что некорректно отображаются надписи под отсчетом...
Свернуть

Статистика


Всего в онлайне: 1
Юзеров: 1
Пользователей: 0
Пользователи
Гости сайта
  • Онлайн
  • Кто был
  • СЧ
[Статистика недоступна]

  
Всего пользователей: 1492 +0
Всего материалов [?]: 1434 + -
Новости: 12
Комментарии: 325
Статьи: 667
Файлы: 430
Полный список
Свернуть

Список категорий

  • Главная
  • Новости
  • Скрипты для uCOZ
    • + Все скрипты
    • Разные скрипты
    • Мини - Чаты
    • Скрипты меню
    • Скрипты поиска
    • Статистика
    • Информеры и модули
    • Мини профили
    • Вид материалов и комментариев
    • Форма входа/регистрация
    • Персональные страницы
    • Переключатели и кнопки
    • Для форума
    • Коллекция слайдеров
  • Шаблоны для сайтов
    • Шаблоны для uCoz
    • Шаблоны для форумов
    • HTML Шаблоны
    • Разные страницы
    • Студия S-ARTs
    • Студия elCreativo
    • Студия DCOReARTs
    • Студия SP-ARTs
    • Студия CENTROARTs
    • Студия RealARTs
    • Шаблоны разных CMS
  • Рубрики
    • Статьи вебмастеру
    • Учебник SEO
    • Справочник ВебМастера
    • Руководство по раскрутке сайтов
    • Разное
  • Дизайн
    • PSD исходники
    • PSD макеты
    • Верстка макетов
    • Статьи о Веб-Дизайне
  • Портфолио

  • Группа ВКонтакте
  • Группа в Facebook
  • Группа в twitter

  • Для посетителей...
    • О нас
    • Наши баннеры
    • Правила сайта
    • Правообладателям
    • Отзывы
Свернуть

Опечатка

E-mail отправителя *:
Тема письма:
Текст сообщения *:

Если Вы обнаружили опечатку в тексте, выделите текст с ошибкой
и нажмите на кнопку
Опечатка
Свернуть

Вместе с нами

  • Cre-ARTs - всё самое необходимое
  • Cre-ARTs - всё самое необходимое

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Вид материалов и комментариев » Подцветка кода от GOOGLE-CODE

Подцветка кода от GOOGLE-CODE

  • Опубликовал: InfernO
  • Категория: Вид материалов и комментариев
  • Дата: 19 Июня 2025 в 02:22
0 голосов
  • 1
  • 2
  • 3
  • 4
  • 5
Шаг 1 - Установим JS: 
Для начало нам следует разместить в низ вашей страницы перед закрывающим тегом </body> следующий js:

JS
Код
<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
Код
/* Подсветка кода <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 кода в одну строку, цвет всего кода окрашивается в один цвет.

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

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs



Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 841 « Назад

Теги материала: google-code, от, кода, подцветка

Похожие материалы:
  • Подсветка кода uCoz от google-code
  • Защита от просмотра исходного кода Ctrl+U
  • Скрипт Новая защита от копирования
  • Защита текста от копирования
  • Оповещение админа о просмотре исходного кода

Комментарии пользователей


Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.
  • Главная
  • Sitemap
  • Палитра Web цветов
RealARTs
Дизайн полностью создан и принадлежит сайту "Cre-ARTs.ru".
Все размещенные материалы, принадлежат их владельцам и предоставляются
исключительно в ознакомительных целях. Администрация ответственности
за содержание материала не несет и убытки не возмещает. Хостинг от uCoz
CRE-ARTs
  • Анализ интернет сайта