company_banner

Хабр Конвертер: чтобы версталось легко

    Наверняка многие из вас хотя бы однажды пользовались хабраконвертером, который официально рекомендован администрацией Хабра — https://shirixae.github.io/habraconverter-v2/. Несколько лет назад его создал хабравчанин meta4, а потом доработал Shirixae. Принцип простой: открываете гуглодок с постом, Ctrl-A, Ctrl-C и вставляете в окно конвертера. Нажимаете кнопку «Конвертировать» и получаете готовый код вёрстки, который можно вставлять в редактор Хабра и публиковать. Только перед этим нужно пройтись и поправить кое-какие мелочи.

    И всё бы хорошо, если верстать приходится не слишком часто. Или посты небольшие, несложные. Но если вы верстаете помногу, и в постах есть и картинки, и таблицы, и куски кода, то из раза в раз приходится делать рутину: вставлять нужные пустые строки и убирать лишние, заменять теги <sоurce> на <cоde>, и т.д. и т.п. Мы решили потратить день, чтобы потом долетать за час, и допилили конвертер.

    Новая версия лежит тут, а под катом — перечисление доработок.

    Код конвертера небольшой, примерно 300 строк. Мы не ставили себе задачи глубоко его переработать, лишь подрихтовать, чтобы после конвертера меньше править руками. Так что сразу обращаем ваше внимание: в нашей версии много костылей и хардкода, и нас это полностью устраивает — своей цели мы достигли, а рефакторить ради красоты и ясности мы и не собирались.

    Конечно, когда влезаешь в чужой код и что-то переделываешь, легче лёгкого наделать багов. Изначально список правок был таким:

    1. После абзацев нужно делать два переноса, чтобы между абзацами появлялась пустая строка.
    2. То же самое с картинками: теги <img> должны сверху и снизу отделяться пустыми строками.
    3. После </sоurce> нужен только один перенос строки (без пустой строки).
    4. Закрывающие теги </li> хорошо бы помещать не на отдельных строках, а в конце предыдущих, так легче визуально воспринимать код вёрстки. 
    5. После </a> перенос не делать.
    6. После </tаble> один перенос.
    7. После </h> не надо делать пустые строки, Хабр сам вставит.
    8. Если строка заканчивается обычным текстом, то делать два переноса.
    9. После закрывающего тега </ul> пустая строка не нужна, Хабр сам вставит.
    10. То же самое с закрывающим тегом </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/
    Mail.ru Group
    Строим Интернет

    Похожие публикации

    Комментарии 31

      +5
      Когда уже на хабре появится полноценный WYSIWYG редактор? CKEditor или подобное. Чтобы верстки вообще не видеть. 21й век на дворе вроде как…
        +10
        это ж вы предлагаете сделать удобный инструмент для пользователя и оставить целый отдел программистов без работы?
          +6
          А вот скоро уже и появится :) Но за конвертер AloneCoder огромное спасибо!
            +1

            Было бы крайне здорово иметь в нем все доступные функции форматирования типа цвета заголовков. Чтобы не лезть опять в мерзкий HTML ))

              0
              Мне всегда было интересно, почему разработчики блогов никогда не дают пользователям создавать интерактивные статьи? Почему обычно только вставка изображений и видео и все? Ну максимум имеется возможность опроса…
              Но ведь интересней, когда более интересно?
              Пример моей интерактивной статьи: marsohod.org/11-blog/245-spectr
                0
                На самом деле через oembed можно довольно много чего делать ) Согласен, что возможно интересней было бы, но вряд ли массово этим пользовались, да и некоторые новоиспечённые авторы едва справляются с markdown-разметкой (
                  0
                  Для этого должна прийти мода.
                  Ну и эту уникальную возможность можно рекламировать. Реклама заставляет человека нуждаться в том, о чем он раньше даже не подозревал.
                    +1

                    Как они едва справляются с markdown, когда это легче, чем html?

                      0

                      Кстати. С Markdown есть интересная особенность: если писать например в файл на гитхабе, то предложение можно разбивать на строки по 80 символов, и гитхаб это склетит обратно в одно предложение. А вот хабр так не умеет, и поэтому мне пришлось потом делать много правок вручную. А иметь целое предложение в одной строке часто неудобно, так как оно длинное.

                        0

                        Конечно может — это стандартное поведение, такая таска уже давно висит в dear-habr: Строки, разделенные одним разрывом, должны относиться к одному абзацу. В целом без него у хабровского markdown много багов.


                        А вот хабр так не умеет, и поэтому мне пришлось потом делать много правок вручную. А иметь целое предложение в одной строке часто неудобно, так как оно длинное.

                        Для этого рекомендую использовать конвертер MarkConv. Помимо исправления строк, он умеет править другой синтаксис, проверять и конвертировать ссылки. В общем конвертирует статью из формата GitHub в формат хабра одной командой. К сожалению, пока не хватает времени его допилить до более удобного вида, а также прописать README, а лучше статью.

                          0

                          Спасибо, в следующий раз попробую MarkConv)))

                      0

                      Очень не хватает возможности вставлять вот такое динамическое оформление:
                      https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=ru
                      Или подобное.

                  +4
                  Последний CKEditor в том же IPB настолько глучное и ужаснейшее тормозное УГ, со множеством переодических плавающих багов, вроде не удаляется символ, нет возврата каретки на первую строку, не переводится строка… и т.п, которое проявляется чёрт знает когда, но всегда неудобно…

                  В итоге меня почти вынудили перестать пользоваться форумом IPB только из-за CKEditor. Не в vim/vscode же комментарии писать. Так что 21-век, но лучше надёжное и оттестирование решение, чем тот же CKEditor.
                    0
                    Немного оффтоп, но что по поводу Summernote думаете?
                      0
                      До этого комментария не знал о его существовании. На первый взгляд очень даже приятненько. Попробую его позже привязать к блогу и потестировать. Хотя я в последнее время чаще склоняюсь к markdown редактированию, а не WYSIWYG.
                      0
                      Вообще-то «в том же IPB» далеко не «последний CKEditor». Чтобы что-то хаять, неплохо бы хотя бы немного знать предметную область.
                        0
                        invisioncommunity.com/4guides/themes-and-customizations/tips-tricks_362/styling-ckeditor-r178

                        The IPS Community Suite uses CKEditor to power its rich text editing capabilities.

                        Открываем тот же форум на IPB forum.bits.media, доходим до редактора и видим классы cke_

                        <div class="cke_wysiwyg_div cke_reset cke_enable_context_menu cke_editable cke_editable_themed cke_contents_ltr" hidefocus="true" tabindex="1" spellcheck="true" role="textbox" aria-multiline="true" aria-label="Enter your text; hold ctrl and right click for more options" title="Enter your text; hold ctrl and right click for more options" data-gramm="false" style="max-height: 345px;" contenteditable="true"><p><br></p></div>
                        
                          0
                          И? Это далеко не «последний CKEditor».
                      +2

                      Так используйте Markdown вместо html. Мне как программисту WYSIWYG не очень заходит. Тем более есть typora.

                        +3
                        Все визивиг'и так или иначе лажают. То одно, то второе и хорошо, когда можно посмотреть как оно происходит за занавеской и поправить руками. Для себя давно выбрал asciidoc для написания заметок и тому подобного.
                        +2

                        На всех сайтах с визивигом его вырубаю — маркдаун наше все. И нет страха что оно там как-то странно отрендерится или я не смогу совместить пару стилей вместе.

                        +2
                        Спасибо AloneCoder

                        Boomburum, ждём редактор ;)
                          +1
                          Хоть у кого-то руки дошли :)
                            0

                            После </blockquote> и перед <ul> в самое статье затесался лишний перенос строки, кстати.

                              0

                              А я делал конвертер Markdown с дополнительными фичами MarkConv, т.к. Markdown хабра отличается от формата, который поддерживается на GitHub и GitLab.

                                0
                                За улучшение конвертера Google Docs спасибо.

                                Мечтаю о переносе статей из MS Word 2019 на Хабр в один клик, без глюков, и дополнительных правок руками. Речь о сложных текстах, разумеется.

                                Свою статью пришлось готовить вручную «от и до» в редакторе Хабра, т.к. конвертеры не справлялись. Страшно сказать, сколько времени на это ушло.
                                  0
                                  А вы и 1, и 11 пункт реализовали или только какой-то один из них?
                                    0
                                    Конечно, оба два! (:
                                      0
                                      И теперь вставляет две строки, по одной на каждый пункт?
                                    0
                                    Простите за оффтоп, но не доводилось ли Вам встретить на просторах Сети плагин, убирающий эти дурацкие всплывающие окна GDPR (с вопросом «согласны ли Вы принимать куки»)?
                                      0
                                      Бесплатный плагин для браузеров «I don't care about cookies» можно найти здесь.

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое