Бывает при выводе информации требуется ее декорировать для лучшего восприятия, нередко оформление сопровождается в том числе и текстом. При выделении и копировании этой информации, оформление копировать не нужно, т.к. нужна только сама информация, и желательно в исходном виде. То есть при копировании часть выделенного текста не должна попадать в буфер обмена.
В моем случае это исходный код, который сопровождается нумерацией строк, так нагляднее и есть возможность сослаться на строку кода. Однако, если мы хотим скопировать часть кода, то он должен копироваться без номера строки.
Многие highlighter’ы этим грешат, при копировании кода копируют в том числе и номера строк. Выходят из ситуации по разному: либо используют хитрую верстку, при которой возможно несовпадении нумерации со строками (можно заметить на github например), или используют специальную кнопку, которая показывает в отдельном окне код без форматирования. Мне показались эти подходы неудовлетворительными, потому решил найти другое решение.
Как скопировать код из любого видео
В данной заметке я опишу решение, к которому в итоге пришел. Решение, конечно, частное, но может кому то оказаться полезным в решении собственных задач.
Начнем с того, что кратко пройдемся по возможным вариантам решения.
Способ первый, очевидный.
Самый простой и очевидный способ, это сделать нумерованный список, где каждый элемент списка это отдельная строка. Основной плюс у этого подхода: все просто и не нужно задумываться даже о нумерации. Но при этом нельзя управлять форматом нумерации, нельзя позиционировать маркер (номер строки) и вообще как-то его декорировать. К тому же Internet Explorer и Firefox копируют текст вместе с маркером.
Собственно проблема с копированием перечеркивает возможность использования этого подхода.
Второй способ, менее очевидный.
Второе что приходит на ум — использовать генерируемый контент. Можно даже смирится с тем, что в старых IE это не будет работать (на этот случай можно, конечно, сделать fallback). Но беда в том, что Internet Explorer и Opera копируют весь видимый текст, в том числе и генерируемый контент.
Сложно сказать правы ли разработчики Internet Explorer/Opera или же правы разработчики webkit и Firefox относительно копирования генерируемого контента. Одно можно сказать с уверенностью, что метод не подходит.
Небольшая ремарка
В webkit и Firefox поддерживаются такое свойство CSS как user-select (со своими префиксами -webkit-user-select и -moz-user-select), с помощью которых можно запретить выделять текст. В Internet Explorer’е есть html атрибут unselectable. Однако все это лишь предотвращает начало процесса выделения, то есть если текст все же попал в область выделения, то он будет скопирован.
Более того, все блоки попавшие в область выделения, даже невидимые (display: none; или visibility: hidden;) так же в итоге попадают в буфер обмена.
Все это весьма печально, так как нет нормального способа определить — какой текст нужно копировать, а какой нет.
Как скопировать сайт за 5 минут? | Два способа, установка админки и загрузка на хостинг
Способ третий, ненормальный.
Блуждая по интернетам в поисках решения, что-то навело на мысль использовать для вывода декоративного текста. Да-да, поле ввода для вывода текста. Необходимый текст прописываем в значение value, убираем padding, margin, border, background, задаем остальные стили — и никто не скажет что это input. Выделяем наш текст, копируем, вставляем в блокнот — все браузеры ведут себя одинаково, теги с содержимым не вставляются.
Остается побороть неприятный момент, поле ввода может получать фокус, и нельзя начать выделение текста с нумерации — выделяется текст поля. Но это уже, на самом деле, мелочи.
Чтобы нельзя было передать полю фокус мышкой в webkit и Firefox есть приятность — это CSS свойство pointer-events, которому можно задать значение none. Для Internet Explorer’а можно добавить для поля атрибут unselectable=«on». С Opera пока никак.
Чтобы нельзя было передать фокус с клавиатуры (и другими способами) добавляем для атрибуты readonly и tabindex=»-1″.
В Firefox и webkit все отлично, но в Internet Explorer нельзя начать выделение начиная с области нумерации, а в Opera по прежнему выделяется текст поля, а не исходный код. Чтобы решить проблему добавим для каждого дополнительный блок, который будет перекрывать . Этот блок должен иметь те же размеры, что и , а так же быть прозрачным. К сожалению (или к счастью), если если блок не имеет фона, то он «простреливается», то есть ведет себя как будто его нет, потому ему нужно добавить background. Можно добавить либо прозрачный gif файл, либо просто путь к несуществующему файлу, например background: url(#); (можно было бы использовать rgba(), но в IE это поддерживается только начиная с 9й версии).
Вот, в принципе, и все.
В итоге имеем следующий html для блока с исходным кодом (переводы строк для наглядности, целевой html должен быть без них, иначе можем получить ненужные переводы строк при копировании):
.. текст .. . .
И CSS для этого «безобразия»:
.code < border: 1px solid #E0E0E0; padding: 1px; margin: 0 1ex; overflow: hidden; font-family: Consolas, monospace; font-size: 100%; color: black; line-height: 1.4em; white-space: pre; /* важно чтобы сохранялись переносы */ >.line < position: relative; /* для webkit, иначе при начале выделения с нумерации будет выделяться текст с самого начала блока */ zoom: 1; /* для IE6/7 */ white-space: pre; /* важно чтобы сохранялись переносы в IE7 */ >.even < background: #F8F8F8; >.odd < background: #F0F0F0; >.lineNumber < display: block; position: absolute; left: 0; padding: 0 .5ex; margin: 0; width: 6ex; line-height: 1.4em; height: 1.4em; background: none; border: none; font-family: Consolas, monospace; font-size: 100%; text-align: right; color: #666; -moz-user-select: none; /* задаем user-select для Firefox user-select: none; pointer-events: none; /* фактически это свойство делает ненужным блок .over, но пока оно поддерживается только в Firefox .over < display: block; position: absolute; left: 0; width: 7ex; height: 1.4em; z-index: 1; background: url(.); /* для IE и Opera, иначе блок будет «простреливаться» (пропускать события мыши нижележащим блокам) */ >.lineContent < margin-left: 7ex; padding-left: 2ex; border-left: 2px solid #33BB66; display: block; white-space: pre-wrap; /* сохраняем форматирование, но оставляем возможность переносить по словам */ >.token-string < color: blue; >.token-comment < color: #008200; >.token-keyword
Демо
Демо на примере исходного кода atomjs (надеюсь TheShock не против 😉
Html-кода много, но он генерируется javascript’ом (свой highlighter).
Тестировалось под Chrome/Safari, Firefox 3.6, Opera 11, IE7-9 (переключением режимов в IE9 RC).
На что стоит обратить внимание
- Решение использует только возможности HTML и CSS, без спец хаков для браузеров.
- webkit впереди планеты всей, лучше всего работает в браузерах на его движке, можно сказать идеальный сценарий.
- Для Firefox пробелы в начале строк нужно заменять на иначе при копировании они будут вырезаться.
- В Opera текст начинает выделятся только если курсор мыши находится непосредственно над текстом. Начать выделение можно и с нумерации, но фактически текст начнет выделяться только когда курсор окажется над текстом.
- Важна вложенность свойства white-space. В данном случае ключевыми блоками является .code -> .line -> .lineContent, поэтому рабочим будет цепочка pre -> pre -> pre-wrap и, возможно, другие варианты (нужно проверять). От заданых значений зависит как браузер будет трактовать блоки при преобразовании в текст; при определенных значениях браузер может любой блочный элемент (display: block) выделять в отдельную строку текста, при этом могут получиться пустые строки между строками текста или же игнорировать переносы (например, IE7 может копировать весь текст одной строкой).
- При вставке в редактор, который понимает text/html (например, MS Word), так же вставятся поля. Момент неприятный, но чаще редакторы не понимают text/html, так что переживать не стоит.
UPDATE
Найден workaroud чтобы при вставке в Word/Excel не вставлялись поля ввода. Чтобы этого добиться для нужно задать несуществующее значение атрибута type. В таком случае браузеры игнорируют атрибут и поле имеет тип по умолчанию, то есть type=«text», а при копировании (или вставке) не описаны сценарии как поступать с полями неизвестного типа — в итоге поле игнорируется. Так что код можно спокойно вставлять, например, в Word. При этом если код копируется из Chrome/Safari или из IE, то он будет вставлен с раскраской (webkit так же копирует и фон, а IE копирует без фона), что может в ряде случаев может оказаться полезным.
Источник: habr.com
VSC | Как скопировать код с подсветкой синтаксиса в виде HTML-разметки с цветами?
На этом сайте пишу публикации и периодически вставляю кусочки кода из редакторов. Часто приходится разукрашивать синтаксические элементы языковых конструкций JavaScript.
Для небольших кодов я вручную присваиваю цвета в блоках PRE при помощи редактора публикаций WordPress.
Но на больших фрагментах кода делать разукрашивание ручным способом довольно запарно. Хочется просто взять из редактора кода visual studio code нужный фрагмент и просто скопировать его в WordPress. Как это сделать?
Я нашёл один способ. Может быть он вам поможет избежать головной боли. Способ не самый удобный, но рабочий. Вы получите 100% отображение кода в WordPress также, как вы видите его в VSC.
Шаг № 1 — Копируем код в редакторе VSC
Выделяем нужный кусок кода в самом редакторе VSC и затем копируем его в буфер обмена.
Шаг № 2 — Вставляем скопированный код из VSC в новый документ MS WORD
MS WORD и VSC принадлежат компании Microsoft, а значит код вставится в новый документ идеально. Вы будете видеть ту же цветовую палитру
Шаг № 3 — Сохраняем новый документ MS WORD в виде « Веб-страница с фильтром (*.htm; *.html) «
Шаг № 4 — Открываем сохранённый документ обычным Блокнотом
Вся разметка будет представлять собой стандартную структуру HTML-документа. Но нам нужно только два блока из неё, потому что мы планируем вставлять эти два размеченных цветных блока в свой документ.
Шаг № 5 — Копируем только блок style и блок div со всеми абзацами p
Нетрудно догадаться, что блок style хранит в себе общее стилевое CSS-оформление для блоков, представляющих код.
Блок div с p состоит из span’ов, которые оформляются инлайновыми стилями в виде атрибута style, без дополнительных подгружаемых файлов. Это как раз то, что нам и нужно.
Шаг № 6 — Вставляем размеченный код с инлайновыми стилями в нужную часть нашего HTML-документа
Там где у вас будут запятые в коде, может перенестись на новую строку. Но это не критично и можно быстро поправить.
Ниже пример вставленного кода:
if ( ! defined ( ‘CZR_MIN_PHP_VERSION’ ) ) define ( ‘CZR_MIN_PHP_VERSION’ , 5.3 );
if ( ! defined ( ‘CZR_MIN_WP_VERSION’ ) ) define ( ‘CZR_MIN_WP_VERSION’ , 4.5 );
if ( version_compare ( phpversion (), CZR_MIN_PHP_VERSION, ‘
add_action ( ‘admin_notices’ , ‘czr_fn_display_min_php_message’ );
if ( version_compare ( $wp_version , CZR_MIN_WP_VERSION, ‘
add_action ( ‘admin_notices’ , ‘czr_fn_display_min_wp_message’ );
Источник: efim360.ru
Вопрос Как скопировать полный код программы написанной в Delphi?
Добрый день. У меня есть программа сделанная в Делфи. Мне в реферат нужно привести ее код. Где мне найти весь и пооный код?
[email protected]
[email protected]
Регистрация 24 Июн 2013 Сообщения 86 Репутация 0 Спасибо 0 Монет 0
если нет исходников, то никак
саша6546
саша6546
Регистрация 21 Сен 2013 Сообщения 73 Репутация 0 Спасибо 0 Монет 0
так открой в редакторе или блокнотом и скопируй.. там же просто текст.. или у тебя нет исходников??
Статус В этой теме нельзя размещать новые ответы.
Похожие темы
Ответы 4 Просмотры 106
Ответы 4 Просмотры 113
Ответы 4 Просмотры 40
Ответы 4 Просмотры 120
- Leksys
- 18 Июн 2023
- Вопросы о World of Warcraft
Ответы 5 Просмотры 164
Поделиться:
- Крипта, интернет, софт
- Разработка игрового ПО
- Программирование
- Вопросы по Delphi
- Обратная связь
- Условия и правила
- Политика конфиденциальности
- Помощь
- RSS
На данном сайте используются файлы cookie, чтобы персонализировать контент и сохранить Ваш вход в систему, если Вы зарегистрируетесь.
Продолжая использовать этот сайт, Вы соглашаетесь на использование наших файлов cookie.
Источник: 4cht.com