Комментарии 30
Идея интересная, думаю вполне подойдет для личных блогов и не сильно специализированных на программировании сайтов. Большой плюс, что обработка производится на клиенте и не загружает сервер, а хороший синтаксический анализ все таки вещь не сильно быстрая. К сожалению закончились разряды, как будут обязательно плюсану.
Спасибо.
В JavaScript не силен, а подобная, не тяжелая подсветка как раз понадобилась, так что большое Вам спасибо.
Здорово. Коротко и быстро. И красиво.
P.S. Сам пользуюсь hightlight.js, это пример «многих_многих_байт». Он крут, но и размерами гораздо больше, и грузится соответственно дольше.
P.S. Сам пользуюсь hightlight.js, это пример «многих_многих_байт». Он крут, но и размерами гораздо больше, и грузится соответственно дольше.
Вот наткнулся на не большую библиотечку codepress.org/ только там куча подсветок, автозакрытие скобок, автоподстоновки и все это чюдо весит не так уж и много 4к библиотека плюс по выбору правила с css для определённого языка примерно 2к
LISP подстветите мне так? :)
Насколько я знаю 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,' ');
как-то так :)
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,' ');
как-то так :)
Может кто подскажет хорошую библу для подсветки css/sql/xml/js?
Желательно на php
Желательно на php
Немного исправленный вариант:
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,
' ');
}
Спасибо, добавил в пост.
Еще чуть-чуть поправлю: Стили
ненужны, т. к. в моем варианте в каменты и строки ничего вложено не будет.
.S span{color:red;font-weight:normal}/* Всё внутри строки — строка */
.C span{color:orange;font-weight:normal}/* Всё внутри комментария — комментарий */
ненужны, т. к. в моем варианте в каменты и строки ничего вложено не будет.
Немного неправильные 2 последние замены (сразу не обратил внимание), должно быть так:
// Выставляем переводы строк .replace(/\n/g, '<'+'br>') // Табуляцию заменяем неразрывными пробелами .replace(/\t/g, '&'+'nbsp;&'+'nbsp;&'+'nbsp;&'+'nbsp;');
Спасибо.
Хоть и повторюсь, но здорово. Коротко и быстро. И красиво.
Хоть и повторюсь, но здорово. Коротко и быстро. И красиво.
Позволю себе добавить следующее:
Код, скопированный из редактора с принудительной заменой табуляции пробелами (что есть правильно на мой взгляд) будет выглядеть абсолютно некошерно.
Это можно исправить, объявив локальную переменную:
И дописать простенький регэксп:
Вуаля.
Код, скопированный из редактора с принудительной заменой табуляции пробелами (что есть правильно на мой взгляд) будет выглядеть абсолютно некошерно.
Это можно исправить, объявив локальную переменную:
var spacesInTab = 4;
И дописать простенький регэксп:
.replace(new RegExp('\\s{' + spacesInTab + '}', 'g'),
new Array(spacesInTab + 1).join(" "));
Вуаля.
Насчет
Немного посидел, довел до ума и положил тут: http://dema.ru/syntax/ неминимизированный код с комментариями занимает 192 строки или 7 202 байт, если выкинуть все лишнее — примерно 2Кб.
Если кто может разместить сей файлик на постоянной основе — будьте так любезны, а ссылку я выложу.
Немного посидел, довел до ума и положил тут: http://dema.ru/syntax/ неминимизированный код с комментариями занимает 192 строки или 7 202 байт, если выкинуть все лишнее — примерно 2Кб.
Неплохо было бы еще избавиться от необходимости прописывать стили в документе, а тем более подключать внешний файл. Например, так:
Только нужно будет дать стилям уникальные имена, напр. syntaxjs_func, syntaxjs_C и т. д., чтобы не пересекались с другими.
Также, цвета можно вынести в настройки.
$.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 и т. д., чтобы не пересекались с другими.
Также, цвета можно вынести в настройки.
Всё гениальное — просто. Лаконичная и красивая реализация!
Спасибо.
Могу я считать, что этот код выпущен под свободной лицензией? ))
Сделаем расширение для PunBB 1.3.
Могу я считать, что этот код выпущен под свободной лицензией? ))
Сделаем расширение для PunBB 1.3.
Сильно развил вашу идею и написал достаточно хорошую подсветку под систему ucoz. Можно конечно использовать и на сторонних ресурсах. Прошу оценить подсветку прямо на этой странице. Подсвечиваются js, css, html. Весь код укладывается в 9 килобайт.
Это получается не javascript, а jQuery.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Подсветка синтаксиса несколькими строками javascript