Подсветка синтаксиса for Ucoz

     Пост обновлен. Хочу представить вам мою разработку для системы uCoz - скрипт детальной подсветки кода. Цветовая схема подсветки аналогична схеме из программы Dreamweaver 8. Скрипт умеет подсвечивать css код, javascript код и условные коды системы uCoz. Так же скрипт способен выводить в отдельном окне выделенный исходный код и переключать режим отображения кода: с переносом длинных строк и без. Благодаря удобному вызову, скрипт может быть вызван в любой момент. Вот пример работы подсветки:

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Презентация подсветки</title>
<style type="text/css">
html, body {margin:0;padding:0;background:#FFFFFF;font:11px 'Verdana';}
/*  
  * многострочные комментраии работают только
  * в css и javascript блоках как и должны.
  */
.stylename {width:100px;height:auto !important;} /* выделяются все стили */
#myid {height:100%;width:expression(document.body.offsetWidth/2+'px');}
/* подсвечивается скрипт в css выражениях */
</style>
</head>
<body>
<!-- html теги подобного вида работают только в html, хотя  
и сереют в javascript как и в Dreamweaver8  
Далее идут спец теги:
-->
<form method="post" name="test" target="_blank">
  <input type="checkbox" value="" />
  <textarea name="test" cols="6" rows="7">
  текст в текстареа блоке
  </textarea>
</form>
<a href="http://studioad.ru" style='font-size:20px;'>Ссылка</a>
Обратите внимание, что в ссылке распознался атрибут style

А вот пример использования условных кодов системы ucoz:
Это форумЭто не форум

Это обычный текст со скобками {} [] (), кавычками "текст" 'текст' и знаками математических функций + - \ *
<img src="http://studioad.ru/image.jpg" alt="Описание" />
<table width="470" border="2" cellspacing="0" cellpadding="1">
<col/><col/>
  <tr>
  <td>Содержимое ячейки</td>
  </tr>
  <tr>
  <td>Содержимое ячейки</td>
  </tr>
</table>
<!-- теги отображаются правильно, теперь js -->
<script type="text/javascript">
// подсвечивает методы и ключевые слова

var number_8 = "11";
var number_9 = .5/9*4+27.2+parseInt(number_8);
// обратите внимание, как подсвечиваются цифры в именах переменных
// и просто в формулах, кстати да! =) - однострочные комментарии!
var a = document.getElementById('bla').replace(/(something|smth|anything)/ig,'Что либо');
var z = //gim; //пустое регулярное выражение
var p = "var q=/regular_expression/gm";
var bla45 = [/regular/g,/regular/im];
// правильная подсветка RegExp!
var b = "http://studioad.ru + $COMMENTS_NUM$"; // отличает однострочные комментарии от ссылок и распознает ucoz коды!
</script>
</body>
</html>


Установка на свой сайт

Сначала скопируйте этот код в шапку страниц, на которых собираетесь использовать скрипт (так же можете подключить отдельным файлом):

Code
<style type='text/css' media='screen'>
.bbCodeName{display:none!important;}
.codeMessage {white-space:nowrap;overflow:auto;max-height:none!important;margin:5px 0;padding:10px;background-color:#F3F3F3;color:#333;border:1px dashed #999!important;text-align:left;overflow-x:scroll\9}
.rowOne {background:#fff;}
.rowTwo {background:#f6f6f6;}
.codeMessage table{margin:0;border-collapse:collapse;width:100%;}
.codeMessage td {padding:0 5px 1px;font:12px 'Courier New',monospace;}
.decimal {width:1%;background:#3399ff;color:#fff;vertical-align:top;text-align:right;}
css{color:#F0F;}
js,htm{color:#000;}
figures {color:#f00;}
js exp {color:#060;}
js exppm {color:#960;}
symbols {color:#0047BD;}
tags {color:#0047BD;}
brackets {color:#0047BD;}
reserved {color:#0047BD;}
values {color:#0047BD;}
methods {color:#099;}
diffkeys {color:#909;}
important {color:#f00;}
ucoz {color:#8a0;}
params {color:#019;}
doctypes {color:#099;}
tables {color:#099;}
forms {color:#F90;}
anchors {color:#060;}
imgs {color:#909;}
styles {color:#909;}
styles commas, styles commas *{color:#060!important;}
csscommas, csscommas * {color:#060!important;}
scripts {color:#900;}
tags commas,js commas {color:#0047BD}
commas exp,commas exppm {color:#0047BD!important;}
csssymbols {color:#F0F;}
linecom,linecom *{color:#999!important;}
htmlcom,htmlcom *{color:#999!important;}
mlinecom,mlinecom *{color:#999!important;}
.ulight{color:#AAA;padding:5px 0 0;font-family:Arial !important;}
.ulight a{font-weight:bold;outline:0;}
.ulight a:link, .ulight a:visited, .ulight a:active{text-decoration:none;color:#888;}
.ulight a:hover{text-decoration:underline;color:#888;}
</style>

Затем в самый низ каждой страницы, после тега <body>, добавьте данный код (ну или вы можете аналогично подключить скрипт со своего сайта, заведомо его скачав):

Code
<script type="text/javascript" src="http://studioad.ru/diff/uLight.js?v10"></script>

Код отформатирован.

Первая версия:
- исправлена ошибка подсветки RegExp
- исправлено отображение цифр
- исправено отображение точки в десятичных дробях
- убраны лишние пробелы и исправлен баг подсветки методов
- испавлен баг лишних переносов строки при копировании css

Вторая версия:
- исправлен баг неправильного размера текстареа в выводимом окне
- добавлена подсветка setInterval

Третья версия:
- исправлена подсветка кавычек в style
- скрипт запакован и убран в файл

Четвертая версия:
- обновлен css
- исправлено отображение регулярных выражений

Пятая версия (важное обновление):
- обновлен css
- исправлено много багов
- добавлен режими отображения кода
- функции переписаны в объект
- добавлена подсветка ucoz кодов

Шестая версия (важное обновление):
- исправлено много багов по подсветке regexp

Седьмая версия (важное обновление):
- исправлены баги по подсветке regexp в сложных ситуациях
- добавлена подсветка css expressions
- исправлены множественные баги подсветки разных элементов
- переписан css и создан новый набор элементов

Восьмая версия (важное обновление):
- добавлена нумерация строк
- исправлено много багов

 
Девятая версия:
- что то исправил, не помню уже...
 

Десятая версия:
- умудрился забыть возвращать ucoz коды в css и в js, в этой версии эта досадная ошибка исправлена. Те кто подключил скрипт с моего сайта - радуйтесь, остальные - скачивайте новую версию.

 
Ставим новую версию! Версия скрипта в сообщении: 10

Жми на пятую!
137, 21, 33479
№21
Эм, А СКАЧАТЬ ТО ГДЕ??????????????????
№20
У вас в тексте, я считаю, ошибка - 4 предложение, 1 слово: по правилам могучего нашего языка если слово "также" можно заменить на "так" и часть предложение не потеряет смысла, то стоит писать "так же", иначе(или если заменяется синонимом) то слитно - "также".

ПС-просто я егэ сдаю :D

№19
Открывающий тег р в коде съедает начисто...и как бы сделать, чтобы по умолчанию был выставлен перенос строк
№18
Есть два предложения по усовершенствованию данного чуда:

1) Сделать так, чтобы при простом выделении не захватывалась нумерация строк
2) Добавить кнопку "Копировать в буфер"

Данные идеи давно осуществлены и плагине SyntaxHighliter от хелпера. Всё необходимое уже адаптированное под uCoz сырьё предоставлю, если возьмётесь за доработку :)

№17
всё работает только вот размер не могу уменьшит bula.3dn.ru/css.css помогите!
№16
[sayto]Странник[/sayto], копирование кода весьма сложно из за политики безопасности при работе с буфером обмена, это раз. Во вторых, копировать нужно не подсвеченный код а код в отдельном окне - эта функция не случайна - в коде может быть куча различий. В третьих - "подсветка от AD" - основная вещь в этом скрипте для меня - я его публикую для самораскрутки в первую очередь и это не плохо работает. К сожалению я не такой филантроп, как может показаться. 8P
№15
Скрипт обновлен, обратите внимание пожалуйста.
[sayto]Nigelist[/sayto], помню, все помню.
№14
подсветки php скорее всего не будет, так как я во первых плохо знаю этот язык а во вторых не хочу превращать скрипт в огромного монстра.
№13
[sayto]Олег[/sayto], спасибо, отписал в ucoz abuze.
№12
[sayto]Nigelist[/sayto], настраивать там в принципе нечего, только стили. Таблица, с помощью которой создается нумерация и подсвечиваются строки в данный момент является фундаментом под расположение всех элементов, если вы говорите о сокращении генерируемого кода. Если же речь идет о размере скрипта, то кусок кода, создающий нумерацию ничтожно мал. Так что выигрыша не будет никакого. Мануал по стилям я напишу на выходных.
№11
[sayto]Nigelist[/sayto], а в чем проблема? Цветом строк можно управлять в стилях - сделайте их одинаковыми и всё. Что касается нумерации - у всех ячеек с номерами класс decimal - поставьте стиль display:none; и нумерации не будет.
№10
В стили случайно затесалась ширина в 500 пикселей (width:500px;), уже исправлено. Не будьте идиотами, сотрите. А то у всех как у одного новая версия скрипта выводится в узком пятисотпиксельном окне.
№9
[sayto]Олег[/sayto], да. странно, может быть отключали на какое то время.
№8
[sayto]Aleko[/sayto], апдейт. 7ucoz прекратили использование моего скрипта.
№7
[sayto]Anonymus[/sayto], О 7ucoz уже написана жалоба.
№6
[sayto]Олег[/sayto], нет. Копирайт поставлен не просто так. Узнаю - буду отчаянно требовать вашего закрытия.
№5
А можно добавить полосу прокрутки для длинного кода?
№4
[sayto]Лада[/sayto], врятли =). Я к администрации uCoz вообще отношения не имею.
№3
[sayto]theolaw[/sayto], скрипт перед закрывающим тегом /body
№2
Огромное спасибо.установил себе на форум,очень удачно вписалось!
№1
Как видите скрипт всё же допускает ошибки в сложных RegExp. Со всем остальным я уже справился.
    © Блог StudioAD.ru 2023 год нашей эры. Не все права защищены... Копирование любой информации и материалов с обратной ссылкой приветствуется! Хостинг от uCoz.

    Если вам пришлись по душе материалы моего блога - подпишитесь на RSS дабы получать обновления незамедлительно! Я рад что вы читаете и комментируете мои экзерсисы, приятного времяпрепровождения.