04.05.2012 00:00:27: Переработал дизайн (стало лучше или хуже?), пофиксил несколько неприятных багов.
Если нужен исходник плагина для фиксации навигации при скроллинге оставьте свой контакт.
Небольшое уточнение: весь код проверяю в IE начиная с версии 7 и в Chrome (на данный момент актуальна 18 версия), буду признателен за информацию об ошибках в других браузерах - пишите сообщения на соответствующих страницах.

Плагины для 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 ...; },	// Определение &lt;?XML ... ?&gt;
		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
Исправлены мелкие баги совместимости.