Наверняка многие из вас хотя бы однажды пользовались хабраконвертером, который официально рекомендован администрацией Хабра — https://shirixae.github.io/habraconverter-v2/. Несколько лет назад его создал хабравчанин meta4, а потом доработал Shirixae. Принцип простой: открываете гуглодок с постом, Ctrl-A, Ctrl-C и вставляете в окно конвертера. Нажимаете кнопку «Конвертировать» и получаете готовый код вёрстки, который можно вставлять в редактор Хабра и публиковать. Только перед этим нужно пройтись и поправить кое-какие мелочи.
И всё бы хорошо, если верстать приходится не слишком часто. Или посты небольшие, несложные. Но если вы верстаете помногу, и в постах есть и картинки, и таблицы, и куски кода, то из раза в раз приходится делать рутину: вставлять нужные пустые строки и убирать лишние, заменять теги <sоurce> на <cоde>, и т.д. и т.п. Мы решили потратить день, чтобы потом долетать за час, и допилили конвертер.
Новая версия лежит тут, а под катом — перечисление доработок.
Код конвертера небольшой, примерно 300 строк. Мы не ставили себе задачи глубоко его переработать, лишь подрихтовать, чтобы после конвертера меньше править руками. Так что сразу обращаем ваше внимание: в нашей версии много костылей и хардкода, и нас это полностью устраивает — своей цели мы достигли, а рефакторить ради красоты и ясности мы и не собирались.
Конечно, когда влезаешь в чужой код и что-то переделываешь, легче лёгкого наделать багов. Изначально список правок был таким:
- После абзацев нужно делать два переноса, чтобы между абзацами появлялась пустая строка.
- То же самое с картинками: теги
<img>должны сверху и снизу отделяться пустыми строками.- После
</sоurce>нужен только один перенос строки (без пустой строки).- Закрывающие теги
</li>хорошо бы помещать не на отдельных строках, а в конце предыдущих, так легче визуально воспринимать код вёрстки.- После
</a>перенос не делать.- После
</tаble>один перенос.- После
</h>не надо делать пустые строки, Хабр сам вставит.- Если строка заканчивается обычным текстом, то делать два переноса.
- После закрывающего тега
</ul>пустая строка не нужна, Хабр сам вставит.- то же самое с закрывающим тегом
</blockqoute>.- После абзацев нужно делать два переноса, чтобы между абзацами появлялась пустая строка.
- Потом мы научили конвертер распознавать, когда нужно вставлять
<cоde>, а когда<sоurce>(это моя любимая доработка). - Добавили правило, чтобы внутри тегов
<tаble></tаble>всегда используется только<cоde>, а не<sоurce>. - Заменили
<b>на рекомендуемый<strоng>. - Принудительно убрали из заголовков жирный текст и теги списков — кому нужно, вставят руками, а обычно это лишнее.
Исправили такие баги:
- Не обрабатывать содержимое
<>, оно всегда должно оставаться неизменным. Пример: код<img src="https://habrastorage.org/getpro/habr/post_images/208/1cc/1fa/2081cc1fa6dbebbbb6ddd4108512ff5b.png" align="cеnter">в тексте должен после конвертирования остаться таким же. - Есть какой-то конфликт, когда соседствуют
<ul>и<h>— возникают ненужные пустые строки между ними. - По ходу дела наш конвертер вдруг начинал вставлять лишние строки там, где их быть не должно. Потом в какой-то момент в тегах картинок стали добавляться лишние кавычки-ёлочки, тоже пришлось это выпиливать:
<img src="«https://habrastorage.org/getpro/habr/post_images/208/1cc/1fa/2081cc1fa6dbebbbb6ddd4108512ff5b.png»" аlign="«center»"> - Побороли неожиданное поведение, когда у первой картинки в вёрстке вставлялся атрибут
аlign="center", а у всех остальныхаlign="middle".
Ах да, и добавили над окном конвертирования кнопку «Копировать». Если вы хоть раз пробовали выделить получившийся результат на смартфоне, чтобы скопировать, то вы поймёте, что это чуть ли не лучшая наша доработка.
Сейчас после нашего конвертера приходится в разы меньше править мелкие недочёты, на которые при нашем месячном объёме публикаций тратилась куча времени. Как и все предыдущие версии, конвертер доступен всем желающим — pull request’ы и issue приветствуются.
Исходник: https://github.com/AloneCoder/habrconverter
Морда: https://alonecoder.github.io/habrconverter/
Автор: AloneCoder
