- -
Шпаргалка по синтаксису Markdown: 10 популярных тегов

Шпаргалка по синтаксису Markdown: 10 популярных тегов

Руководство по Markdown для упрощения веб-разработки

В последнее время все большую популярность приобретает Markdown - облегченный язык разметки ( wiki). И не удивительно. С одной стороны, для его использования не нужно изучать толстые книги и тратить кучу времени для "набивания руки" и знакомством с техническими особенностями. Это привлекает людей, далеких от IT сферы: писателей, дизайнеров и др. С другой стороны, использование Markdown значительно ускоряет разработку, поэтому его выбирают те, чья профессия связана с разработкой для веб. Сегодня его широко используется в написании статей, документации (в том числе на github), справочных текстов и др. В этой статье я хочу рассказать о базовом синтаксисе markdown. Надеюсь вам пригодится эта шпаргалка.

1. Заголовки

Для того чтобы написать HTML заголовок в Markdown, необходимо использовать знак # (хэш). Если необходимо несколько уровней заголовков, h1 - h6, нужно изменить количество хэшей (#) перед текстом заголовка.
# Заголовок 1 
## Заголовок 2 
### Заголовок 3 
#### Заголовок 4 
##### Заголовок 5 
###### Заголовок 6

2. Списки

Markdown поддерживает оба вида списков. Для организации маркерованного списка используются знаки *, + и -. От них зависит вид маркеров. Чтоб сделать многоуровневый список, нужно будет сделать отступы (4 или 8 пробелов).
* Элемент списка 1 
* Элемент списка 2 
    + Элемент второго уровня списка 1 
    + Элемент второго уровня списка 2 
        - Элемент третьего уровня списка 1 
        - Элемент третьего уровня списка 2 
        - Элемент третьего уровня списка 3
С нумерованными списками все еще проще:
1. Номер 1 
2. Номер 2 
3. Номер 3

3. Горизонтальные разделители

В HTML мы используем тег <hr \>, в Markdown для этого служат три или более дефиса, звездочки или знака равно (-, *, =).
Текст 1 
********* 
Текст 2 
====

4. Параграфы

Для оформления абзацев в html используются теги <p></p>, но в Markdown блок текста автоматически преобразуется в параграф. Для вставки пустой строки необходимо два раза поставить символ переноса строки (нажать на Enter)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eius in labore quidem, sequi suscipit! 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aut commodi debitis ipsam nobis perspiciatis sequi, sint unde vitae.

5. Курсивное и жирное выделение

Вобще, оформление текста с Markodown становится очень простым и быстрым. Для курсива необходимо поставить знаки * вокруг текста. Для жирного начертания обрамим текст двумя звездочками, а для жирного курсива - тремя. Алтернативный синтаксис - использование знака _ по тем же правилам.
*Курсив* 
_Курсив_ 
**Жирный** 
__Жирный__ 
***Жирный курсив*** 
___Жирный курсив___

6. Код

Для оформления блока кода используется обратный апостроф ` вокруг кода. Три символа для многострочного кода и один для однострочного:
```
$a = 5; 
$b = 3; 
$c = $a + $b; 
``` 

`echo $c;`

7. Цитаты

Под цитатами имеется в виду тег <blockquote>. Для их оформления применяется знак >.
> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eius in labore quidem, sequi suscipit!

8. Ссылки

Хорошо, теперь о том, что в Markdown сделать не так просто.
Существует два варианта оформления ссылок. Первый - обычная вставка в текст:
[Текст ссылки](адрес "Описание")
и второй вариант - оформление ссылки в виде сноски. Когда в текст вставляется конструкция вида:
[Текст ссылки][Тег1]
... Указывающая, что именно в этом место будет располагаться ссылка, а где-нибудь ниже её описание:
[Тег1][Адрес ссылки]
Результат выполнение будет аналогичен первому варианту, но такое оформление удобнее с точки зрения дальнейшей поддержки и редактирования.

9. Изображения

Изображения помещаются на страницу также, как и ссылки, с одним отличием: в начале записи используется знак !
![Alt-текст](Путь к файлу "Подпись")
Вставка реального изображения может выглядеть как-то так:
![mountains](/img/mountan.png "Пейзаж с горами")

10. Таблицы

Создание таблиц с Markdown намного нагляднее, чем в HTML. Форматирование интуитивно понятно, добавлю только что для выравнивания текста внутри ячеек используются знаки : в строке, отделяющей заголовок от основной таблицы.
    Имя    | Возраст 
-----------|:-------: 
Анна       |   29 
Дмитрий    |   47 
Федор      |   32

11. Спецсимволы

Ну и напоследок, в качестве бонуса, о спецсимволах. Чтоб вставить в текст, например, знак больше >, а не выделить текст в виде цитаты, необходимо поставить перед ним обратный слеш (\) вот так: \*
Обсудим проект? Напиши в Телеграм или Whatsapp

Комментарии

Подпишись на наш Телеграм канал