Просмотр исходного текста страницы Как сделать правильную раскраску кода на «Хабре» и почему это так сложно

''<blockquote>Авторы статей на «Хабре» часто жалуются, что встроенный редактор текстов на сайте не поддерживает исходную разметку кода и подсвечивает его элементы некорректно. [[:Категория:Максим Зинченко (Статьи)|Максим Зинченко]], наш разработчик-эксперт, решил эту проблему. В своем посте он рассказал о процессе создания инструмента, который переносит раскраску кода из IDEA в статью на «Хабре», и об особенностях его использования. Подробности — в материале [https://habr.com/ru/company/custis/blog/472446/?fbclid=IwAR1cCR36U2KOxciqWl2eCvEk19qIzE5uzZQi7-ZGNY4SgkddrUsyZBEjT2c «Как сделать правильную раскраску кода на „Хабре“ и почему это так сложно»].</blockquote>''

Пару месяцев назад я&nbsp;опубликовал [https://habr.com/ru/company/custis/blog/460291/?fbclid=IwAR1JtiD2_zHCPhUTaAQdgcZ7Cv2g6rf4rUnfGXtC0JQ8HfNNjLfFPYq-GWI свой первый пост] на&nbsp;«Хабре». Возможно, кто-то из&nbsp;вас заметит, что код в&nbsp;статье раскрашен необычным образом, а&nbsp;главное&nbsp;— раскрашен правильно, несмотря на&nbsp;то, что встроенный редактор текстов на&nbsp;сайте не&nbsp;поддерживает исходную разметку кода и&nbsp;часто подсвечивает его элементы некорректно. При этом код не&nbsp;вставлен картинкой, как делают некоторые совсем отчаявшиеся писатели.

В&nbsp;моем случае сохранить разметку было особенно важно, поскольку статья представляла собой описание работы над кодом. Чтобы решить проблему, я&nbsp;создал [https://github.com/MZinchenko/code-converter инструмент], позволяющий перенести подсветку кода в&nbsp;выбранной схеме из&nbsp;IDEA в&nbsp;статью на&nbsp;«Хабре». Я&nbsp;расскажу о&nbsp;процессе создания инструмента и&nbsp;об&nbsp;особенностях его использования.

== Зачем все это ==

На первый взгляд может показаться, что это делается из&nbsp;озорства, просто потому, что не&nbsp;устраивает стандартная подсветка, реализуемая через тэг <code>&lt;source&gt;</code>.

В каком-то смысле это, конечно, так, но&nbsp;не&nbsp;совсем.

Во-первых, подсветка внутри <code>&lt;source&gt;</code> не&nbsp;может работать с&nbsp;кусками кода, поскольку информации для раскраски будет недостаточно. Все элементы, объявленные за&nbsp;рамками куска, будут краситься наугад. Эта проблема не&nbsp;имеет решения, так как, насколько я&nbsp;знаю, ни&nbsp;один из&nbsp;сервисов для онлайн-раскраски не&nbsp;позволяет сделать что-то из&nbsp;перечисленного ниже:

# Вставить в&nbsp;статью полный код проекта, не&nbsp;отображая его целиком, или вставить ссылку на коммит на&nbsp;GitHub. В&nbsp;конкретных местах статьи использовать вырезки строк из&nbsp;полного кода (c&nbsp;указанием диапазона). При этом подсветка должна определяться на&nbsp;основе полного кода, конечно же.
# Указать явно метаинформацию для неопределенных элементов. Довольно сложный путь для пользователя, но&nbsp;я&nbsp;бы согласился и&nbsp;на&nbsp;такое.

Во-вторых, подсветка внутри <code>&lt;source&gt;</code> никогда не&nbsp;сравняется по&nbsp;количеству разных типов элементов с&nbsp;обычной IDE. А из-за проблемы, описанной выше, делать продвинутую раскраску нет никакого смысла: никто же не&nbsp;вставляет в&nbsp;статью полный код проекта, поэтому этот функционал не&nbsp;сможет работать.

В то же время реалии таковы, что в&nbsp;статьи нужно вставлять именно куски кода, причем чем они меньше, тем лучше.

Читать код без подсветки можно, но&nbsp;зачем.

== Особенности «Хабр»-разметки ==

В IntelliJ IDEA есть встроенная поддержка экспорта кода в&nbsp;HTML. Обычное копирование кода кладет в&nbsp;буфер обмена в&nbsp;том числе раскрашенный код, который можно прочитать как HTML.

К сожалению, &laquo;Хабр&raquo; не&nbsp;разрешает использовать HTML-разметку в&nbsp;статьях напрямую. Причины этого&nbsp;&mdash; тайна, покрытая мраком, но, возможно, это связано с&nbsp;унификацией вида статей. Если позволить использовать HTML в&nbsp;статьях, можно будет наверстать такого, что возникнут проблемы с&nbsp;просмотром.

Я в&nbsp;целом поддерживаю идею запрета HTML в&nbsp;статьях, но&nbsp;есть нюанс. Ресурс для айтишников, где часто обсуждается код и&nbsp;при этом нет никакого способа корректно вставить его в&nbsp;статью,&nbsp;&mdash; это как-то странно.

Итак, у нас в распоряжении имеются тэги <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code>, <code>&lt;font&gt;</code>. Кроме того, все это работает внутри тэга <code>&lt;code&gt;</code>, который нужен для форматирования. Ну и <code>&nbsp</code><code>;</code> нам тоже сохранили, что полезно для длинных строк кода и отступов.

Стоит ли говорить, что все стандартные способы получить HTML-код из IDEA дают совсем не такой HTML, так что работа по преобразованию предстоит немаленькая.

== Подход ==

Для начала стоит сказать слова благодарности автору [https://habr.com/ru/users/capslocky/ capslocky] за&nbsp;его [https://habr.com/ru/post/242341/ материал]  по&nbsp;данной теме. Я не&nbsp;стал использовать предложенный в&nbsp;статье инструмент напрямую, да&nbsp;и&nbsp;вряд ли получилось бы, но&nbsp;благодаря этому материалу я&nbsp;понял всю глубину проблемы и&nbsp;в&nbsp;то же время ощутил ветер надежды.

Единственный минус этой публикации&nbsp;&mdash; большое количества кода в&nbsp;сочетании с очень скупым разъяснением того, что он&nbsp;делает и&nbsp;зачем.

Попробую исправить ситуацию и&nbsp;описать, что вам придется сделать со&nbsp;своей HTML-разметкой кода, если вы захотите привести его к&nbsp;виду, готовому к&nbsp;вставке на&nbsp;&laquo;Хабр&raquo;.

<ol>
	<li>Перед экспортом нужно установить в IDEA нужную цветовую схему, например [http://color-themes.com/?view=index с сайта Color Themes]. Экспортироваться код будет с&nbsp;выбранной схемой. Лучше выбирать схему с&nbsp;белым фоном (поскольку фон нельзя задать на «Хабре») и без подчеркиваний. Я не&nbsp;придумал, как их&nbsp;легко перетащить, так как не&nbsp;очень-то и&nbsp;хотелось.</li>
	<li>Работаем только с внутренностями тэга <code>&lt;pre&gt;</code>. Даже если вы используете экспорт не из IDEA, а какой-то другой, наверняка в HTML разметке будет этот тэг, так как без него сложно правильно отформатировать код. Сам тэг убираем, заменяя его на <code>&lt;code&gt;</code>.</li>
	<li>Текст, скорее всего, будет представлен в&nbsp;виде списка <code>&lt;span&gt;</code> с&nbsp;разными стилями. От&nbsp;них всех придется избавиться. Многие сервисы раскраски сводят стили в&nbsp;таблицу стилей, что логично, и&nbsp;используют ссылки на&nbsp;имена стилей. Конкретно IDEA пока такого не&nbsp;делает, что несколько облегчает задачу (настройки стиля лежат прямо в <code>&lt;span&gt;</code>).</li>
	<li>Задаем цвет шрифта через тэг <code>&lt;font&gt;</code>. Цвет фона задать, к&nbsp;сожалению, не&nbsp;получится.</li>
	<li>Свойство <code>font-style:italic</code> превращаем в&nbsp;пару тэгов <code>&lt;i&gt;</code><code>&lt;/i&gt;</code>, а <code>font-weight:bold</code> — в <code>&lt;b&gt;</code><code>&lt;/b&gt;</code>.</li>
	<li>Заменяем все пробелы на <code>&nbsp</code><code>;</code>.</li>
	<li>Переводы строк в виде <code>&lt;br&gt;</code> заменяем на <code>\n</code>.</li>
	<li>При HTML-разметке в IDEA получаются пустые строки со стилями и строки из пробелов со стилями. Такие стили лучше выкинуть: это сильно сократит длину и увеличит понятность кода.</li>
	<li>Следим за тем, чтобы у переводов строк не было никакого стиля. Иначе возникнут проблемы с&nbsp;пустыми строками. </li>
</ol>
Последний пункт проиллюстрирую примером:

<code>&lt;code&gt;</code>

<code>1</code><code>&lt;font color="000000"&gt;</code>

<code>&lt;/font&gt;</code><code>2</code>

<code>&lt;/code&gt;</code>

Данный код будет превращен «Хабром» в <code>12</code>. Это же касается тэгов <code>&lt;b&gt;</code> и <code>&lt;i&gt;</code>, а также любых их сочетаний. У переводов строк не должно быть стиля, и тогда все будет хорошо.

== Реализация ==

Поначалу задача написания конвертера для произвольного HTML-кода казалась мне довольно сложной. Однако если делать решение под конкретный вариант HTML, то все оказывается не&nbsp;так плохо. Мне удалось сделать все на&nbsp;чистом RegExp, то&nbsp;есть даже без парсинга HTML. Основной проблемой оказалось выявление особенностей &laquo;Хабр&raquo;-разметки.

Чтобы у переводов строк не&nbsp;было стилей, пришлось сделать довольно хитрые замены, которые, наверное, являются самыми непонятными (см. функцию popupBr). Идея в&nbsp;том, чтобы тэги <code>&lt;br&gt;</code> после каждой замены &laquo;всплывали&raquo; из&nbsp;глубины тэгов форматирования наружу. Таким образом, после всех замен тэг <code>&lt;br&gt;</code> оказывается вне форматирования.

Кроме того, оказалось, что IDEA кладет в&nbsp;буфер обмена не&nbsp;только Rich Text, но и&nbsp;довольно хитрые объекты типа <code>application/x-java-jvm-local-objectref</code>. Беда в&nbsp;том, что наличие таких объектов в&nbsp;буфере обмена приводит к&nbsp;постоянным ошибкам в&nbsp;моей консоли на&nbsp;тему constructing DataFlavor. К сожалению, тут ничего поделать нельзя: просто JDK так работает с&nbsp;буфером обмена. Для меня было открытием наличие [https://www.codesearch.cloud/openjdk/xref/jdk8u/jdk/src/share/classes/java/awt/datatransfer/SystemFlavorMap.java?r=0%3A37a05a11f281#523 такого вот кода]. Видимо, умные дяди, которые написали это, считают, что и&nbsp;так сойдет. В&nbsp;общем, не&nbsp;пугайтесь ошибок, которые могут возникнуть при работе с&nbsp;инструментом.

Проект написан на Kotlin и&nbsp;живет [https://github.com/MZinchenko/code-converter здесь].

Предложения по&nbsp;усовершенствованию всячески приветствуются! Например, было бы хорошо оформить данный инструмент как плагин для IDEA. Простого способа сделать это я&nbsp;пока не&nbsp;нашел: исходники плагина Copy as HTML, к сожалению, закрыты, а&nbsp;разбираться, как написать такой плагин с&nbsp;нуля, слишком долго.


[[Категория:Максим Зинченко (Статьи)]]
[[Категория:Хабрахабр (Публикации)]]
[[Категория:2019 год (Статьи)]]
[[Категория:CustisWikiToLib]]