Подсветка синтаксиса несколькими строками javascript

[logman]

Идея интересная, думаю вполне подойдет для личных блогов и не сильно специализированных на программировании сайтов. Большой плюс, что обработка производится на клиенте и не загружает сервер, а хороший синтаксический анализ все таки вещь не сильно быстрая. К сожалению закончились разряды, как будут обязательно плюсану.

[freehome]

Спасибо.

[oboyshikov]

В JavaScript не силен, а подобная, не тяжелая подсветка как раз понадобилась, так что большое Вам спасибо.

[ainu]

Здорово. Коротко и быстро. И красиво.
P.S. Сам пользуюсь hightlight.js, это пример «многих_многих_байт». Он крут, но и размерами гораздо больше, и грузится соответственно дольше.

[1602]

Да, хорошая библиотека, тож её использовал использовал в нескольких проектах. Но вот захотелось чего-то небольшого и понятного.

[no_smoking]

Вот наткнулся на не большую библиотечку codepress.org/ только там куча подсветок, автозакрытие скобок, автоподстоновки и все это чюдо весит не так уж и много 4к библиотека плюс по выбору правила с css для определённого языка примерно 2к

[1602]

Сайт лежит. (хабраэффект?) За ссылку спасибо, глянем как сайт встанет.

[no_smoking]

да заметил решил зайти посмотреть свежую версию и не смог :(, а библиотка хорошая можно в одминке использовать для редактирования исходников :)

[bolk]

LISP подстветите мне так? :)

[1602]

Насколько я знаю LISP, там подсвечивать особо нечего :)

code = code
.replace(/(defun|let|lambda|if|null|list|cons|append|loop)([^a-z0-9\$_])/gi,'$1$2')
.replace(/(\(|\)|\]|\[|\|)/gi,'$1')
.replace(/(\;[^\n\r]*(\n|\r\n))/g,'$1')
.replace(/(".*?")/g,'$1')
.replace(/\(([a-z\_\$][a-z0-9_]*)/gi,'($1')
.replace(/\t/g,' ');

как-то так :)

[1602]

не проверял, но вроде должно быть правильно

[Nc_Soft]

Может кто подскажет хорошую библу для подсветки css/sql/xml/js?
Желательно на php

[ETCDema]

Немного исправленный вариант:

function Syntax(code)
{
	var comments	= [];	// Тут собираем все каменты
	var strings		= [];	// Тут собираем все строки
	var res			= [];	// Тут собираем все RegExp
	var all			= { 'C': comments, 'S': strings, 'R': res };
	var safe		= { '<': '<', '>': '>', '&': '&' };

	return code
	// Маскируем HTML
						.replace(/[<>&]/g, function (m)
							{ return safe[m]; })
	// Убираем каменты
						.replace(/\/\*[\s\S]*\*\//g, function(m)
							{ var l=comments.length; comments.push(m); return '~~~C'+l+'~~~';   })
						.replace(/([^\\])\/\/[^\n]*\n/g, function(m, f)
							{ var l=comments.length; comments.push(m); return f+'~~~C'+l+'~~~'; })
	// Убираем regexp
						.replace(/\/(\\\/|[^\/\n])*\/[gim]{0,3}/g, function(m)
							{ var l=res.length; res.push(m); return '~~~R'+l+'~~~';   })
	// Убираем строки
						.replace(/([^\\])((?:'(?:\\'|[^'])*')|(?:"(?:\\"|[^"])*"))/g, function(m, f, s)
							{ var l=strings.length; strings.push(s); return f+'~~~S'+l+'~~~'; })
	// Выделяем ключевые слова
						.replace(/(var|function|typeof|new|return|if|for|in|while|break|do|continue|switch|case)([^a-z0-9\$_])/gi,
							'<span class="kwrd">$1</span>$2')
	// Выделяем скобки
						.replace(/(\{|\}|\]|\[|\|)/gi,
							'<span class="gly">$1</span>')
	// Выделяем имена функций
						.replace(/([a-z\_\$][a-z0-9_]*)[\s]*\(/gi,
							'<span class="func">$1</span>(')
	// Возвращаем на место каменты, строки, RegExp
						.replace(/~~~([CSR])(\d+)~~~/g, function(m, t, i)
							{ return '<span class="'+t+'">'+all[t][i]+'</span>'; })
	// Выставляем переводы строк
						.replace(/\n/g,
							'
')
	// Табуляцию заменяем неразрывными пробелами
						.replace(/\t/g,
							'    ');
}

[1602]

Спасибо, добавил в пост.

[ETCDema]

Еще чуть-чуть поправлю: Стили

.S span{color:red;font-weight:normal}/* Всё внутри строки — строка */
.C span{color:orange;font-weight:normal}/* Всё внутри комментария — комментарий */

ненужны, т. к. в моем варианте в каменты и строки ничего вложено не будет.

[1602]

ахда, точно (рефлекс копипасты сработал)

[ETCDema]

Немного неправильные 2 последние замены (сразу не обратил внимание), должно быть так:

// Выставляем переводы строк
	.replace(/\n/g,	'<'+'br>')
// Табуляцию заменяем неразрывными пробелами
	.replace(/\t/g, '&'+'nbsp;&'+'nbsp;&'+'nbsp;&'+'nbsp;');

[1602]

ага. хабр съел пару тэгов.
всё поправлено

[dpritula]

Спасибо.
Хоть и повторюсь, но здорово. Коротко и быстро. И красиво.

[dpritula]

Позволю себе добавить следующее:

Код, скопированный из редактора с принудительной заменой табуляции пробелами (что есть правильно на мой взгляд) будет выглядеть абсолютно некошерно.

Это можно исправить, объявив локальную переменную:

var spacesInTab = 4;

И дописать простенький регэксп:

.replace(new RegExp('\\s{' + spacesInTab + '}', 'g'),
    new Array(spacesInTab + 1).join(" "));

Вуаля.

[ETCDema]

Насчет

Если кто может разместить сей файлик на постоянной основе — будьте так любезны, а ссылку я выложу.

Немного посидел, довел до ума и положил тут: http://dema.ru/syntax/ неминимизированный код с комментариями занимает 192 строки или 7 202 байт, если выкинуть все лишнее — примерно 2Кб.

[1602]

Пару раз заметил глюк: вначале и в конце строки комментарий считается пустым регулярным выражением. И ещё у вас на сайте (не сочтите за дерзость) «плагны» написано, вместо «Плагины».

[ETCDema]

Спасибо, поправил

[afi]

Неплохо было бы еще избавиться от необходимости прописывать стили в документе, а тем более подключать внешний файл. Например, так:

$.fn.syntax = function(){

// add style
var style = $('<style>.S{color:red;}.func{color:blue;}.C{color:orange;}.kwrd{font-weight:bold;}.R{color:gray;}</style> ');
$("body").append(style);
return this.each(function(){
....
....


Только нужно будет дать стилям уникальные имена, напр. syntaxjs_func, syntaxjs_C и т. д., чтобы не пересекались с другими.
Также, цвета можно вынести в настройки.

[Hush]

Всё гениальное — просто. Лаконичная и красивая реализация!

[rubyrabbit]

Спасибо.

Могу я считать, что этот код выпущен под свободной лицензией? ))
Сделаем расширение для PunBB 1.3.

[1602]

Пожалуйста.

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

[Aleko]

Сильно развил вашу идею и написал достаточно хорошую подсветку под систему ucoz. Можно конечно использовать и на сторонних ресурсах. Прошу оценить подсветку прямо на этой странице. Подсвечиваются js, css, html. Весь код укладывается в 9 килобайт.

[Oreolek]

Это получается не javascript, а jQuery.