Основы оформления постов на Голосе + полный курс по работе с Markdown

on0tole Косатки

в голос

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

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

Данная статья будет полезна прежде всего новичкам, но я уверен, что даже опытные пользователи смогут почерпнуть для себя что-то новое.

Ранее в рамках ВИКИ Голоса в разделе "Как пользоваться платформой Голос" был опубликован отличный видеоурок - "Как написать пост на платформе Голос". В данном видео были затронуты лишь самые основные(базовые) примеры оформления, поэтому сегодня мы рассмотрим все возможности форматирования текста более подробно на конкретных примерах.

Данную статью можно условно разделить на несколько категорий по сложности:

Базовый Уровень
Продвинутый Уровень

Вводная часть

Для оформления постов я настоятельно рекомендую использовать Markdown разметку (которая встроена в редактор по умолчанию). Markdown представляет собой облегчённый язык разметки, позволяющий максимально просто размечать текст (при этом он выглядит вполне читаемым), который затем будет преобразован в HTML.

Использование Markdown имеет ряд существенных преимуществ:

Не требует специальных знаний для работы. Вам необходимо лишь один раз запомнить несколько очевидных тегов и простых правил;
Разметка происходит непосредственно в текстовом поле. Сторонние редакторы и инструменты не требуются. Вы сразу видите конечный результат.
Текст в процессе форматирования максимально читабелен. Кроме того, глядя на код, вы сразу сможете понять, где у Вас заголовок, где цитата, а где таблица, все максимально наглядно.

Кстати Markdown редактор Голоса поддерживает также HTML разметку (об этом более подробно на Среднем Уровне)

На освоение синтаксиса Markdown, как правило, уходит НЕ БОЛЕЕ 20 минут, зато в будущем Вы с легкостью сможете оформлять свои статьи и комментарии, как говориться, "на лету".

В будущем на golos.io планируется реализовать удобрый редактор, аналогичный medium-editor, но пока он не реализован нам придется работать с тем, что есть.

Впрочем, оставим теорию и перейдем к практике.

Базовый уровень

Итак, Вы нажали на заветную кнопку Добавить пост - что делать дальше?

Вы увидите поле для ввода текста (возможно, сверху Вы также увидите панель встроенного редактора, если случайно включили его раньше)

Если Вы видите её - у меня для Вас плохие новости, срочно нажмите на кнопку Markdown справа, переключившись на Markdown редактор и продолжайте читать данную статью (выше я уже написал, почему я рекомендую использовать именно его).

Абзацы и разрывы строк

Для того, чтобы создать абзац достаточно отделить части текста одной (или более) пустой строкой, например, с помощью клавиши Enter (создать абзац с помощью пробелов не удастся)

Примерно вот так.

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

Пример:

<br>
<br>
<br>

Результат:

Примечание: для создания отступа первой строки абзаца (т.н. красной строки), как например в начале данного раздела, я использовал специальный HTML - код невидимого пробела, например & #8195; (убрать пробел перед #)

Заголовки

Заголовки создаются с помощью размещения символа "решетка" # перед текстом заголовка (Между символом # и текстом должен стоять пробел).
Всего доступно 6 уровней заголовков, соответствующих аналогичным уровням HTML заголовков

Пример:

# Заголовок Первого Уровня
## Заголовок Второго Уровня
### Заголовок Третьего Уровня
#### Заголовок Четвертого Уровня
##### Заголовок Пятого Уровня
###### Заголовок Шестого Уровня

Результат:

Заголовок Первого Уровня

Заголовок Второго Уровня

Заголовок Третьего Уровня

Заголовок Четвертого Уровня

Заголовок Пятого Уровня

Заголовок Шестого Уровня

Примечание: в данный момент в клиенте присутствует баг, вследствие которого заголовок пятого уровня имеет такой же размер как и заголовок третьего (см. выше)

Первые два уровня заголовков можно также получить альтернативным способом с помощью подчеркивания (используя символы "равно" = и "дефис" -):

Пример:

Заголовок Первого Уровня
=======================
Заголовок Второго Уровня
------------------------

(Количество подчеркивающих символов значения не имеет)

Результат:

Заголовок Первого Уровня

Заголовок Второго Уровня

Выделение текста

Для смыслового выделения текста и создания логического ударения в Markdown применяются символы "звездочка" * и "нижнее подчеркивание" _ (которые являются равнозначными).
С их помощью можно создать следующие виды начертания текста:

полужирный
курсив
полужирный курсив

Для создания зачеркнутого текста используется символ "тильда" ~.

Пример	Результат
`курсив` или `_курсив_`	курсив
`полужирный` или `__полужирный__`	полужирный
`*полужирный курсив*` или `___полужирный курсив___`	*полужирный курсив*
`~~зачеркнутый~~`	~~зачеркнутый~~

Программный код:

Для создания элементов, содержащих программный код или разметку применяется символ "обратного апострофа" ` (Подсказка - он находится на клавише с буквой Ё стандартной клавиатуры)
Синтаксис Markdown внутри элементов с программным кодом не обрабатывается, именно благодаря этому в Примерах к данной статье Вы можете видеть применяемые в разметке теги. Если на вашей клавиатуре данный знак отсутствует, можно использовать сочетание клавиш Alt + 96

Пример:

` программный код `

Результат:

программный код

Для того, чтобы создать блок Программного кода из нескольких строк, используйте три обратных апострофа ` в начале и в конце блока.

Пример:

```
// my first program in C++
# include <иострим>

int main()
{
std::cout << "Hello World!";
}
```

Результат:

// my first program in C++
# include <иострим>

int main()
{
  std::cout << "Hello World!";
}

Также блоки программного кода можно получить, начиная каждую строку с отступа в 4 (четыре) пробела.

Пример:

Результат:

< отступ перед данной строкой составляет четыре пробела
- тут тоже без 4 пробелов не обошлось
? угадайте сколько пробелов стоит в начале строки

Списки

Markdown поддерживает упорядоченные (нумерованные) и неупорядоченные (маркированные списки)

Маркированный список

Для формирования неупорядоченных списков могут использоваться различные маркеры : "звездочка" *, "знак плюс"+, "дефис" -. Все символы маркеров взаимозаменяемы.

Пример:

- маркированный список 
* маркированный список
+ маркированный список

Результат:

маркированный список

маркированный список

маркированный список

Нумерованный список

Для формирования нумерованных списков используются числа с точкой. Интересной особенностью является то, что порядок чисел, с помощью которых формируется список, не важен - на выходе мы в любом случае получим упорядоченный список, начинающийся с 1 (1,2,3...)

Пример:

1. позиция № 1
1. позиция № 2
9. позиция № 3

Результат:

позиция № 1
позиция № 2
позиция № 3

ВАЖНО: если между строками списка окажется пустая строка, нумерация продолжится сначала.

Кроме того есть возможность создавать вложенные списки (то есть список внутри списка). Для этого необходимо например поставить 4 пробела перед вложенным элементом списка.

Пример:

* маркированный список 
* маркированный список
    * вложенный список 1
    * вложенный список 2
* маркированный список

Результат:

маркированный список
маркированный список
- вложенный список 1
- вложенный список 2
маркированный список

Примечание: Одним из небольших недостатков Markdown является то, что технические символы, используемые для разметки, не будут отображаться в итоговом тексте. Чтобы они отображались, необходимо поставить перед ними обратный слэш \
Пример:
\* - символ звездочка

Результат:
* - символ звездочка

Таким образом можно отобразить следующие специальные символы:

\ ` * _ # + -

Цитаты

Для разметки цитат в Markdown используется знак «больше» >. Его можно вставлять либо перед каждой строкой цитаты, либо перед первой строкой параграфа.

Пример:

> Кто умеет - делает; кто не умеет - учит; кто не умеет учить - учит учителей.

Результат:

Кто умеет - делает; кто не умеет - учит; кто не умеет учить - учит учителей.

Также есть возможность создавать вложенные цитаты (цитата в цитате)

> Первый уровень цитирования
>> Второй уровень цитирования
>>> Третий уровень цитирования
>
> Первый уровень цитирования

Первый уровень цитирования

Второй уровень цитирования

Третий уровень цитирования

Первый уровень цитирования

Также в цитатах допускается использовать различные элементы разметки

Например курсив / полужирный / полужирный курсив

маркированный список

нумерованный список

программный код

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

Таблицы:

Таблицы оформляются следующим образом:
В таблицах можно использовать выделение текста, а также ссылки/изображения.

Для выравнивания текста в ячейке

по левому краю

по центру

по правому краю
используются двоеточия : в строке, отделяющей заголовок от основного текста

Пример:

Заголовок 1 | Заголовок 2 | Заголовок 3
:---------- | :----------: | -------:
*Я1 Р1* | ***Я2 Р1*** | *Я3 Р1*
**Я 1 Р 2** | Я 2 Р 2 | **Я 3 Р 3**

Результат:

Заголовок 1	Заголовок 2	Заголовок 3
Я1 Р1	*Я2 Р1*	Я3 Р1
Я 1 Р 2	Я 2 Р 2	Я 3 Р 3

Ссылки и медиаконтент

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

Пример:

<https://golos.io>

Результат:

https://golos.id

Также есть возможность создавать встроенные в текст ссылки. При этом текст ссылки заключается в квадратные скобки [] а сама ссылка в круглые ()
[Текст ссылки](https://адрес_ссылки.здесь) Между квадратными и круглыми скобками не должно быть пробела.

Пример:

На платформе [Голос](https://golos.io) каждый найдет то, что ему по душе

Результат:

На платформе Голос каждый найдет то, что ему по душе

Альтернативным способом создания ссылок являются ссылки в виде сносок.При этом способе вместо адреса ссылки используется метка(идентификатор ссылки), которая помещается в квадратные скобки.

[текст ссылки][идентификатор]

[идентификатор]: https://адрес_ссылки.здесь
(идентификатор можно разместить в любом месте текста)

Пример:

Для того, чтобы приобрести токены Силы Голоса пройдите по [ссылке][LINK1] и сгенерируйте BTC адрес.

[LINK1]: https://golos.io/@on0tole/crowdsale

Результат:

Для того, чтобы приобрести токены Силы Голоса пройдите по ссылке и сгенерируйте BTC адрес.

Изображения:

Для вставки изображений Markdown использует следущий синтаксис:

![Альтернативный текст](https://адрес_ссылки_на_изображение.jpg)
либо альтернативный вариант с всплывающей подсказкой, которая указывается в кавычках

![Альтернативный текст](https://адрес_ссылки_на_изображение.jpg "Подсказка")
(необходимо использовать прямые ссылки на изображение)

Пример:

![пикча](https://s13.postimg.org/omrv2q3af/1480534211_file_3.png "рандом")

Результат:

Для публикации изображений необходимо сперва загрузить их на фотохостинг, небольшая подборка хостингов ниже:

Я использую хостинг postimage.org, в нем есть интересная функция, позволяющая выбирать конечный размер изображения.

Важно: Markdown не позволяет задать параметры изображения (ширину, высоту)

*Примечание: для создания кликабельных изображений (изображений со ссылками) можно использовать следующий синтаксис
*[![30 second exposure](ссылка_на_изображение.png)](адрес_ссылки)

Пример:

[![30 second exposure](http://i64.tinypic.com/28qu5o5.png)](https://golos.io/@on0tole)

Результат:

(кликнув на изображение мы попадаем на мой блог)

Прим:. для того, чтобы по клику открывался фулл-сайз изображения, вместо второй ссылки укажите ссылку на само изображение.

Видео

Для добавления видео в Ваш пост просто вставляем ссылку на Youtube -видео в тексте.

Пример:
https://www.youtube.com/watch?v=WRzkBQH3JIs

Результат:

Горизонтальные линии (разделители)

Для создания горизонтальной линии достаточно поместить три (или более) "звездочки" * или "дефиса" - на отдельной строке (между символами могут располагаться пробелы)

Пример:

***
* * *
*****
- - -
-----------------------

Результат:

Примечание: я рекомендую использовать именно символ "звездочка" * так как в случае с "дефисом" - если не оставить пустую строку между текстом и горизонтальной линией, мы получим Заголовок Второго Уровня (см. п. Заголовки)**

Продвинутый уровень

Поздравляем, Вы только что изучили основы работы с Markdown, конечно у Вас уйдет определенное время на освоение всего синтаксиса, но это позволит значительно упростить создание постов и сэкономить кучу времени в будущем.

Хотелось бы также рассмотреть несколько интересных способов для расширенного форматирования Ваших статей (в том числе с использованием HTML).

Выравнивание по центру

Довольно часто возникает необходимость отцентровать различные элементы статьи.
Для этого можно воспользоваться HTML тэгом <center>

Пример:

<center>Текст выровнен по центру</center>
### <center>Заголовок отцентрован</center>
<center>https://s13.postimg.org/hfrjsyrrb/image.png</center>

Результат:

Текст выровнен по центру

Заголовок отцентрован

Выравнивание изображений и обтекание текстом

С помощью стилей CSS Вы сможете настроить выравнивание изображений и обтекание изображений текстом.

Расположение картинки слева

Параметры pull-left и pull-right позволяют настроить выравнивание и обтекание изображений текстом

Пример выравнивания изображения по левому краю (Pull Left)

<div class="pull-left">
 
https://s4.postimg.org/x37pfrku5/image.png
<center>  <strong> Расположение картинки слева </strong> </center>
</div>

Пример выравнивания изображения по правому краю (Pull Right)

Расположение картинки справа

<div class="pull-right">
https://s22.postimg.org/q9jd64v9d/image.png
<center> <strong> Расположение картинки справа </strong> </center>
</div>

Также вы можете выравнивать изображения по правому краю, используя класс pull-right.

Выравнивание текста по ширине

Многим нравится, когда текст выглядит хорошо структурированным, как в газете или журнале, и выровненным по ширине страницы. Для получения данного результата можно использовать класс text-justify. Рассмотрим, как работает выравнивание текста (Justified Text)

Пример:

<div class="text-justify"><em>Особенность тоталитарного государства та, что, контролируя мысль, 
оно не фиксирует её на чём-то одном. Выдвигаются догмы, не подлежащие обсуждению, 
однако изменяемые со дня на день. Догмы нужны, поскольку нужно абсолютное повиновение подданных, 
однако невозможно обойтись без коррективов, диктуемых потребностями политики власть предержащих.
 (Literature and Totalitarianism - George Orwell).</em></div>

Результат:

Особенность тоталитарного государства та, что, контролируя мысль, оно не фиксирует её на чём-то одном. Выдвигаются догмы, не подлежащие обсуждению, однако изменяемые со дня на день. Догмы нужны, поскольку нужно абсолютное повиновение подданных, однако невозможно обойтись без коррективов, диктуемых потребностями политики власть предержащих. (Literature and Totalitarianism - George Orwell)

Примечание: синтаксис Markdown внутри стилей CSS не поддерживается, поэтом на примерах выше Вы могли увидеть, что для выделения текста я использовал HTML тэги, в частности:

Пример:

для курсива 
 для полужирного 

Результат:

для курсива
для полужирного

ВНИМАНИЕ:

Есть еще один крутой сервис, которым я обязан с Вами поделиться:
app.classeur.io представляет собой интуитивно-понятный (даже новичку) онлайн Markdown редактор.
С его помощью Вы легко можете преобразовать свой текст в Markdown разметку (используя панель инструментов).
Кроме того, данный редактор позволяет загружать изображения НЕПОСРЕДСТВЕННО с Вашего устройства, автоматически преобразовывая их в ссылки на изображения.
Все что Вам остается - это скопировать полученный текст с разметкой и вставить в текстовое поле на Голосе.