Плагины для jQuery: Подсветка синтаксиса JS, C#, CSS, HTML и XML
Что тут есть?
По прочтению топика на habrahabr.ru решил немного отвлечься от текущих задач и
написал маленький скрипт подсветки JavaScript и XML синтаксиса. Зачем? Да просто так. Может заодно встрою его к себе в DmMarkdown.Document.
Обновление 1: Добавлена подсветка HTML (объединением XML, CSS и JS подсветки).
Обновление 2: Добавлена подсветка CSS и C#.
Обновление 3: Добавлена "правильная" замена табуляций.
Обновление 4: Реализация на C#.
Обновление 5: Переписана JS реализация: теперь можно заменять стандартный вывод HTML расширенным.
Обновление 6: Можно попробовать самому написать форматирование + добавлено форматирование для habrahabr.
Как использовать
Подключаете скрипт на страницу и у вас будет 2 варианта использования.
Вариант первый - как jQuery плагин
/* Для JavaScript */
$('pre.js').DmSyntaxJS();
/* Для C# */
$('pre.cs').DmSyntaxCS();
/* Для CSS */
$('pre.css').DmSyntaxCSS();
/* Для XML */
$('pre.xml').DmSyntaxXML();
/* Для HTML */
$('pre.html').DmSyntaxHTML();
/* Самый простой: прописать нужный синтаксис как класс тэга PRE:
* <PRE class="JS">...</PRE> - синтаксис JavaScript
* <PRE class="CS">...</PRE> - синтаксис C#
* <PRE class="CSS">...</PRE> - синтаксис CSS
* <PRE class="XML">...</PRE> - синтаксис XML
* <PRE class="HTML">...</PRE> - синтаксис XML+CSS+JS
* <PRE class="HTML1">...</PRE> - игнорируется
* <PRE>...</PRE> - игнорируется
*/
$('pre').DmSyntax();
Вариант второй - как функция
/* Для JavaScript */
var js = 'var s = "Hello!"; alert(s);';
var html = $.DmSyntax.JS(js);
/* Для C# */
var cs = 'string s = "Hello!"; write(s);';
var html = $.DmSyntax.CS(cs);
/* Для CSS */
var css = 'BODY { background-color: white; }';
var html = $.DmSyntax.CSS(css);
/* Для XML */
var xml = '<t>ffff<y/>dcsdcds</t>';
var html = $.DmSyntax.XML(xml);
/* Для HTML */
var html = '<span>ffff<br>dcsdcds</span>';
html = $.DmSyntax.HTML(html);
Настройка цветов
Нужно прописать в CSS:
.xml { font-family: "Courier New"; color: #000; font-size: 10pt; }
.xml .rem { color: #A0A0A0; }
.xml .cdatao, .xml .cdatac
{ color: #A0A0A0; }
.xml .cdata { color: #000; }
.xml .tag { color: #0000FF; }
.xml .name { color: #AA1515; font-weight: bold; }
.xml .attr { color: #AA1515; }
.xml .attr .name { color: #FF0000; font-weight: normal; }
.xml .attr .value { color: #0000FF; }
.js { font-family: "Courier New"; color: #000; font-size: 10pt; }
.js .rem { color: #A0A0A0; }
.js .str { color: #AA1515; }
.js .re { color: #FF0000; }
.js .kw { color: #0000FF; font-weight: bold; }
.js .func { color: #0000FF; }
.js .gly { font-weight: bold; }
.cs { font-family: "Courier New"; color: #000; font-size: 10pt; }
.cs .rem { color: #A0A0A0; }
.cs .str { color: #AA1515; }
.cs .re { color: #FF0000; }
.cs .kw { color: #0000FF; font-weight: bold; }
.cs .func { color: #0000FF; }
.cs .gly { font-weight: bold; }
.css { font-family: "Courier New"; color: #000; font-size: 10pt; }
.css .rem { color: #A0A0A0; }
.css .sel { color: #AA1515; }
.css .name { color: #FF0000; font-weight: normal; }
.css .value { color: #0000FF; }
Для подсветки HTML используются те же CSS классы.
Переопределение генерации HTML
Была добавлена возможность заменять методы генерации HTML, для этого нужно в соответствующие методы передавать объект с набором переопределяемых функций генерации HTML.
Переданный объект заменит стандартные методы генерации; если в объекте не переопределена функция, то будет использоваться функция из стандартного объекта.
Полная структура объектов для генерации HTML:
{
JS: {
rem: function(txt) { return ...; }, // Комментарий
str: function(txt) { return ...; }, // Строка
re: function(txt) { return ...; }, // Regexp
kw: function(txt) { return ...; }, // Ключевые слова
gly: function(txt) { return ...; }, // Скобки
func: function(txt) { return ...; }, // Названия функций
lines: function(lines) { return ...; }, // Склейка строк
block: function(txt) { return ...; } // Контейнер
},
CS: {
rem: function(txt) { return ...; }, // Комментарий
str: function(txt) { return ...; }, // Строка
re: function(txt) { return ...; }, // Regexp
kw: function(txt) { return ...; }, // Ключевые слова
gly: function(txt) { return ...; }, // Скобки
func: function(txt) { return ...; }, // Названия функций
lines: function(lines) { return ...; }, // Склейка строк
block: function(txt) { return ...; } // Контейнер
},
XML: {
rem: function(txt) { return ...; }, // Комментарий
cdatao: function() { return ...; }, // Начало блока CDATA
cdata: function(txt) { return ...; }, // Содержимое блока CDATA
cdatac: function() { return ...; }, // Конец блока CDATA
def: function(n, p) { return ...; }, // Определение <?XML ... ?>
tago: function(n, p, e){return ...; }, // Открывающийся тэг
tagc: function(n) { return ...; }, // Закрытие тэга
param: function(n, v) { return ...; }, // Параметр: имя + значение
lines: function(lines) { return ...; }, // Склейка строк
block: function(txt) { return ...; }
},
CSS: {
rem: function(txt) { return ...; }, // Комментарий
sel: function(txt) { return ...; }, // CSS селектор
param: function(n, v) { return ...; }, // Параметр: имя + значение
lines: function(lines) { return ...; }, // Склейка строк
block: function(txt) { return ...; } // Контейнер
},
HTML: {
XML: { // Генерация HTML для тэгов
rem: function(txt) { return ...; },
cdatao: function() { return ...; },
cdata: function(txt) { return ...; },
cdatac: function() { return ...; },
def: function(n, p) { return ...; },
tago: function(n, p, e){return ...; },
tagc: function(n) { return ...; },
param: function(n, v) { return ...; },
lines: function(lines) { return ...; },
block: function(txt) { return ...; }
},
CSS: { // Генерация HTML для CSS
rem: function(txt) { return ...; },
sel: function(txt) { return ...; },
param: function(n, v) { return ...; },
lines: function(lines) { return ...; },
block: function(txt) { return ...; }
},
JS: { // Генерация HTML для скрипта
rem: function(txt) { return ...; },
str: function(txt) { return ...; },
re: function(txt) { return ...; },
kw: function(txt) { return ...; },
gly: function(txt) { return ...; },
func: function(txt) { return ...; },
lines: function(lines) { return ...; },
block: function(txt) { return ...; }
}
}
};
В примере используется такая генерация HTML для вывода с номерами строк:
{
JS: {
lines: function(lines)
{
return '<li>'.concat(lines.join('</li><li>'), '</li>');
},
block: function(txt)
{
return '<ol class="js">'.concat(txt, '</ol>');
}
},
CS: {
lines: function(lines)
{
return '<li>'.concat(lines.join('</li><li>'), '</li>');
},
block: function(txt)
{
return '<ol class="cs">'.concat(txt, '</ol>');
}
},
XML: {
lines: function(lines)
{
return '<li>'.concat(lines.join('</li><li>'), '</li>');
},
block: function(txt)
{
return '<ol class="xml">'.concat(txt, '</ol>');
}
},
CSS: {
lines: function(lines)
{
return '<li>'.concat(lines.join('</li><li>'), '</li>');
},
block: function(txt)
{
return '<ol class="css">'.concat(txt, '</ol>');
}
},
HTML: {
XML: {
lines: function(lines)
{
return '<li class="xml">'.concat(
lines.join('</li><li class="xml">'),
'</li>'
);
},
block: function(txt)
{
return '<ol>'.concat(txt, '</ol>');
}
},
JS: {
lines: function(lines)
{
return '</li><li class="js">'.concat(
lines.join('</li><li class="js">'),
'</li><li class="xml">'
);
},
block: function(txt) { return txt; }
},
CSS: {
lines: function(lines)
{
return '</li><li class="css">'.concat(
lines.join('</li><li class="css">'),
'</li><li class="xml">'
);
},
block: function(txt) { return txt; }
}
}
}
Попробовать
Вставьте в поле текст и нажмите соответствующую кнопку
Подсветка
Обработка
Результат |
Тут будет показан результат |
Исходник |
|
Версии
Версия |
Описание |
1.0.0 24.10.2008 |
Опубликовано в топике на habrhabr.ru. |
1.0.1 27.10.2008 |
Добавлена подсветка HTML, исправлены мелкие баги, добавлена совместимость с IE, небольшая
оптимизация. |
1.0.2 10.11.2008 |
Добавлена подсветка CS, CSS. |
1.0.3 12.11.2008 |
Добавлена "правильная" замена табуляций, исправлена ошибка в FF3. |
1.0.4 24.11.2008 |
Добавлена реализация на C#. |
1.0.5 10.12.2009 |
Переписана JS реализация: теперь можно заменять стандартный вывод HTML расширенным. |
1.0.6 02.02.2010 |
Можно попробовать самому написать форматирование + добавлено форматирование для habrahabr. |
1.0.7 12.06.2010 |
Исправлены мелкие баги совместимости. |