Копируем исходный код без нумерации строк
Бывает при выводе информации требуется ее декорировать для лучшего восприятия, нередко оформление сопровождается в том числе и текстом. При выделении и копировании этой информации, оформление копировать не нужно, т.к. нужна только сама информация, и желательно в исходном виде. То есть при копировании часть выделенного текста не должна попадать в буфер обмена.
В моем случае это исходный код, который сопровождается нумерацией строк, так нагляднее и есть возможность сослаться на строку кода. Однако, если мы хотим скопировать часть кода, то он должен копироваться без номера строки.
Многие highlighter’ы этим грешат, при копировании кода копируют в том числе и номера строк. Выходят из ситуации по разному: либо используют хитрую верстку, при которой возможно несовпадении нумерации со строками (можно заметить на github например), или используют специальную кнопку, которая показывает в отдельном окне код без форматирования. Мне показались эти подходы неудовлетворительными, потому решил найти другое решение.
В данной заметке я опишу решение, к которому в итоге пришел. Решение, конечно, частное, но может кому то оказаться полезным в решении собственных задач.
Начнем с того, что кратко пройдемся по возможным вариантам решения.
Способ первый, очевидный.
Самый простой и очевидный способ, это сделать нумерованный список, где каждый элемент списка это отдельная строка. Основной плюс у этого подхода: все просто и не нужно задумываться даже о нумерации. Но при этом нельзя управлять форматом нумерации, нельзя позиционировать маркер (номер строки) и вообще как-то его декорировать. К тому же Internet Explorer и Firefox копируют текст вместе с маркером.
Собственно проблема с копированием перечеркивает возможность использования этого подхода.
Второй способ, менее очевидный.
Второе что приходит на ум — использовать генерируемый контент. Можно даже смирится с тем, что в старых IE это не будет работать (на этот случай можно, конечно, сделать fallback). Но беда в том, что Internet Explorer и Opera копируют весь видимый текст, в том числе и генерируемый контент.
Сложно сказать правы ли разработчики Internet Explorer/Opera или же правы разработчики webkit и Firefox относительно копирования генерируемого контента. Одно можно сказать с уверенностью, что метод не подходит.
Небольшая ремарка
Способ третий, ненормальный.
Вот, в принципе, и все.
В итоге имеем следующий html для блока с исходным кодом (переводы строк для наглядности, целевой html должен быть без них, иначе можем получить ненужные переводы строк при копировании):
И CSS для этого «безобразия»:
Демо на примере исходного кода atomjs (надеюсь TheShock не против 😉
Html-кода много, но он генерируется javascript’ом (свой highlighter).
Тестировалось под Chrome/Safari, Firefox 3.6, Opera 11, IE7-9 (переключением режимов в IE9 RC).
На что стоит обратить внимание
UPDATE
Найден workaroud чтобы при вставке в Word/Excel не вставлялись поля ввода. Чтобы этого добиться для нужно задать несуществующее значение атрибута type. В таком случае браузеры игнорируют атрибут и поле имеет тип по умолчанию, то есть type=«text», а при копировании (или вставке) не описаны сценарии как поступать с полями неизвестного типа — в итоге поле игнорируется. Так что код можно спокойно вставлять, например, в Word. При этом если код копируется из Chrome/Safari или из IE, то он будет вставлен с раскраской (webkit так же копирует и фон, а IE копирует без фона), что может в ряде случаев может оказаться полезным.
Программирование с нуля
Данная статья описывает основные конструкции в программировании и предназначена для тех, кто хочет в этом разобраться. Но статья не описывает все нюансы, потому что их слишком много. Если описывать их все, будет очень нудно и непонятно.
Использовать будем си-подобный синтаксис, то есть подобный языку си, но не будем вникать в заголовочные файлы, указатели и другие особенности относительно низкоуровневых языков, перейдём на синтаксис более высокоуровневых языков, которые сделают рутинную работу за нас. А конкретно, будем использовать синтаксис языка Java. Добро пожаловать под кат.
Двоичная система счисления
Числа в двоичной системе счисления состоят всего из двух знаков. Нуля и единицы. 00000001 – число один. 00000010 – число два. 00000100 – число 4. Как вы можете заметить, когда единица смещается влево, число увеличивается в два раза. Чтобы получилось число 3, необходимо написать 00000011. Таким образом можно составить все необходимые числа. В данном примере мы использовали двоичное число с восемью знаками, иначе говоря число восьмиразрядное. Чем больше у числа разрядов, тем большее оно может вместить значение. Например, восьмиразрядное число вмещает максимальное значение 255, если считать ноль, тогда 256, а в программировании ноль считается всегда. Если увеличить разряд на один, получится девятиразрядное число и его вместимость увеличится в два раза, то есть станет 512. Но так в программировании никогда не делается и обычно каждая следующая разрядность увеличивается вдвое. Один разряд, потом 2 разряда, потом 4 разряда, потом 8 разрядов, потом 16 разрядов, потом 32 разряда и далее.
Шестнадцатеричная система счисления
Всё аналогично двоичной, только вместо нулей и единиц участвуют цифры от 0 до 15. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, где A – 10, B – 11, C – 12, D – 13, E – 14, F – 15.
Знак минус в программировании
Буквы и знаки
Буквы, знаки, смайлики и так далее обозначаются также числами. Буква А может быть числом 00000001 или любым другим, или даже комбинацией чисел в зависимости от кодировки символов. Кодировок много.
Типы данных
В программировании есть типы данных. Числовые, такие как 233, которые разобрали выше. Называются почти везде int, от слова integer. С плавающей запятой, такие как 198,76, называются почти везде float. У букв тип char, у строк тип String. Тип bool имеет два значения – истина (true) и ложь (false). У этого типа реализация в разных языках разная, но самая простая, когда ноль — значит ложь, а любое другое число истину. Нестандартные типы данных, такие как числа с фиксированной запятой, рассматривать не будем.
Применение
Прежде чем использовать числа в программировании их нужно объявить, то есть сказать с помощью языка программирования, что они существуют.
Это стандартное объявление примитивного типа.
Сначала пишем тип, потом имя переменной, то есть нашего числа. Всегда заканчиваем наше выражение, да и любое, точкой с запятой.
Теперь мы можем использовать переменную по её имени.
Здесь мы присвоили переменной значение. В отличии от математики в программировании = значит взять значение справа и присвоить переменной слева. = — это знак/оператор присвоения.
Можно объединить объявление и присвоение, то есть сразу инициализировать переменную.
Буквы выделяются одинарными кавычками, строки выделяются двойными кавычками. Числа типа int не выделяются.
К числам с плавающей запятой одинарной точности в конце добавляется f.
К числам с плавающей запятой двойной точности ничего не добавляется.
Операторы
После того как мы записали наше выражение, например сложения,
получается значение. Но так как оно ни одной переменной не присваивается, оно исчезает. Чтобы присвоить значение переменной используется специальный оператор присвоения, который коротко описан выше.
Повторим ещё раз. Он берёт значение со своей правой стороны и присваивает его переменной в левой стороне. Это оператор =, и он не имеет ничего общего со знаком равно из математики.
Также у нас есть логические операторы, такие как (больше),
Распознавание текста с помощью OCR
Tesseract — это движок оптического распознавания символов (OCR) с открытым исходным кодом, является самой популярной и качественной OCR-библиотекой.
OCR использует нейронные сети для поиска и распознавания текста на изображениях.
Tesseract ищет шаблоны в пикселях, буквах, словах и предложениях, использует двухэтапный подход, называемый адаптивным распознаванием. Требуется один проход по данным для распознавания символов, затем второй проход, чтобы заполнить любые буквы, в которых он не был уверен, буквами, которые, скорее всего, соответствуют данному слову или контексту предложения.
На одном из проектов стояла задача распознать чеки с фотографий.
Инструментом для распознавания был использован Tesseract OCR. Плюсами данной библиотеки можно отметить обученные языковые модели (>192), разные виды распознавания (изображение как слово, блок текста, вертикальный текст), легкая настройка. Так как Tesseract OCR написан на языке C++, был использован сторонний wrapper c github.
Различиями между версиями являются разные обученные модели (версия 4 имеет большую точность, поэтому мы использовали её).
Нам потребуются файлы с данными для распознавания текста, для каждого языка свой файл. Скачать данные можно по ссылке.
Чем лучше качество исходного изображения (имеют значение размер, контрастность, освещение), тем лучше получается результат распознавания.
Также был найден способ обработки изображения для его дальнейшего распознавания путем использования библиотеки OpenCV. Так как OpenCV написан на языке C++, и не существует оптимального для нашего решения написанного wrapper’а, было решено написать собственный wrapper для этой библиотеки с необходимыми для нас функциями обработки изображения. Основной сложностью является подбор значений для фильтра для корректной обработки изображения. Также есть возможность нахождения контуров чеков/текста, но не изучено до конца. Результат получился лучше (на 5-10%).
language — язык текста с картинки, можно выбрать несколько путем их перечисления через «+»;
pageSegmentationMode — тип расположения текста на картинке;
charBlacklist — символы, которые будут игнорироваться ignoring characters.
Использование только Tesseract дало точность
70% при идеальном изображении, при плохом освещении/качестве картинки точность была
Vision + Tesseract OCR
Так как результат был неудовлетворителен, было решено использовать библиотеку от Apple — Vision. Мы использовали Vision для нахождения блоков текста, дальнейшего разделения изображения на отдельные блоки и их распознавания. Результат был лучше на
5%, но и появлялись ошибки из-за повторяющихся блоков.
Недостатками этого решения были:
MLKit
Еще одним из методов определения текста является MLKit от Google, развернутый на Firebase. Данный метод показал наилучшие результаты (
90%), но главным недостатком этого метода является поддержка только латинских символов и сложная обработка разделенного текста в одной строке (наименование — слева, цена — справа).
В итоге можно сказать, что распознать текст на изображениях — задача выполнимая, но есть некоторые трудности. Основной проблемой является качество (размер, освещенность, контрастность) изображения, которую можно решить путем фильтрации изображения. При распознавании текста при помощи Vision или MLKit были проблемы с неверным порядком распознавания текста, обработкой разделенного текста.
Распознанный текст может быть в ручную откорректирован и пригоден к использованию; в большинстве случаев при распознавании текста с чеков итоговая сумма распознается хорошо и не нуждается в корректировках.
Примеры кода на 39 эзотерических языках программирования
Кто-то ради шутки, кто-то чтобы доказать существование или опровергнуть гипотезу, кто-то для разминки мозгов (путешествуя по поверхности бутылки Клейна или в четырехмерном пространстве), но сотни людей создали «эзотерические» языки программирования. Я пролистал около 150 таких языков и больше никогда не смогу быть прежним.
«Argh!», «Oof!», «2-ill», «Nhohnhehr», «Noit o’ mnain gelb», «DZZZZ», «Ypsilax», «YABALL», fuckfuck — это заклинания, поэзия только названия… под катом — примеры кода на самых вырвиглазных языках программирования.
Кроличья нора глубока.
Коротко рассказываем о гибкой методологии разработки программного обеспечения (Agile), которую мы используем на проектах в EDISON Software Development Centre.
INTERCAL (тьюринг-полный)
Don Woods и Jim Lyon
Один из старейших эзотерических языков программирования. Как утверждают создатели, его название означает «Язык программирования с непроизносимой аббревиатурой» (англ. Compiler Language With No Pronounceable Acronym). Язык был создан в 1972 году студентами Доном Вудсом (Don Woods) и Джеймсом М. Лайоном (James M. Lyon) как пародия на существующие языки программирования и гимнастика ума.
Hello, world 
Каждой команде программы можно задать вероятность, с которой она будет выполняться при запуске программы. Кроме того, существуют команды, которые блокируют выполнение последующих команд определенного типа или изменения переменных.
Brainfuck (тьюринг-полный)
Один из известнейших эзотерических языков программирования, придуман Урбаном Мюллером (нем. Urban Müller) в 1993.
Hello, world!
Befunge
Стековый эзотерический язык программирования. Считается двумерным, так как программа на Befunge записывается в таблицу со сшитыми краями (тор), по которой в различных направлениях перемещается интерпретатор, исполняя команды, расположенные в её ячейках. Написан Крисом Пресси в 1993 году. Как утверждал автор, его целью было разработать язык, максимально сложный для компиляции. Сложность обеспечивается командами p и g, модифицирующими текст программы.
Hello, world! 
Malbolge
Язык разработан в с целью быть максимально сложным для написания программ. Получил своё название от Malebolge, восьмого круга ада Данте.
Язык Piet использует разноцветные изображения в качестве программ. Программа на Piet выглядит как постживописная абстракция. Piet получил своё название от имени нидерландского художника Пита Мондриана.
1L_a (expected to be Turing-complete, but this has not been proven)
Программа для печати символа «A»
Оригинал проги слева, справа — укрупненная версия
2L (тьюринг-полный)
Простой цикл, который получает 9 путем умножения 5 на 2 и вычитания 1
В 4DL для представления программы используется четырёхмерная решётка, и направлений её выполнения, соответственно, 8.
Программа, печатающая сумму чисел из входной строки:
Траектория выполнения приведённой выше программы в 4-мерном пространстве:
Aheui
Aheui (아희 на корейском) первый ЯП, который разработан на корейском алфавите Hangul.
Hello, world! 
BiTrax
Brainloller
Справа — оригинал, слева — увеличенная версия.
DOBELA
DOt-Based Esoteric LAnguage.
Floater
Hexagony
Hexagony — первый язык, где инструкции расположены внутри шестиугольной сетки. Название происходит от слов «hexagon» (шестиугольник) и «agony» (агония), потому что программирование будет сложным.
Hello, world! 
Язык логических вентелей и цифровых схем.
Manufactoria
Язык и игра в одном лице.
ObjectArt
Hello, world! 
Hello, world! 
Sir. Cut
Есть провода, токи, логические вентили и I/O.
SNUSP
Spiral
Hello, world! 
Spleenmap
Surface
В Surface программные инструкции расположены на 2D сетке вокруг бутылки Клейна.
Zetaplex
Lazy K
Тьюринговая трясина, основанная на комбинаторной логике.
Spoon
Коды команд подобраны таким образом, что позволяют распознавать все команды без дополнительного разделителя при разборе программы слева направо.
1111111111001000101111111010111111111101011101010
11011011011000001101011001010010100101011111110
01010001010111001010010110010100110111111111111
1111100101001000101011100101000000000000000000
000101000000000000000000000000000101001010010
10010001010
Velato
Whitespace
Whitespace (англ. пробел) – эзотерический язык программирования, созданный Э. Брэди и К. Моррисом. Существенным его отличием является то, что для управляющих конструкций используются только непечатаемые символы, а именно: пробел, перевод строки и табуляция. Интересным следствием этого факта является то, что текст программы на языке Whitespace можно «скрыть» внутри исходных кодов другой программы.
Hello, world! («Суслика не видно, но он есть»)
Откровенно шуточные ЯП
HQ9+ шуточный язык с четырьмя инструкциями:
H: Print «hello, world»
Q: Print the program’s source code
9: Print the lyrics to «99 Bottles of Beer»
+: Increment the accumulator
LOLCODE
Эзотерический язык программирования, созданный под влиянием интернет-мема о lolcat’ах. Есть спецификация этого языка и существуют несколько работающих интерпретаторов и компиляторов этого языка. LOLCODE является Тьюринг-полным языком.
// «Hello World» by Stephen McGreal.
// Note that the views expressed in this source code do not necessarily coincide with those of the author :o)
Gr34t l33tN3$$?
M3h…
iT 41n’t s0 7rIckY.
l33t sP33k is U8er keWl 4nD eA5y wehn u 7hink 1t tHr0uGh.
1f u w4nn4be UB3R-l33t u d3f1n1t3lY w4nt in 0n a b4d4sS h4xX0r1ng s1tE. ;p
w4r3Z c0ll3cT10n2 r 7eh l3Et3r!
Qu4k3 cL4nS r 7eh bE5t tH1ng 1n teh 3nTIr3 w0rlD.
g4m3s wh3r3 u g3t to 5h00t ppl r 70tAl1_y w1cK1d.
I’M teh fr4GM4stEr aN I’lL t0t41_1Ly wIpE teh phr34k1ng fL00r ***j3d1 5tYlE*** wItH y0uR h1dE. L0L0L0L!
t3lEphR4gG1nG l4m3rs wit mY m8tes r34lLy k1kK$ A$$
l33t hAxX0r$ CrE4t3 u8er- k3wL 5tUff lIkE n34t pR0gR4mm1nG lAnguidGe$…
s0m3tIm3$ teh l4nGu4gES l00k jUst l1k3 rE41_ 0neS 7o mAkE ppl Th1nk th3y’r3 ju$t n0rMal lEE7 5pEEk but th3y’re 5ecRetLy c0dE.
n080DY unDer5tAnD$ l33t SpEaK 4p4rT fr0m j3d1.
50mE kId 0n A me$$4gEb04rD m1ghT 8E a r0xX0r1nG hAxX0r wH0 w4nT2 t0 bR34k 5tuFf, 0r mAyb3 ju5t sh0w 7eh wAy5 l33t ppl cAn 8E m0re lIkE y0d4. hE i5 teh u8ER.
1t m1ght 8E 5omE v1rus 0r a Pl4ySt4tI0n ch34t c0dE.
1t 3v3n MiTe jUs7 s4y «H3LL0 W0RLD. » u ju5t cAn’T gu3s5.
tH3r3’s n3v3r anY p0iNt l00KiNg sC3pT1c4l c0s th4t, be1_1Ev3 iT 0r n0t, 1s whAt th1s 1s.
ArnoldC
Язык программирования терминатора.
То ли язык орангутангов, то ли мечта Вильяма Оккама.
Эзотерический язык программирования, разработанный Дэвидом Морган-Маром, программы на котором сходны с кулинарными рецептами. Каждая программа в языке состоит из названия, списка переменных и их значений, списка инструкций. Переменные могут быть названы только названиями основных продуктов питания. Стек, в которые помещаются значения переменных, называется англ. mixing bowl («чаша для смешивания»), а операции для манипуляции с переменными — mix («смешать»), stir («взболтать») и так далее.
Hello World Souffle.
Ingredients.
72 g haricot beans
101 eggs
108 g lard
111 cups oil
32 zucchinis
119 ml water
114 g red salmon
100 g dijon mustard
33 potatoes
Method.
Put potatoes into the mixing bowl.
Put dijon mustard into the mixing bowl.
Put lard into the mixing bowl.
Put red salmon into the mixing bowl.
Put oil into the mixing bowl.
Put water into the mixing bowl.
Put zucchinis into the mixing bowl.
Put oil into the mixing bowl.
Put lard into the mixing bowl.
Put lard into the mixing bowl.
Put eggs into the mixing bowl.
Put haricot beans into the mixing bowl.
Liquefy contents of the mixing bowl.
Pour contents of the mixing bowl into the baking dish.
Shakespeare
Эзотерический язык программирования разработанный Джоном Аслаудом и Карлом Хассельстромом. Язык Shakespeare призван замаскировать исходный код программы под пьесы Шекспира.
Romeo, a young man with a remarkable patience.
Juliet, a likewise young woman of remarkable grace.
Ophelia, a remarkable woman much in dispute with Hamlet.
Prince Hamlet, the flatterer of Andersen Insulting A/S.
Act I: Hamlet’s insults and flattery.
Scene I: The insulting of Romeo.
[Enter Hamlet and Romeo]
Hamlet:
You lying stupid fatherless big smelly half-witted coward! You are as
stupid as the difference between a handsome rich brave hero and thyself!
Speak your mind!
You are as brave as the sum of your fat little stuffed misused dusty
old rotten codpiece and a beautiful fair warm peaceful sunny summer’s
day. You are as healthy as the difference between the sum of the
sweetest reddest rose and my father and yourself! Speak your mind!
You are as cowardly as the sum of yourself and the difference
between a big mighty proud kingdom and a horse. Speak your mind.
Speak your mind!
[Exit Romeo]
Scene II: The praising of Juliet.
[Enter Juliet]
Hamlet:
Thou art as sweet as the sum of the sum of Romeo and his horse and his
black cat! Speak thy mind!
[Exit Juliet]
Scene III: The praising of Ophelia.
[Enter Ophelia]
Hamlet:
Thou art as lovely as the product of a large rural town and my amazing
bottomless embroidered purse. Speak thy mind!
Thou art as loving as the product of the bluest clearest sweetest sky
and the sum of a squirrel and a white horse. Thou art as beautiful as
the difference between Juliet and thyself. Speak thy mind!
[Exeunt Ophelia and Hamlet]
Act II: Behind Hamlet’s back.
Scene I: Romeo and Juliet’s conversation.
[Enter Romeo and Juliet]
Romeo:
Speak your mind. You are as worried as the sum of yourself and the
difference between my small smooth hamster and my nose. Speak your
mind!
Juliet:
Speak YOUR mind! You are as bad as Hamlet! You are as small as the
difference between the square of the difference between my little pony
and your big hairy hound and the cube of your sorry little
codpiece. Speak your mind!
[Exit Romeo]
Scene II: Juliet and Ophelia’s conversation.
[Enter Ophelia]
Juliet:
Thou art as good as the quotient between Romeo and the sum of a small
furry animal and a leech. Speak your mind!
Ophelia:
Thou art as disgusting as the quotient between Romeo and twice the
difference between a mistletoe and an oozing infected blister! Speak
your mind!
[Exeunt]
