Подсветка исходников - верстка « Верстка и оформление

Сообщения: 3131 Репутация: N Группа: в ухо

19 января 2008 г. 14:19

Задачка верстальщегам для развития ума :)

Нужно сделать систему для подсветки синтаксиса исходников. Так как та, которая сейчас есть на этом форуме ни в какие ворота.
Одна из проблем, как это всё качественно сверстать.

Условия:

1. Всё по максимуму на CSS, чтобы можно легко менять подсветку.

2. Строки должны быть нумерованными. Нумерованный список не подходит, так как при копировании копируются маркеры. Сейчас таблица из двух столбцов — слева номера, справа строки, выровненные по номерам. Но всё равно наблюдаются глюки.

3. В одном исходнике могут использоваться сразу несколько языков. Например, html со вставками php и js.

4. Нужна возможность вставлять однострочный исходники прямо в строку с текстом.

Я всё это вижу примерно так:
Все токены (идентификаторы, скобки и т.п.) заключаются в спаны с соответствующими классами:
Например: "$x = func()" меняем на:
$x = func()

Всё это дело заключаем в основной слой с, допустим, class="syntax". А каждый язык, в слой со своим классом, например, class="php". И в css-файле:

.syntax .keyword {
// Стили для ключевых слов всех языков
}

.syntax .js .keyword {
// А для JS переопределяем
}

Но тут нужно учесть, что всё это должно быть в <pre>, строки выровнены по номерам и обрабатывать многострочные токены, например комментарии.

Кто умный? :)

Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

19 января 2008 г. 16:24, спустя 2 часа 5 минут 20 секунд

попробую, но со временем свободным щас напряженка (сессия)

vasa_c

Сообщения: 3131 Репутация: N Группа: в ухо

19 января 2008 г. 16:43, спустя 18 минут 58 секунд

Все надеются на тебя :)

Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

19 января 2008 г. 17:47, спустя 1 час 3 минуты 12 секунд

Все надеются на тебя :)

постараюсь оправдать надежды :)

пока кое-что набросал (в аттаче)

походу появились вопросы:
- скобки пока не делал - я как понял, надо что бы с подсветкой при наведении, как сейчас или нет?
- какие нужны подсветки? html, css, js, php и всё?
- какие нужны классы? по-сути для любого, наверное, языка надо 4-5: идентификаторы (любые), ключевые слова, строки, комментарии, и, возможно, знаки операций. И надо ли например переменные в php выделять особо? В мануале например они таким же цветом как и имена функций, и классов.
- html и css - там ведь вообщем-то нет ни ключевых слов, ничего другого т.к. это не языки программирования - но как на должны сказываться остальные общие стили (т.е. если мы устанавливаем жирный шрифт для всех ключевых слов всех языков, должно ли это распространяться на теги HTML?)

Проблему нумерации строк полностью удалось решить лишь для ФФ и Сафари - там даже по Ctrl+A не выделяется. С оперой и ие сложнее, но тоже вроде более-менее работает. Обошлось без таблиц.
И, кстати, там фигню сделал - типа отметка для строки, если не нужно - уберу.

По поводу вложенности - лучше если код с разными стилями будет разделен, а не вложен,
т.е. так лучше не делать:


<pre>
<span class="html">
 <span class="php"></span>
</span>
</pre>

а лучше делать так:


<pre>
<span class="html">…</span>
<span class="php">…</span>
<span class="html">…</span>
</pre>

Аналогично с css и js. Просто тогда неизбежно наложение стилей, и хз к чему это может привести. Можно конечно понаставить !important везде, но этим лучше не злоупотреблять. В общем хотелось бы знать насколько необходимы такие вложения классов.

И ещё кажется придется пожертвовать веб-стандартами, т.к. валидацию всё это дело врядли пройдет.

code.zip (91)

kendo

Сообщения: 446 Репутация: N Группа: Адекваты

19 января 2008 г. 18:20, спустя 32 минуты 56 секунд

Я тоже попробую :)
Велосипед изобретать не буду, посему буду использовать исключительно накопленые знания.

vasa_c

Сообщения: 3131 Репутация: N Группа: в ухо

19 января 2008 г. 18:36, спустя 16 минут 18 секунд

О, здорово выглядит. Еще и работать будет, так вообще здорово )

- скобки пока не делал - я как понял, надо что бы с подсветкой при наведении, как сейчас или нет?
- какие нужны подсветки? html, css, js, php и всё?
- какие нужны классы? по-сути для любого, наверное, языка надо 4-5: идентификаторы (любые), ключевые слова, строки, комментарии,

Это всё я сделаю. Сейчас нужно разработать принцип.

- html и css - там ведь вообщем-то нет ни ключевых слов, ничего другого т.к. это не языки программирования - но как на должны сказываться остальные общие стили (т.е. если мы устанавливаем жирный шрифт для всех ключевых слов всех языков, должно ли это распространяться на теги HTML?)

Это уже частности. Либо будем считать их ключевыми словами, либо введем отдельный класс.

а лучше делать так

Это да. Только не забывай, что код может быть внутри строки, например:
value="<?php print $value; ?>"
То есть дивы тут не пройдут.

И ещё кажется придется пожертвовать веб-стандартами, т.к. валидацию всё это дело врядли пройдет.

Нельзя

И еще есть многострочные токены, например комментарии. Как с ними? В может быть ?

kendo

Сообщения: 446 Репутация: N Группа: Адекваты

19 января 2008 г. 20:10, спустя 1 час 33 минуты 43 секунды

Хехе… посмотрел я работу Тимура и понял, что делал не совсем то, что надо :-\
Выкладываю, что успел натворить за час, может быть пригодится.

code_highlight.zip (110)

vasa_c

Сообщения: 3131 Репутация: N Группа: в ухо

19 января 2008 г. 20:17, спустя 7 минут 30 секунд

KENDO, тоже нормально. Только не нужно классов вроде PhpString. Будет один класс String, чтобы для каждого языка не прописывать. А если нужно, для конкретного языка переопределить.

vasa_c

Сообщения: 3131 Репутация: N Группа: в ухо

9 февраля 2008 г. 15:53, спустя 20 дней 19 часов 36 минут

Набросал — http://pyha.ru/upload/gosyntaxv/mark.htm
уникальный случай, работает везде, даже в IE, но в FF немного съезжает.
Что скажут знатоки?

Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

10 февраля 2008 г. 14:12, спустя 22 часа 18 минут 47 секунд

не знаю, что скажут знатоки, но по-моему всё отлично :)
в ff смотрел - разницы не заметил

сорри, что не сделал вовремя, только пару дней назад сессию закрыл

vasa_c

Сообщения: 3131 Репутация: N Группа: в ухо

10 февраля 2008 г. 14:31, спустя 19 минут 22 секунды

Версия от SA: http://gosyntax.sadesign.ru/
Даже без таблиц.
Если кто-нибудь придумает, как убрать скроллы тогда, когда код не растягивается, будет совсем здорово.

в ff смотрел - разницы не заметил

Там постепенно строки съезжают от номеров.

только пару дней назад сессию закрыл

Поздравляю

kendo

Сообщения: 446 Репутация: N Группа: Адекваты

11 февраля 2008 г. 12:30, спустя 21 час 58 минут 41 секунду

А я CSS доделал, на остальное пока времени нет… P.S. мне только предстоит экзамены сдавать…

adw0rd

Сообщения: 22959 Репутация: N Группа: в ухо

11 февраля 2008 г. 13:29, спустя 59 минут 33 секунды

в ff смотрел - разницы не заметил

Там постепенно строки съезжают от номеров.

В Safari под маком тоже съезжают строки

https://smappi.org/ - платформа по созданию API на все случаи жизни

Подсветка исходников - верстка

Войти