Про редакторі Byword і основи Markdown. Для хардкорних авторів-маководів і не тільки

Тема Markdown досить часто спливає в Інтернеті і я, як активний автор, блогер, журналіст і оглядач не раз натикався на неї, адже це безпосередньо відноситься до моєї роботи. Але дуже довгий час якось не звертав на неї уваги й зачепився за цю мову розмітки, можна сказати, випадково. Проблема не в ліні, проблема в нестачі часу або, швидше, у відсутності мотивації. Було б бажання, а час завжди можна знайти. Скрізь, будь то Рунет або англомовний сегмент Мережі, по темі Markdown я знаходив або нудні інструкції з описом команд і синтаксису, або банальне згадка, мовляв, є така штука, вона дозволяє швидко додавати в текст посилання або стиль, які потім конвертуються у стандартний HTML. Але по факту це найпотужніший і одночасно найпростіший інструмент, який щодня економить мені навіть не хвилини, а годинник часу і дуже багато сил, завдяки якому iPad перетворився на повноцінний інструмент для створення та публікації матеріалів у Мережі і значно підвищилася ефективність праці. Мета цієї статті - заповнити інформаційну прогалину по темі Markdown в Рунеті і зробити це комплексно: розповісти як про мову розмітки тексту, так і про інструменти для роботи з ним. В даному випадку про мультиплатформенні редакторі Byword. Сподіваюся людей моєї професії, які працюють з OS X і iOS, цей досвід буде корисним. Що ж, поїхали!

Якщо коротко, то Markdown - це проста мова розмітки текстів, який дозволяє створювати фактично повністю оформлену веб-публікацію одночасно з написанням самого матеріалу. «Оформлену» - це означає з гіперпосиланнями, виділенням тексту в потрібних місцях (жирний або курсив), цитатами і списками. У більшості випадків цього досить, а для хардкорних блогерів є ще й розширена версія Markdown з підтримкою таблиць та інших хитрих штук. Але тут вже потрібен особливий софт і подібна функціональність буде потрібно швидше могутнім фахівцям, ніж «простим смертним». В такі нетрі лізти не будемо.

Формат файлу - звичайний текст, він же TXT. Деякі редактори ще присвоюють розширення «.md», але це лише для зручності та асоціації такого контенту з певним додатком до OS X (Windows, можливо, теж, але в цій ОС справ з MD-редакторами не мав, так що гадати не буду). Наприклад, так робить iA Writer, хоча всередині хитрого файлу з розширенням «.md» все той же звичайний неформатований текст.

Ідея ж Markdown полягає в наборі простих команд або позначень, які MD-конвертер зможе перетворити у стандартний HTML-код. Простий приклад такого позначення - це виділення тексту зірочками:

*текст* - конвертер перетворює такий текст курсив
** текст ** - а такий текст буде перетворений в жирний

Для наочності ось так буде виглядати текст у перетвореному вигляді на веб-сторінці:

текст
текст

А ось так він виглядає у форматі HTML, у який перетворюється Markdown-конвертером. Саме в такому вигляді матеріал додається в адмінку (в режимі HTML-редактора, звичайно ж, забудьте про візуальному редакторі - він живе своїм особливим життям):

<em>текст</em>
<strong>текст</strong>

Таким чином, у Markdown можна писати в принципі в будь-якому текстовому редакторі, навіть в самому простому, те ж TextEdit. Але в спеціалізованому все ж зручніше з цілого ряду причин, починаючи від вбудованого конвертера і режиму попереднього перегляду результату і закінчуючи автоматизацією введення потрібних команд.

Хтось вже почав засинати від великої кількості розумних слів і нерозуміння, навіщо цей Markdown здався? Друзі, проявіть трохи терпіння! Давайте я поки разбавлю оповідання розповіддю про базові можливості редактора Byword, він класний, повірте. А потім, коли ви підбадьоритеся, перейдемо до команд мови розмітки. Цього нудного розділу не уникнути, але він досить простий для розуміння. Потім перейдемо до практики та особливостей реалізації Markdown у Byword, що, сподіваюся, позбавить від необхідності підпирати повіки сірниками.

У минулому для набору текстів в OS X я використовував Pages, з ним же працював і в iOS на iPad, але довгий час якось не сильно часто і активно вдавався до допомоги планшета в своїй творчості. Потім в OS X перейшов на банальний TextEdit. Згоден, дійсно дивно, але була причина, яка називається ОРФО. У Pages на перших порах ця по суті єдина гідна система перевірки правопису для OS X взагалі ніяк не працювала, а мучитися з Parallels і Crossover, під якими я запускав Windows-версію Word для перевірки своїх текстів, мені просто набридло.

О так, хто зараз згадає, що «тру автор» повинен знати напам'ять всі правила української мови та писати виключно правильно і без помилок. В ідеалі так, але всі ми люди, зроблені з живої плоті, має особливість втомлюватися, втрачати зосередженість та інші слабкості. Від помилок не застрахований ніхто, навіть академік російської мови. І електронна система перевірки правопису в такому випадку допомагає нівелювати ефект від згаданих вище людських слабкостей, полегшує працю і дозволяє економити час.

Повертаємося до теми розмови. Від рюшиків Pages довелося відмовитися на користь коректного та безпомилкового написання текстів. З часом я зрозумів, що всі ці красивості великого текстового процесора і не потрібні в роботі, принаймні в моїй. Швидше вони відволікають. В результаті TextEdit став моїм повноцінним інструментом для набору тексту, до тих пір, поки я в черговий раз не задумався про підвищення ефективності своєї праці. Зробити це можна, якщо робочий інструмент завжди з собою. В принципі, ноутбук частенько при мені, але далеко не скрізь і не завжди. А ось планшет можна тягати з собою постійно. Крім того, при черговому спільному зборі редакції iPhones.ru, Микита Горяїнов знову продемонструвала віртуозність використання iPad в роботі, не лише набираючи на ньому великі тексти, але і публікуючи їх.

Ніби як найпростіше рішення - це Pages. Є підтримка «хмари», а значить і безшовна синхронізація текстів: почав друкувати на ноутбуці, продовжив на планшеті, закінчив знову на ноутбуці. Але немає підтримки папок (вірніше не було на етапі пошуку альтернатив), а я люблю порядок - всі тексти розкладені по датах, всі пронумерована, будь-який контент знайти не складно. Крім того, сторонні сервіси для перевірки граматики в Pages на OS X не працюють досі. Та й звик я до простого текстового редактора, причому настільки, що навантажений інтерфейс друкованого комбайна Apple повертатися вже не хотілося.

Пошук альтернатив спочатку привів до iA Writer - реально зручна мультиплатформенна штука з мегапростым, але класним зовнішнім оформленням, та ще й з підтримкою синхронізації через Dropbox, а значить і з папками проблем не буде. Більш того, додаткова робоча панель над екранної клавіатурою iPad з кнопками управління курсором і найбільш часто використовуваними знаками (кома при українській розкладці, лапки-ялинки тощо) мене просто підкорила.

Загалом, почав працювати з iA Writer, створюючи тексти одночасно на iPad і MacBook. Зверніть увагу, про Markdown спочатку не йшлося, але згадка про нього в описі текстового редактора я знайшов. В черговий раз наткнувшись на знайоме поняття і в черговий раз почитавши його базове опис, згадав про давню мрію додавати всі потрібні елементи оформлення в текст на етапі його створення, а не під час публікації у адмінці WordPress. І так намучаешься при написанні статті, сил вже немає, а тут треба ще зосереджено додавати посилання, виділяти текст жирним, курсивом, вставляти списки, тобто виконувати чимало роботи, що частенько обтяжувала, псувало настрій і апетит. «Теоретично Markdown цю проблему вирішує», - подумав я і вирішив перевірити це на практиці.

Пару днів було витрачено на вивчення мови розмітки, а в процесі з'ясувалося, що iA Writer на той момент не дуже добре конвертував Markdown в HTML і іноді траплялися помилки, в основному з-за складних посилань, сбивавших вбудований конвертер з пантелику. Ось тоді за порадою одного з вельми шанованих мною IT-журналістів Павла Урусова (@pavel_urusov) я і звернув увагу на Byword, який, як з'ясувалося, не тільки володіє відмінним конвертером Markdown, але і масу інших переваг.

У людини, що звикла до Word, Pages або навіть TextEdit, вікно Byword викличе німе запитання, щось типу: «Це жарт?». Справа в тому, що вікно редактора пусте, зовсім. Жодних панелей інструментів, ніяких менюшечек і витребеньок, тільки текст і автор наодинці з ним. Це якщо мова йде про версії для Mac, хоча і у версії для iPad теж приблизно все те ж саме, але є відмінності - про них поговоримо пізніше. Ось як виглядає робоче вікно Byword в OS X:

Порожнеча, хіба що виділяється лічильник слів і знаків у нижній частині - маленька та зручна дрібниця:

А ще можна розгорнути вікно редактора на весь екран і тоді дійсно залишиться тільки текст на білому або на чорному тлі, по вибору користувача.

Є і класний режим фокуса, коли видимим залишається по суті один абзац або один рядок тексту, а інші його частини стають напівпрозорими.

Крім того, зверніть увагу на великі відступи, на красивий великий текст, на плавні переходи біля верхнього і нижнього краю вікна. Виглядає просто, але тільки на перший погляд. Це функціональна простота. У Pages і TextEdit я збільшував розмір шрифту, щоб він був побільше, а тут така картинка формується самим редактором з простого тексту. Налаштувань теж мінімум, щоб нічого не відволікало. Власне, ось з такими налаштуваннями я працюю:

А от як той же текст виглядає, будучи відкритим в TextEdit:

Працювати можна як в режимі «Форматованого тексту» і тоді на виході буде звичайний файл RTF (в такому режимі можна виділяти жирним, курсивом, загалом, діяти практично як в TextEdit), так і в більш важливому режимі Markdown, про який ми поговоримо трохи пізніше.

Поки ж давайте поглянемо на Byword для iOS, а якщо точніше, то для iPad. Взагалі, програма універсальна, так що на iPhone працює теж, але в телефонному режимі я їй не користувався. У порівнянні з тим же мобільним Pages додаток виглядає простенько, але зручно. Мені дуже подобається великий шрифт. В текстовому редакторі Apple він за стандартом дуже дрібний і навіть незручний для Retina, доводилося руками ставити побільше.

Але основна фішка мобільного Byword в додатковій панелі інструментів над клавіатурою, причому її можна гортати. Там, по суті, три панельки: дані за кількістю слів і символів у тексті, панель з клавішами управління курсором і часто використовуваними знаками (в основному потрібні для Markdown) і спеціалізована панель для деяких команд Markdown, на ній теж є кнопки курсора.

Byword прекрасно працює з Dropbox, хоча є і підтримка iCloud, включаючи папки. Але мені більше подобається «пролетарський» Dropbox, як-то надійніше він. Тобто, в цьому текстовому редакторі теж повною мірою реалізується схема, коли почав друкувати на MacBook, продовжив на планшеті, закінчив на iPhone, при бажанні.

Всередині меню Dropbox можна створювати власні папки і файли, але ось перейменовувати і переміщати їх, наприклад, з хмари на пристрій не можна. Конкурент в особі iA Writer це робити дозволяє, так і додаткова панель у нього зручніше для друку на екранній клавіатурі, але, повторюся, в якості Markdown-редактора він слабший. Перш ніж перейти до животрепетної теми використання цієї мови розмітки тексту, продемонструю базові опції Byword для iOS, яких, як і в Mac-версії, мінімум.

Цей розділ для достатньо досвідчених користувачів, яким часто доводиться публікувати текст в інтернеті через адмінку WordPress або ж інші інтерфейси. Хоча він підійде і для тих, хто все-таки вирішив прокачати свій навик публікації і кому набридло руками вставляти теги, посилання, списки та інші елементи в тексті, що роблять його зручним для читання і розуміння на просторах Всесвітньої мережі.

На відміну від HTML з десятками тегів, які замучишся набирати, а в спеціалізованих редакторах - жати кнопочки, синтаксис Markdown спрощено до максимуму і, що найголовніше, спеціальні символи можна вводити прямо під час набору буквально нальоту. Більше того, в спеціалізованих редакторах, включаючи Byword, для цього пристосовані гарячі клавіші, що ще більше полегшує процес, але про такий досвід поговоримо трохи пізніше.

Зараз час для вивчення набору базових команд або символів, яких мені особисто вистачає в 99% випадків:

• Виділення тексту

  *курсив*
  **жирний**

Тобто, під час набору тексту достатньо додати ці зірочки усередині тексту і при його автоматичному перетворенні в HTML з допомогою вбудованого в редактор або ж окремого конвертера вони будуть замінені на стандартні теги <em> і <strong>.

• Посилання

  [назва посилання](адреса посилання)

  приклад введення:
  [Роман Юр'єв](http://www.iphones.ru/iNotes/author/bigbeastus)

  результат після перетворення - Роман Юр'єв

Зверніть увагу, що між квадратними і круглими дужками немає пробілу. Прямо всередині тексту берете назва посилання в квадратні дужки, відразу за другий квадратною дужкою без пробілу ставите дві круглі і всередині них вставляєте посилання. Все просто і так можна зробити не відволікаючись від набору

• Заголовки

  # Заголовок 1
  ## Заголовок 2
  ### Заголовок 3

  Результат:

  Заголовок 1 Заголовок 2 Заголовок 3

Перед заголовком ставите ґрати, за нею пробіл і далі за аналогією.

• Списки

  * Markdown крут
  * Markdown дуже крут
  * Markdown убер-крут

  Результат:

  • Markdown крут
  • Markdown дуже крут
  • Markdown убер-крут

Тут є важливий нюанс - щоб конвертер вірно зрозумів команду, над списком повинна бути порожній рядок, а після зірочки - пробіл. Також можна створювати і нумеровані списки, але тоді замість зірочки ставиться цифра з комою, а після - пробіл. Для того, щоб створити вкладений список усередині основного списку, треба під потрібним пунктом вставити порожній рядок, після чого один клік на «Tab» і далі за аналогією - зірочка→пробіл→пункт списку.

• Цитати

  >Цитата
  >>Вкладена цитата

  Результат:

  Цитата

  Вкладена цитата

Всередині цитати можна додавати заголовки, списки і т. п. В HTML за додавання цитат відповідає команда <blockquote>, у неї й перетворюється поставлений перед текстом символ «>»

Я в основному користуюся лише цими командами. Можна ще додавати зображення, будувати таблиці і робити інші хитрі штуки з допомогою Markdown, але це вже більш складні матерії, які в житті більшості авторів не потрібні. Для маніяків ось посилання на весь офіційний синтаксис Markdown (англійською мовою), а я додам лише пару корисних команд:

• Для примусового переносу рядка досить поставити два пробілу поспіль - для конвертера це тег <br>.
• Якщо в тексті потрібно ввести технічний символ Markdown і при цьому він не повинен сприйнятися конвертером як команда розмітки, то перед ним достатньо поставити зворотний слеш - «\».

А тепер перейдемо до найсмачнішого - до роботи з Markdown у Byword і до особистого досвіду використання такої зв'язки.

Автори Byword доклали чимало зусиль для того, щоб зробити використання Markdown ще простіше і зручніше. В Mac-версії це реалізовано за допомогою гарячих клавіш, а в iOS - спеціальних кнопок на додаткової розкладки панелі. Результат, якщо чесно, перевершує всі очікування.

Зокрема, для того, щоб позначити текст курсивом або зробити його жирним досить Byword виділити потрібну частину і натиснути поєднання клавіш ⌘I і ⌘B відповідно. Тобто, це стандартні сполучення, застосовувані в традиційних текстових редакторах для тієї ж операції, тільки в даному випадку одним натисканням твориться код HTML.

У версії для iPad для цього на клавіатурну панель спеціально виведений символ «*», а також кілька інших кнопочок, які знадобляться в швидкому додавання кодів Markdown. Більш того, якщо виділити слово/фразу і натиснути на цю кнопку, то виділена частина буде оточена обраним символом з двох сторін. Так можна швидко ставити дужки, наприклад.

Також я часто користуюся шорткатом ⌘K - це додавання посилань. Виділили слово або вираз → клік на ⌘K (cmd+K) → вставили посилання в відкритих круглих дужках, слово/вираз буде оточене квадратними дужками автоматично.

У версії для iPad це теж реалізовано за допомогою кнопок на клавіатурної панелі:

Після того, як з текстом і його хитрої Markdown-розміткою закінчено, варто переглянути, як він приблизно буде виглядати на сторінці - це режим Preview Markdown (шорткат ⌥⌘P Mac-версії):

В такому режимі видно, чи немає помилок з розміткою, всі посилання видно як посилання, а не набір символів, скрізь присутні списки, потрібне форматування тексту і т. п. Якщо проблем немає, то можна скопіювати текст в буфер обміну у вигляді перетвореного HTML-коду або експортувати його в один з наведених нижче форматів:

У разі версії для iOS є ще кілька опцій для експорту:

Скопійований в буфер текст у вигляді HTML-коду вже можна додавати в адмінку WordPress чи будь-яке інше місце, що сприймає HTML, причому зробити це з планшета так само легко, як і з ноутбука. Єдиний мінус у тому, що Byword копіюються в буфер і перетворює весь текст, а не виділений фрагмент.

На комп'ютері це в принципі і не проблема, достатньо відкрити нове вікно Byword з порожнім файлом, вставити туди з буфера потрібний шматок тексту в звичайному форматі, а потім з цього вікна вже загнати його в буфер у перетвореному в HTML-код вигляді, клікнувши ⌥⌘C.

На планшеті складніше. Доведеться копіювати весь текст, після чого видаляти зайве вже прямо в адмінці. Тим не менш, так теж зробити не складно, особливо якщо у зв'язці з планшетом використовується апаратна клавіатура, але це трошки інша історія, про яку я розповім найближчим часом, а зараз покажу декілька прикладів ефективності роботи з Byword і Markdown на планшеті.

З Markdown я працюю з червня цього року, але спочатку використовував iA Writer. У той час цей редактор був досить слабкий в плані підтримки цієї мови розмітки і в його планшетній версії така взагалі була відсутня. В липні була знайдена альтернатива у вигляді Byword і ось він вже дозволяв робити багато чого.

З тих пір я написав і опублікував дуже багато текстів використовуючи тільки планшет. З останніх щодо складних прикладів наведу статтю «iPad mini проти iPad 2, iPad 4 і iPhone 5 в піксельному змаганні» - зроблена в Byword на iPad і опублікована з нього ж. Також моя частина огляду iPad mini повністю вся набрана в тій же самій зв'язці планшета і Byword: всі посилання, виділення тексту жирним/курсивом, заголовки. Але публікував текст і підбирав/обробляв зображення вже Артур Малосиев з ноутбука.

Серед приємних штучок перетворення в HTML з розмітки Markdown також зазначу автоматичне виділення абзаців тегом «<p></p>». У багатьох адмінках мені раніше доводилося додавати його руками, а це ну дуже напружує і неймовірно нудно, особливо якщо публікуєш здоровенну статтю. Тепер такої проблеми немає, все відбувається автоматом.

Та й в цілому приємно, коли закінчивши писати великий текст, ти витрачаєш мінімум зусиль для його публікації, адже вже практично все готово, хіба що картинки треба буде завантажити в адмінку і додати в текст руками. Раніше ж публікація викликала зубовний скрегіт і витрату дуже великої кількості часу і сил, особливо якщо викладати доводилося велику статтю типу такої, яку ви зараз читаєте.

Завдяки Byword і Markdown ефективність праці в моєму випадку дуже сильно зросла. Крім того, використання єдиного редактора на iPad і Mac з його безшовної синхронізацією дозволило мені працювати більше і розумніше використовувати час, наприклад, в дорозі, чекаючи в черзі, подорожуючи потягом і т. п. В останні кілька поїздок між містами я замість того, щоб лежати і спати або плювати в стелю і дивитися кинчики, написав кілька великих матеріалів і чимало новин.

Звичайно, відпочивати теж треба і далека дорога особливо цьому сприяє, але все добре в міру. Коли байдикувати набридає (а в моєму випадку це відбувається досить швидко - пара кинищ, кілька десятків сторінок цікавої книги ), настає просто нудьга і образа від того, що дорогоцінний час іде в нікуди. Тепер це в минулому.

Сподіваюся, мій досвід допоможе комусь також підняти ефективність праці та заощадить немало часу, адже воно є самим безцінним ресурсом. Бережіть час, не витрачайте його намарно, заповнити в майбутньому - не вдасться. Адже багатий не той, хто багато заробляє, а той, у кого є час, щоб витрачати зароблене і насолодитися плодами своєї праці. Багатий той, хто може присвятити себе не тільки роботу, але і рідним, близьким, друзям. Багатий той, хто здатний витратити час на самовдосконалення, хто не боїться і не лінується використовувати його на власний розвиток і на допомогу іншим людям.

P.S. В цьому матеріалі я не розкрив всі секрети особистої ефективності в роботі з текстами в рамках екосистеми пристроїв Apple. Найближчим часом будуть ще статті, але трошки на іншу тему. Для затравки - невелике фотопревью ;).