ФорумРазработкаКлиентская сторонаВерстка и оформление → Подсветка исходников - верстка

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

  • vasa_c

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

    Spritz 19 января 2008 г. 6:19

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

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

    Условия:

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

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

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

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


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

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

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

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


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

    Кто умный? :)
  • Timur

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

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

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

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

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

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

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

    Spritz 19 января 2008 г. 9: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 везде, но этим лучше не злоупотреблять. В общем хотелось бы знать насколько необходимы такие вложения классов.

    И ещё кажется придется пожертвовать веб-стандартами, т.к. валидацию всё это дело врядли пройдет.
    1. code.zip (91)
  • kendo

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

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

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

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

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

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

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

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

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

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

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

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

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

    Нельзя

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Поздравляю
  • kendo

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

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

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

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

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

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


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


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

Пожалуйста, авторизуйтесь, чтобы написать комментарий!