Comments 66
Демо на примере исходного кода atomjs (надеюсь TheShock не против ;)
Только «за»! =)
Красиво.
А table не пойдет?
table не поможет решить проблему с копированием нумерации это раз. А во-вторых, все давно уже верстается без таблиц.
1) решает, но с особенностями
2) «не модно», не значить «не правильно»
2) «не модно», не значить «не правильно»
А прсмотрщик на code.google.com кажется с этим не согласен.
Ну ну, а отображать текст инпутами — это семантично, да
Вполне table подходит, но нужно выделять для копирования только внутри таблицы. Пример давно реализованного мною варианта:
www.pleso.net/ru/publications/2007/10/16/gwt-ibatis/
www.pleso.net/ru/publications/2007/10/16/gwt-ibatis/
Ваше решение как раз из разряда «используют хитрую верстку, при которой возможно несовпадении нумерации со строками». По вашей ссылке это наглядно видно, когда строк более 10. То же самое можно сделать и без таблицы с двумя ячейками.
Проблемы такого подхода начинаются:
1. когда неправильно подобрана высота строки
2. когда строка кода переносится (не умещается по ширине)
Проблемы такого подхода начинаются:
1. когда неправильно подобрана высота строки
2. когда строка кода переносится (не умещается по ширине)
— строки никогда не переносятся, в примерах кода это не желательно — скопированный код часто не будет работать.
— да, небольшое несовпадение возможно, но я еще никогда не наблюдал — у меня четкое совпадение. Возможно там различаются шрифты. Альтернативный вариант — заключение в отдельные ячейки:
code.google.com/p/django-evolution/source/browse/trunk/README
— да, небольшое несовпадение возможно, но я еще никогда не наблюдал — у меня четкое совпадение. Возможно там различаются шрифты. Альтернативный вариант — заключение в отдельные ячейки:
code.google.com/p/django-evolution/source/browse/trunk/README
Если строки переносить без разрыва строки, то будет все работать
— Переносить строки хорошо для чтения. При копировании лишних переносов не будет — в том то и соль. Уменьшите окно браузера чтобы некоторые строки стали переноситься и скопируйте/вставьте текст.
— У меня явное несовпадение, при том что строк всего ничего (на скриншоте 18)
— У меня явное несовпадение, при том что строк всего ничего (на скриншоте 18)
— вопрос по переносам из розряда предпочтений. Мои IDE не переносят и так значительно более читабельно, струкруриванный код не путается.
— хм, браузер, платформа? Возможно елементы подсветки кода и font-weight:bold иногда делают строку выше. Разбиение на ячейки по примеру гугл-кода будет более надежным вариантом.
— хм, браузер, платформа? Возможно елементы подсветки кода и font-weight:bold иногда делают строку выше. Разбиение на ячейки по примеру гугл-кода будет более надежным вариантом.
— Дело не в IDE (в которой текст и не должен переносится автоматически), а как поступать с длинными строками. Или вам нравится когда у блока с кодом, как на скриншоте, есть горизонтальный скроллбар?
— win7, проблемы в Chrome 9, Firefox 3.6. В Opera 11.01 используется другой шрифт по умолчанию для pre и вроде ровно. В IE9 RC в режиме IE9 все нормально, в режиме IE7/8 такие же проблемы.
Проблема не в разбиении на ячейки, а в том что нужно вычислять высоту каждой строки и выставлять такую же высоту блоку, который содержит номер строки.
— win7, проблемы в Chrome 9, Firefox 3.6. В Opera 11.01 используется другой шрифт по умолчанию для pre и вроде ровно. В IE9 RC в режиме IE9 все нормально, в режиме IE7/8 такие же проблемы.
Проблема не в разбиении на ячейки, а в том что нужно вычислять высоту каждой строки и выставлять такую же высоту блоку, который содержит номер строки.
— да, собственно, так и было задумано
— шрифты, дело мутное. Если же таблица будет разбита на ячейки, выравнивает строки браузер. На то и были введены таблицы
— шрифты, дело мутное. Если же таблица будет разбита на ячейки, выравнивает строки браузер. На то и были введены таблицы
Да и вообще статья больше про то как вывести текст, который не будет копироваться в дальнейшем. Копирование кода без нумерации лишь частный случай, в качестве примера.
Удобно.
Можно использовать css counter-increment.
А я всегда закидываю в Idea, включаю column mode и в две секунды вырезаю ненужные циферки P
Во многих редакторах (н-р: Notepad++ ) есть «rectangular selection» (alt+shift+«стрелочки» или alt+click) — мегавещь, позволяет копировать, вставлять, удалять по вертикали.
Это все прекрасно, но требует дополнительных действий с вашей стороны, что совсем не экономит ваше время ;)
Это скорее раздел «Каскадные Таблицы Стилей», чем «Веб-разработка». Тем более, что в нём где-то уже есть вариант копирования кода.
спасибо, работает=)
начав или закончив выделение в столбце с номерами, я копирую и номера тоже.
firefox 3.6
причем при вставке они всегда идут перед кодом.
firefox 3.6
причем при вставке они всегда идут перед кодом.
хороший способ для нынешних реалий, но, черт возьми, как же все таки обидно, что браузерные стандарты такие разные…
UFO just landed and posted this here
хм, меня как-то не сильно напрягает после копипаста использовать Alt+Shift+стрелочки. На избавление от нумераций уходит секунд 5.
Кстати, у Вас на скриншоте горизонт завален.
В хроме такая бага есть(при перетаскивании выделенного текста)
Нумерация строк за 5 секунд готовым скриптом для vim или sed убирается. Если вдруг наткнётесь на сайт, автор которого решил что это не стоит таких костылей.
Вот, например:
$ xsel -o | sed 's/[0-9]\+ //' | xsel -i
Выделяете (в буфер) текст с нумерацией строк, выполняете (по кнопке в браузере, например) и получаете в буфере тот же текст без нумерации. Нумерацию без извращений использует, например, sprunge.us
(Решение для Windows дал ancalled выше, хоть оно и требует многомегабайтной коммерческой софтины)
Вот, например:
$ xsel -o | sed 's/[0-9]\+ //' | xsel -i
Выделяете (в буфер) текст с нумерацией строк, выполняете (по кнопке в браузере, например) и получаете в буфере тот же текст без нумерации. Нумерацию без извращений использует, например, sprunge.us
(Решение для Windows дал ancalled выше, хоть оно и требует многомегабайтной коммерческой софтины)
«КопиПаст» злейший враг программиста :)
Когда уже в браузерах сделают поддержку
выделения текста с зажатым Alt(как в MS Word)?
Вроде ничего сложного в этом нет.
выделения текста с зажатым Alt(как в MS Word)?
Вроде ничего сложного в этом нет.
Поощряете вы копипастеров, совсем ведь обнаглеют, и так спасения от них не найти. Если и правда повсеместно будет что-то подобное, я может быть, меньше стану использовать vim, регекспы… Может быть…
Расскажу о своем так и не реализованном способе:
Делаем спрайт с нумерацией от 0 до 9. Пишем js, который будет выводить наш код, например, так:
<pre><code>
<span><i class='one'></i>(function () { </span>
<span><i class='two'></i> var win = window,</span>
<span><i class='three'></i>...</span>
<span><i class='two'><i class=«one»></i></i>...</span>
</code>
</pre>
Пишем стили для строк. Каждый <i> это цифра, показывающая номер строки, т.е. <i class='one'></i> показывает цифру 1, <i class='two'></i> — 2, <i class='two'><i class='one'></i></i> — 21 и т.д.
По-моему такой подход более правильный, хотя и пример автора понравился, правда исходный код очень нагроможден.
Мысль такого вывода кода появилась давно, а написать js руки никак не доходят — извиняюсь):
Делаем спрайт с нумерацией от 0 до 9. Пишем js, который будет выводить наш код, например, так:
<pre><code>
<span><i class='one'></i>(function () { </span>
<span><i class='two'></i> var win = window,</span>
<span><i class='three'></i>...</span>
<span><i class='two'><i class=«one»></i></i>...</span>
</code>
</pre>
Пишем стили для строк. Каждый <i> это цифра, показывающая номер строки, т.е. <i class='one'></i> показывает цифру 1, <i class='two'></i> — 2, <i class='two'><i class='one'></i></i> — 21 и т.д.
По-моему такой подход более правильный, хотя и пример автора понравился, правда исходный код очень нагроможден.
Мысль такого вывода кода появилась давно, а написать js руки никак не доходят — извиняюсь):
В CSS будет, например, так:
i {width:42px;height:18px;display:block;background:url('s.gif') no-repeat}
.one {background-position:0 0}
.two {background-position:0 -18px}
.three {background-position:0 -36px}
…
.zero {background-position:0 -162px}
i {width:42px;height:18px;display:block;background:url('s.gif') no-repeat}
.one {background-position:0 0}
.two {background-position:0 -18px}
.three {background-position:0 -36px}
…
.zero {background-position:0 -162px}
Такая мысль мелькала, но не понравилось что есть зависимость от изображения, которое еще и не маштабируется
Ну как вариант, можно сделать так. Хотя зачем масштабировать номера строк, если по задаче нужно выделить код листинга без нумерации.
На разных платформах и в разных браузерах по разному выводятся шрифты, к тому же размер шрифта на экране может меняться.
На самом деле копирование кода без нумерации — случай частный. Хотелось показать на примере как выводить текст который не будет копироваться, а все поняли как будто копирование без нумерации основная цель статьи :)
На самом деле копирование кода без нумерации — случай частный. Хотелось показать на примере как выводить текст который не будет копироваться, а все поняли как будто копирование без нумерации основная цель статьи :)
Отличный способ. Спасибо.
Что-то у меня в IE7 при копировании теряются переводы строк — вставляется все в одну строку :(
Браузер должен оформлять код. Теги <b>, <ul>, <etc> он же оформляет.
Но в текущей ситуации я бы использовал <ol>.
Плюсы:
Минусы конечно тоже есть, и очень даже '—':
Реализация заключается в обычном заворачивании кода в <code> а потом js пробегаемся и заменяем пробелы/табы, одновременно оборачивая строки в <li></li>
Но в текущей ситуации я бы использовал <ol>.
Плюсы:
- Сами генерируются номера;
- Правильно выделяется (даже след пункт);
- При переносе строк номера не наезжают и строки переносятся.
Минусы конечно тоже есть, и очень даже '—':
- Необходимо все пробелы/табы заменять на « ».
Реализация заключается в обычном заворачивании кода в <code> а потом js пробегаемся и заменяем пробелы/табы, одновременно оборачивая строки в <li></li>
Sign up to leave a comment.
Копируем исходный код без нумерации строк