Маркдаун – облегченный язык разметки, созданный для написания, чтения, оформления веб-текстов.
Частично или полностью язык поддерживается многими проектами:
- CMS и блог-платформами (Drupal, Ghost, Medium);
- крупнейшими хранилищами контента (GitHub, Microsoft Docs);
- мессенджерами (Telegram, Slack);
- текстовыми редакторами (Atom, iA Writer, Typora);
- сервисами для проджект-менеджмента (Todoist, Trello).
Заголовки
# H1
## H2
### H3
#### H4
##### H5
###### H6H1
H2
H3
H4
H5
H6
Выделение текста
Курсив обозначается одинарнимы *звездочками* или _подчеркиваниями_.
Полужирный текст обозначаается двойными **звёздочками** или __подчеркиваниями__.
Выделения можно комбинировать **звёздочки и _подчеркивания_**.
Две тильды перечёркивают текст. ~~Перечеркнутый текст~~Курсив обозначается одинарнимы звездочками или подчеркиваниями.
Полужирный текст обозначаается двойными звёздочками или подчеркиваниями.
Для нужно начертания можно комбинировать звёздочки и подчеркивания.
Две тильды перечёркивают текст. Перечеркнутый текст
В синтаксисе Markdown нет встроенного способа подчеркнуть текст. Но если ваш редактор поддерживает HTML, то можно использовать теги:
<u>Подчёркнутый текст</u>Подчёркнутый текст
Цитата
Чтобы параграф отобразился как цитата, нужно поставить перед ним закрывающую угловую скобку >
Оформление цитатой последовательных строк внутри одного параграфа
> Первый параграф
>
> Второй параграф
>
> > Вложенная цитата
> > > Цитата третьего уровня
>
> Продолжение основной цитатыПервый параграф
Второй параграф
Вложенная цитата
Цитата третьего уровня
Продолжение основной цитаты
Чекбоксы (checkboxes)
Чтобы сделать чекбоксы, нужно использовать маркированный список, но между маркером и текстом поставить [x] для отмеченного пункта и [] — для неотмеченного.
- [x] Отмеченный пункт
- [ ] Неотмеченный пункт- Отмеченный пункт
- Неотмеченный пункт
Вложенные списки
Чтобы создать вложенный список, нужно поставить перед его пунктами табуляцию или несколько пробелов. В Markdown одна табуляция соответствует четырём пробелам.
Список одного вида можно вкладывать в любой другой.
1. Пункт
1. Подпункт
1. Подподпункт
- Пункт
- Подпункт
- Подподпункт
1. Пункт
- Подпункт
* Подподпункт
+ Пункт
1. Подпункт
- Пункт
- [x] Отмеченный подпункт
- [ ] Неотмеченный подпункт
1. Подподпункт- Пункт
- Подпункт
- Подподпункт
- Подпункт
- Пункт
- Подпункт
- Подподпункт
- Подпункт
- Пункт
- Подпункт
- Подподпункт
- Подпункт
- Пункт
- Подпункт
- Пункт
- Отмеченный подпункт
- Неотмеченный подпункт
- Подподпункт
Ссылки (links)
[MyTechStack](http://www.mytechstack.ru/) без подсказки
[MyTechStack](http://www.mytechstack.ru/ "MyTechStack") с подсказкойMyTechStack без подсказки MyTechStack с подсказкой
Ещё один способ оформить ссылку — справочный. Он работает как сноски в книгах: [текст][имя сноски]. При таком способе организации ссылок в конце документа нужно также написать и оформить саму сноску: [имя сноски]: ссылка. При желании после ссылки можно добавить подсказку — точно так же, как в предыдущем методе.
[MyTechStack][1]
[Раздел «обо мне»][about]
[1]: http://www.mytechstack.ru/ "Всплывающая подсказка"
[about]: http://www.mytechstack.ru/about/Картинки (images)
Изображения в Markdown оформляются по принципу, схожему с принципом оформления ссылкок, только перед квадратными скобками нужно поставить восклицательный знак: . Здесь также можно сделать всплывающую подсказку.
Можно использовать и справочный метод: ![текст][имя сноски]. Сноски оформляются так же, как и в ссылках: [имя сноски]: путь к изображению, — в них тоже можно добавлять подсказки.
![Изображение][1]
[1]: https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1920px-Markdown-mark.svg.png "Логотип Markdown"Такая разметка выведет тот же результат, что и предыдущая.
Еще есть возможность вставлять картинки в ряд используя HTML
<div style="display:flex; align-items: center;">
<div style="flex:1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1920px-Markdown-mark.svg.png" />
</div>
<div style="flex:1;padding-left:10px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1920px-Markdown-mark.svg.png" />
</div>
<div style="flex:1;padding-left:10px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1920px-Markdown-mark.svg.png" />
</div>
</div>Задавать картинкам размер
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1920px-Markdown-mark.svg.png" alt="drawing" width="250"/>Картинка в центре
<p align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1920px-Markdown-mark.svg.png" width="500" />
</p>
Вставка кода (code)
В Markdown есть несколько способов выделить исходный код:
- Если надо отобразить фрагмент кода внутри строки с каким-то текстом, нужно с двух сторон выделить этот код одним или несколькими обратными апострофами (`; их ещё называют бэктиками).
- Чтобы выделить фрагмент из нескольких строк, нужно с двух сторон выделить его тремя обратными апострофами.
- Также перед фрагментом кода можно поставить табуляцию или четыре пробела, при этом предыдущая строка должна быть пустой.
Если обрамлять код тремя обратными апострофами, то после первой тройки можно указать язык программирования — тогда Markdown правильно подсветит элементы кода.
Функция `print (x)` выводит содержимое переменной ```x```.Код на Python:
x = int(input())
if x > 0:
print(x)
else:
print(-x)
Код на JavaScript:
let x = 12;
let y = 6;
console.log(x + y);Таблицы (tables)
|Столбец 1|Столбец 2|Столбец 3|
|-|--------|---|
|Длинная запись в первом столбце|Запись в столбце 2|Запись в столбце 3|
|Кртк зпс| |Слева нет записи|| Столбец 1 | Столбец 2 | Столбец 3 |
|---|---|---|
| Длинная запись в первом столбце | Запись в столбце 2 | Запись в столбце 3 |
| Кртк зпс | Слева нет записи |
Чтобы выровнять весь столбец по правому краю, в строке с дефисами сразу после дефисов можно поставить двоеточие :. Чтобы выровнять содержимое по центру, надо поставить двоеточия с обеих сторон.
|Столбец 1|Столбец 2|Столбец 3|
|:-|:-:|-:|
|Равнение по левому краю|Равнение по центру|Равнение по правому краю|
|Запись|Запись|Запись|
| Столбец 1 | Столбец 2 | Столбец 3 |
|---|---|---|
| Равнение по левому краю | Равнение по центру | Равнение по правому краю |
| Запись | Запись | Запись |
| Язык | Метка |
| -----|------|
| Java Script | javascript |
| C++ |cpp|
| HTML|html|
|Markdown|md|
|JSON|json|
|Python|python|
|SQL|sql|| Язык | Метка |
|---|---|
| Java Script | javascript |
| C++ | cpp |
| HTML | html |
| Markdown | md |
| JSON | json |
| Python | python |
| SQL | sql |
HTML и полезные скрипты
Автоматически открывающееся подменю
<details open>
<summary>I automatically open</summary>
<br>
Waaa, you see me. I thought I would be hidden.
</details>I automatically open
Waaa, you see me. I thought I would be hidden.Вложенные подменю
<details>
<summary>Heading1</summary>
some text
+ <details>
<summary>Heading1.1</summary>
some more text
+ <details>
<summary>Heading1.1.1</summary>
even more text
</details>
</details>
</details>Heading1
some text
-
Heading1.1
some more text
-
Heading1.1.1
even more text
-
Открывающееся меню со списками
<details>
<summary>Heading</summary>
<ul>
<li> markdown list 1</li>
<ul>
<li> nested list 1</li>
<li> nested list 2</li>
</ul>
<li> markdown list 2</li>
</ul>
</details>Heading
- markdown list 1
- nested list 1
- nested list 2
- markdown list 2
Открывающееся меню
How do I dropdown?
This is how you dropdown.
Выделения цветом
<mark>Marked text</mark>
==highlight==
<span style="background-color: #FFFF00">Marked text</span>
<mark style="background-color: lightblue">Marked text</mark>Marked text
==highlight==
Marked text
Marked text