Плагины для jQuery: Подсветка синтаксиса JS, C#, CSS, HTML и XML

Что тут есть?

По прочтению топика на habrahabr.ru решил немного отвлечься от текущих задач и написал маленький скрипт подсветки JavaScript и XML синтаксиса. Зачем? Да просто так. Может заодно встрою его к себе в DmMarkdown.Document.

Как использовать

Подключаете скрипт на страницу и у вас будет 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; }
		}
	}
}

Попробовать

Вставьте в поле текст и нажмите соответствующую кнопку

Тут будет показан результат

Версии