Подсветка синтаксиса для uCoz (от google-code) - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 5
Гостей: 5
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Изначальный вид блоков цитат и кода в uCoz очень примитивный, поэтому чисто визуально я его немного модернизировал еще давно. Но все же на многих более солидных сайтах замечал еще более продвинутый их вид - с подсветкой, нумерацией и другими полезными мелочами. Сам я такое сделать конечно уже не мог, поэтому искал готовые решения, поскольку хотелось что-то подобное и у себя видеть. Те скрипты что раньше находил - были какими то слишком большими и не хотелось отягощать ими сайт. Поэтому тогда я это бросил.

Но сейчас опять решил попробовать, сперва нашел и установил вариант от Studio-AD, но у них во-первых много лишнего, во-вторых код CSS не подсвечивается почему-то. Поэтому стал искать что-нибудь другое и наткнулся на скрипт от Center-DM. Их код является адаптацией варианта подсветки от google-code для uCoz. Он оказался рабочим, хоть и выглядит попроще, но и ничего лишнего нет зато. Весит скрипт немного, ощутимых тормозов на странице не создает.

Сразу скажу, что в качестве демо - мой сайт, поскольку подсветку эту я поставил себе, она меня вполне устраивает и я ее оставлю. Ну а теперь перейдем к установке.

Установка подсветки кода
 
1. Скачайте архив, извлеките оттуда все файлы. Файл uLight.js - залейте в папку js в корне файлового менеджера сайта (если ее нет - создайте), а файл fon_code.gif - в папку img.
2. Далее нужно разместить внизу всех страниц (где нежна работа скрипта) перед закрывающим тегом  </body> этот скрипт:


Code
<script src="/js/uLight.js"></script>

Это короче основной скрипт, который подсвечивает синтаксис кода uCoz и добавляет ссылку для быстрого выделения кода.

3. Остается лишь прописать стили ячейки кода и саму подсветку определённых тегов, для светлого варианта я создал оформление схожее с подсветкой кода в программе Notepad++:

Code
/*-------------------[ПОДСВЕТКА СИНТАКСИСА]-------------------*/ 

.bbCodeBlock { 
  box-shadow: 0px 0px 10px inset #EDEDED; 
  border: 1px solid #A3A3A3 !important; 
  border-radius: 2px; 
  margin-top: 8px;} 

.codeMessage { 
  background:url(/img/fon_code.gif); 
  box-shadow: 0px 0px 8px inset #E6E6E6; 
  border: 0px none !important; 
  white-space: nowrap; 
  padding: 8px;} 

.bbCodeName { 
  border-bottom: 1px dashed #A3A3A3; 
  border-radius: 2px 2px 0px 0px; 
  font-weight: 400 !important; 
  padding: 2px 0px 0px 8px; 
  font-size: 8pt !important; 
  background: #F6F6F6; 
  height: 22px;} 

.codeMessage .nocode {background:none; color: #555;} 
.codeMessage .str {color: #cd5c5f;} 
.codeMessage .kwd {color: #000080; font-weight: bold;} 
.codeMessage .com {color: #00853E;} 
.codeMessage .typ {color: #00853E;} 
.codeMessage .lit {color: #cd5c5c;} 
.codeMessage .pun {color: #555;} 
.codeMessage .pln {color: #555;} 
.codeMessage .tag {color: #5c71cd; font-weight: bold;} 
.codeMessage .atn {color: #cd5c5c; font-weight: bold;} 
.codeMessage .atv {color: #555;} 
.codeMessage .dec {color: #98fb98;} 

ol.linenums {margin-top: 0; margin-bottom: 0; color: #AEAEAE;} 
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {list-style-type: none;}  
li.L1,li.L3,li.L5,li.L7,li.L9 {} 

.codeMessage ::selection {background:#C0C0C0;} 
.codeMessage ::-moz-selection {background:#C0C0C0;} 
.bbCodeName a:hover {text-decoration:none; color: #666;}

Важно!

При копировании материала указывать ссылку на источник.

- 486
- 26-Октября-2016
- 5
- 0
Материал разместил:

Похожий материал
Похожего материала не найдено...
Статьи сайта