Хабрахабр

Пост-пост, мета-мета. Учимся писать на Хабр

— А далеко до релиза?
— Да пара вёрсток.

Хотя причины есть — я пять лет занимаюсь этим, перевидал и перепробовал кучу инструментов, так что теперь делюсь с вами самыми лучшим. Докатился — пишу на Хабр о том, как писать на Хабр.

Здесь — о моём опыте в Яндекс.Деньгах и о том, как я организовал работу над хабратекстами, чтобы не было мучительно больно. Я расскажу о том, как прийти от HTML-разметки в Хабраредакторе к осмысленной вёрстке, быстрому оформлению постов и продуктивной совместной работе.

Стили — наше всё

Начну с не самой очевидной для такого поста вещи.

Речь не об инфостиле или там научно-художественном, а о том, как ваш текст выглядит. Стили — штука, которую я активно прививаю своим коллегам и студентам. (В этом месте хитро хмыкнули LaTex-ребята — вы слишком крутые, дайте нам, простым смертным, позабавиться с оформлением.) Если вы однажды научитесь верстать стилями, обратного пути уже не будет.


Меню, которым никто не знает, как пользоваться

Этот шаблон в Word и Google Docs называется стилем. Суть проста — вы оформляете кусок текста нужным образом, сохраняете шаблон и потом применяете его везде, где нужно. Студенты, которые верстали диплом стилями, на 90% счастливее тех, кто вручную менял шрифт, отступы и всё остальное у каждого абзаца и заголовка на ста страницах текста.

Разобраться с этим совсем просто — h1, h2, h3 и h4 — как в html. С Хабром всё, конечно, проще — достаточно понимать структуру своей статьи и расставлять заголовки нужного уровня.

Разберитесь с маркдауном

Если вы вдруг ещё не.

Она выглядела как что-то вражеское и непохожее на привычные HTML-теги и полностью отталкивала от себя. Markdown — сущность, которая пугала меня с тех пор, как появилась в хабраредакторе. Практика показала, что из двух вариантов лучше выбрать именно его.

Хотя, конечно, лучше выберите другой инструмент. Даже если вы пишете во встроенном редакторе хабра (хотя администрация и не рекомендует этого делать), markdown сэкономит вам кучу времени и сил. Хабраредактор годится для правильного предпросмотра, да и всё.

У Хабра markdown со своим вкусом — по ссылке понятное руководство, с которого точно стоит начать путь в мир отсутствия страдания при вёрстке хабрапостов. Markdown чуть-чуть отличается от случая к случаю.

Где писать?

Единственное, что нужно помнить: удобно писать != удобно верстать для Хабра. Пишите там, где вам удобно. Если вам удобен vim — продолжайте, а я расскажу о более консервативных способах писать тексты и о том, как они применимы на Хабре.

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

Visual Studio Code (или Sublime)

Левая половина экрана — под текст, правая — отображение свёрстанного в Markdown текста через соответствующий плагин. Я пишу этот текст (и большинство других) в VS Code, сразу в маркдауне. Плагин называется Markdown MPE Preview — поддерживает загрузку картинок с компьютера на imgur и вставку ссылок в нужное место текста.


Пост-пост, мета-мета

Точно знаю, что там тоже есть всякое для работы с маркдауном — пользуйтесь им, если вам удобнее. Некоторые пишущие ребята могут меня осудить — дескать, Sublime Text 3 лучше. Главное, пишите хорошо 🙂 Ну и вообще, редакторов — десятки, если не сотни, под все платформы и на любой вкус.

Microsoft Word

И у ваших соавторов (если у вас есть соавторы), скорее всего, тоже. Если у вас есть компьютер на Windows, скорее всего, там установлен Word. Это нормальный и привычный для большинства инструмент, хоть и платный.

Эта боль, насколько мне известно, преследует и некоторых дизайнеров, иллюстраторов и других «правочных» ребят. Проблема в том, что в Word (если у вас нет королевской подписки) нельзя редактировать документы совместно, а значит, работа сведется к Черновик_Хабр_Тестирование_разработки_финальная_2_c_правками_от_начальника_3_заметкиPR.docx.

Основная беда в том, что без ритуальных плясок вы не будете видеть текст так, как он будет выглядеть на сайте. Но даже это не так страшно. Осознание катастрофы приходит после первых нескольких часов, потраченных на перенос текста из вордовского файла. Сначала кажется, что в этом ничего страшного.

Не сомневаюсь, что они есть, но хабратексты Яндекс.Денег в Ворде если и пишутся, то только некоторыми авторами, а потом оперативно превращаются в маркдаун. Честно говоря, мне неизвестно о каких-то публичных конвертерах из doc в markdown, который нормально примет Хабр.

Google Docs

Максимально готова к совместной работе многих авторов, редакторов и остальных сочувствующих. Общеизвестно отличная штука, еще и бесплатная. Требует гугл-аккаунт, но у кого сейчас его нет? Функциональности хватит на что угодно.

Разные разработчики, разные блоки, абзацы, но все видят всё, и ничего никуда не потеряется. В гугл-доке удобно работать, если несколько человек пишут разные части одного и того же текста — например, про работу платежных API на iOS и Android. Отдельный плюс — история правок.

Здесь, как и в Word, достаточно расставить заголовки, и тогда при экспорте не придётся делать кучу лишней работы.

Но если вы не пишете ничего, содержащего NDA, то и ничего страшного. Минусы — если вы делитесь ссылкой на файл, то ей гораздо проще утечь куда-то не туда. Еще тут всё сложно с предварительным просмотром навёрстанного, но есть и плюсы — перенос текста из гугл-дока на хабр намного проще.

Что ещё бывает

По этическим причинам я не могу этого показать (мне и самому страшно открывать это), но поверьте — все варианты выше точно лучше. Ещё есть невероятный мир текстов в txt-файлах с абзацными отступами в три-пять пробелов.

Как ещё улучшить себе жизнь

Типограф

Для этого есть типограф студии Лебедева — загрузите туда текст, и через секунду получите красивый результат. Ваш текст будет в сто раз лучше, если там будут стоять правильные кавычки, тире и исчезнут случайные двойные пробелы.

Картинки тоже потеряются. Здесь проявляется еще один плюс маркдауна — если вы закинете целиком гугл-док или сверстанный вордовский файл в типограф, на выходе всё равно получите plain text. А с маркдауном проблемы нет — вёрстка генерируется после, а картинки стоят ссылками, поэтому можно это делать в любом количестве, успевай только жать Ctrl+A.

С другой стороны, если вы не пишете в корпоративные блоги и просто делитесь штуками на Хабре, то это хорошее подспорье в работе. Конечно, это не отменяет необходимости проверки текста хорошим корректором.

Хабраконвертеры

Идеальный мне пока не попадался, поэтому обычно я совмещаю функциональность двух хороших. Текст из Google Docs можно переносить разными способами — руками или через разные конвертеры.

Скопируйте целиком гугл-док в текстовое поле — вот и всё. Первый — https://shirixae.github.io/habraconverter-v2/. Хорош ещё и тем, что выдергивает из гугл-дока ссылки на картинки — их, конечно, нужно перезалить на Habrastorage, но лучше, чем ничего. Он генерирует приличный Markdown, если вы не забыли расставить заголовки.

Генерирует лучший markdown-код, хорошо работает с разрывами строк, но не умеет в картинки. Второй — расширение Docs To Markdown.

Почему это важно — если пять человек пишут текст с картинками, то оказывается довольно сложно получить от всех файлы, которые потом нужно отсортировать, разложить в верном порядке и опубликовать.

Конечно, если вы пишете сами и всё заботливо пронумеровано и разложено по папочкам, то просто заливайте на Habrastorage.

Звучит не суперпросто, но экономит бесконечное количество времени. Когда редактирую текст нескольких авторов, делаю так — беру текст из второго конвертера, а картинки перезаливаю на Habrastorage по ссылкам из первого.

Полезные советы про markdown и не только

  1. Разбивайте текст на абзацы. Пожалуйста!
  2. Картинки — на Habrastorage. Это очевидно, но лучше повторить. Нет ничего хуже, чем открыть полезный пост пятилетней давности и понять, что ссылки на картинки давно протухли. К слову, HS отдаёт готовые ссылки, обёрнутые в Markdown.
  3. В нумерации списков важен только первый элемент, остальные ставьте как угодно. Это полезно, если вы решили переставить местами элементы списка на 10 элементов, но лень менять цифры.
  4. Таблицы — картинками. В маркдауне весёлые таблицы, которые ломают мозг в первые несколько раз, но Хабр не умеет их красиво отображать — тексты в ячейках переносятся на новую строку. Лучше рисуйте их где-то ещё и вставляйте PNG.
  5. Новый гугл-док создаётся по ссылке doc.new — добавьте её на панель закладок, чтобы каждый раз экономить время.
  6. Храните черновики — синхронизируйте их с каким-нибудь облаком. Конечно, всегда можно достать вёрстку из публикации на Хабре, но, как показывает практика, так надёжнее.
  7. Отступы между заголовками разного уровня — самая случайная вещь в мире, по крайней мере, в первые 30 раз. Обязательно перепроверьте перед публикацией, что у вас в тексте нормальные отступы.
  8. HTML, перемешанный с хабра-маркдауном, может создавать забавные баги в сторонних редакторах. Например, если вы используете тег <code/> и забыли его правильно закрыть. Получится вот такое:

Выводы

Они только помогут сэкономить время и нервы на дополнительной работе, которую нужно проделать при подготовке поста — и написание интересного текста никто не отменял. Все приведенные в этом посте советы взяты из личного опыта.

Вы успешно зальете все картинки, расставите руками заголовки и теги, оформите код, и пост всё равно получится хорошим — потому что, очевидно, текст важнее оформления. Практика показывает, что если вам интересно писать о чём-то, вас не остановят ни вёрстка, ни html, ни сложности конвертирования. А значит, нужно делать. Но никто не мешает сделать красиво и порадовать читателей.

Так победим.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть