# Markdown
[TOC]
## Markdown як засіб для створення контенту
Markdown — полегшена мова розмітки даних, заснована Джоном Грубером у 2004 році. Це інструмент для написання уніфікованих документів.
Синтаксис Markdown підтримує форматування тексту, структуризацію контенту, створення презентацій, таблиці, зовнішні матеріали та інші функції. Щоб знати всі, скористайтеся відомостями нижче.
Markdown вбудований у [GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) та [Habr](https://habr.com/ru/docs/help/markdown/). А на [Stack Overflow](https://stackoverflow.com/editing-help) та [Telegram](https://core.telegram.org/api/entities) за допомогою нього можна редагувати повідомлення.
Стандарт [CommonMark](https://spec.commonmark.org/0.30/) — специфікація Markdown, створена Джоном Макфарлейном та GitHub. Відрізняєтья тим, що має уніфікований синтаксис та набір тестів для перевірки реалізації на відповідність.
## Markdown в «Кузні контенту»
[«Кузня контенту»](https://content.hneu.edu.ua/) — онлайн-редактор контенту на Markdown, створений у Харківському національному економічному університеті імені Семена Кузнеця (ХНЕУ ім. Семена Кузнеця).
На платформі можна створити повноцінний текстовий документ та завантажити його у форматах `Word`, `PDF`, `HTML` та `Markdown`. Функція спільного доступу теж є.
## Нотація
### Текст
#### Заголовки
```
# Заголовок першого рівню
## Заголовок другого рівню
### Заголовок третього рівю
#### Заголовок четвертого рівню
##### Заголовок п'ятого рівню
###### Заголовок шостого рівню
```
#### Форматування
**Це напівжирний текст**
__Це напівжирний текст__
*Це курсив*
_Це курсив_
~~Закреслений текст~~
Раз ~дватри~
Надрядковий текст: 19^th^
Підрядковий текст: H~2~O
++Підкреслений текст++
==Виділений текст==
```
**Це напівжирний текст**
__Це напівжирний текст__
*Це курсив*
_Це курсив_
~~Закреслений текст~~
Раз ~дватри~
Надрядковий текст: 19^th^
Підрядковий текст: H~2~O
++Підкреслений текст++
==Виділений текст==
```
#### Цитати
> Цитати також можна групувати ...
>> ...за допомогою додаткових знаків `>` , якщо розміщувати їх поруч..
> > > ...або з пробілами.
```!
> Цитати також можна групувати ...
>> ...за допомогою додаткових знаків `>` , якщо розміщувати їх поруч..
> > > ...або з пробілами.
```
#### Список
##### Маркований
+ Створіть список, починаючи рядок із +, -, або *
+ Підсписки формуються відступом з 2 пробілів:
+ Зміна символів маркера змушує запустити новий список:
+ Ac tristique libero volutpat at
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
+ Дуже просто!
```!
+ Створіть список, починаючи рядок із `+`, `-`, або `*`
+ Підсписки формуються відступом з 2 пробілів:
- Зміна символів маркера змушує запустити новий список:
* Ac tristique libero volutpat at
+ Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
+ Дуже просто!
```
##### Нумерований
1. Світає
2. Край неба палає
3. Соловейко в темнім гаї сонце зустрічає
4. Ви можете використовувати послідовні номери …
5. …або завжди ставити 1.
6. feafw
7. 332
8. 242
9. 2552
10. e2
```!
1. Світає
2. Край неба палає
3. Соловейко в темнім гаї сонце зустрічає
4. Ви можете використовувати послідовні номери …
5. …або завжди ставити 1.
6. feafw
7. 332
8. 242
9. 2552
10. e2
```
(Якщо залишити порожній рядок між двома будь-якими сусідніми рядками, то вертикальні інтервали між текстом збільшаться).
Почніть нумерацію зі зміщенням:
57. Верба
58. Тополя
```
57. Верба
58. Тополя
```
#### Визначення
Термін 1
: Визначення 1
з коротким продовженням.
Термін 2 з *вбудованою розміткою*
: Визначення 2
{ трішки коду, друга частина Визначення 2 }
Третій пункт визначення Визначення 2.
_Компактний стиль:_
Термін 1
~ Визначення 1
Термін 2
~ Визначення 2а
~ Визначення 2b
```
Термін 1
: Визначення 1
з коротким продовженням.
Термін 2 з *вбудованою розміткою*
: Визначення 2
{ трішки коду, друга частина Визначення 2 }
Третій пункт визначення Визначення 2.
_Компактний стиль:_
Термін 1
~ Визначення 1
Термін 2
~ Визначення 2а
~ Визначення 2b
```
#### Абревіатури
Це приклад абревіатури HTML.
Слово “HTML” конвертується, але лише при повному співпадінні, у таких словах, як, наприклад, “xxxHTMLyyy” абревіатура не буде відображатися.
*[HTML]: Hyper Text Markup Language
```
*[HTML]: Hyper Text Markup Language
```
#### Горизонтальна лінія
---
```
---
***
```
#### Код по тексту
Рядок `code`
```
Рядок `code`
```
Код за допопомогою відступу:
```
// Some comments
line 1 of code
line 2 of code
line 3 of code
```
```
// Some comments
line 1 of code
line 2 of code
line 3 of code
```
#### Посилання
[Текст посилання](http://dev.nodeca.com)
[Посилання з заголовком](http://nodeca.github.io/pica/demo/ "А ось і заголовок!")
Автоперетворене посилання https://github.com/nodeca/pica
```!
[Текст посилання](http://dev.nodeca.com)
[Посилання з заголовком](http://nodeca.github.io/pica/demo/ "А ось і заголовок!")
Автоперетворене посилання https://github.com/nodeca/pica
```
### Зовнішні матеріали
Щоб дізнатися яке посилання має відео, необхідно перейти на його сторінку в YouTube, та натиснути кнопку “Поділитися”:
Далі потрібно скопіювати частину, що виділена на зображенні нижче:
{%youtube XoaixVD5jVc %}
```
{%youtube XoaixVD5jVc %}
```
{%gist schacon/4277%}
```
{%gist schacon/4277%}
```
{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}
```
{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}
```
### Таблиці
| Назва | Пояснення |
| ------ | ----------- |
| ЕІ | Факультет економічної інформатики. |
| ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. |
| Харків | Місто на північному сході України на Слобожанщині. |
Вирівнювання по правому краю
| Назва | Пояснення |
| ------: | -----------: |
| ЕІ | Факультет економічної інформатики. |
| ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. |
| Харків | Місто на північному сході України на Слобожанщині. |
Вирівнювання по лівому краю
| Назва | Пояснення |
| :------ | :----------- |
| ЕІ | Факультет економічної інформатики. |
| ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. |
| Харків | Місто на північному сході України на Слобожанщині. |
Вирівнювання по центру
| Назва | Пояснення |
| :------: | :-----------: |
| ЕІ | Факультет економічної інформатики. |
| ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. |
| Харків | Місто на північному сході України на Слобожанщині. |
```
| Назва | Пояснення |
| ------ | ----------- |
| ЕІ | Факультет економічної інформатики. |
| ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. |
| Харків | Місто на північному сході України на Слобожанщині. |
Вирівнювання по правому краю
| Назва | Пояснення |
| ------: | -----------: |
| ЕІ | Факультет економічної інформатики. |
| ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. |
| Харків | Місто на північному сході України на Слобожанщині. |
Вирівнювання по лівому краю
| Назва | Пояснення |
| :------ | :----------- |
| ЕІ | Факультет економічної інформатики. |
| ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. |
| Харків | Місто на північному сході України на Слобожанщині. |
Вирівнювання по центру
| Назва | Пояснення |
| :------: | :-----------: |
| ЕІ | Факультет економічної інформатики. |
| ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. |
| Харків | Місто на північному сході України на Слобожанщині. |
```
### Зображення
```
```
Подібно до посилань, зображення також мають синтаксис віповідний стилю примітки:
```
![Alt text][id]
```
Зображення з посиланням та заголовком, поданим нижче в документі, що визначає URL-адресу:
![KhNUE][id]
[id]: https://www.hneu.edu.ua/wp-content/uploads/2021/01/IMG_6718.jpg "KhNUE"
```!
![KhNUE][id]
[id]: https://www.hneu.edu.ua/wp-content/uploads/2021/01/IMG_6718.jpg "KhNUE"
```
Можна відобразити зображення із заданим розміром.
```!
```
Примітка 1 з посиланням[^first].
Примітка 2 з посиланням[^second].
Вбудована примітка^[Текст вбудованої примітки].
Дублювання посилання на виноску[^second].
[^first]: Примітка **може мати розмітку**
та кілька абзаців.
[^second]: Примітка з текстом.
```
Примітка 1 з посиланням[^first].
Примітка 2 з посиланням[^second].
Вбудована примітка^[Текст вбудованої примітки].
Дублювання посилання на виноску[^second].
[^first]: Примітка **може мати розмітку**
та кілька абзаців.
[^second]: Примітка з текстом.
```
(Див. кінець документу)
### Повідомлення
:::success
Вітаємо :tada:
:::
:::info
Це інформаційне повідомлення :mega:
:::
:::warning
Попередження :zap:
:::
:::danger
Обережно! :fire:
:::
:::spoiler Натисніть сюди для отримання деталей.
А ось і я :stuck_out_tongue_winking_eye:.
:::
```
:::success
Вітаємо :tada:
:::
:::info
Це інформаційне повідомлення :mega:
:::
:::warning
Попередження :zap:
:::
:::danger
Обережно! :fire:
:::
:::spoiler Натисніть сюди для отримання деталей.
А ось і я :stuck_out_tongue_winking_eye:.
:::
```
### Емодзі
Ви можете ввести будь-який смайлик, наприклад: :smile: :smiley: :cry: :wink:. Приклад:
```
:smile:
:smiley:
:cry:
:wink:
```
### Математичні вирази
Ви можете використовувати математичні вирази та формули за допомогою LaTeX:
Функція *Gamma*, що задовольняє $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$, що здійснюється через інтеграл Ейлера:
$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
```
Функція *Gamma*, що задовольняє $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$, що здійснюється через інтеграл Ейлера:
$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
```
Більш детально про математичні вирази LaTeX можна почитати [тут](https://ru.wikibooks.org/wiki/%D0%9C%D0%B0%D1%82%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D1%84%D0%BE%D1%80%D0%BC%D1%83%D0%BB%D1%8B_%D0%B2_LaTeX).
### Діаграми UML
#### Діаграми послідовності
Діаграми послідовностей можна надати таким чином:
```sequence
Марічка->Іван: Привіт, Іван, як справи?
Note right of Іван: Іван посміхається
Іван-->Марічка: Все добре, дякую.
Note left of Марічка: Марічка позіхає
Марічка->Іван: Коли у нас сессія?
```
````
```sequence
Марічка->Іван: Привіт, Іван, як справи?
Note right of Іван: Іван посміхається
Іван-->Марічка: Все добре, дякую.
Note left of Марічка: Марічка позіхає
Марічка->Іван: Коли у нас сессія?
```
````
#### Алгоритми
```flow
st=>start: Початок
e=>end: Кінець
op=>operation: Обчислення
op2=>operation: Текст Текст Текст
cond=>condition: Так чи ні?
st->op->op2->cond
cond(yes)->e
cond(no)->op2
```
````
```flow
st=>start: Початок
e=>end: Кінець
op=>operation: Обчислення
op2=>operation: Текст Текст Текст
cond=>condition: Так чи ні?
st->op->op2->cond
cond(yes)->e
cond(no)->op2
```
````
#### Класифікація або ієрархія
```graphviz
digraph hierarchy {
nodesep=1.0 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this
Університет->{Деканат1 Деканат2 Їдальня}
Деканат1->{Кафедра1 Кафедра2}
Їдальня-> Буфет
{rank=same;Буфет Кафедра1 Кафедра2} // Put them on the same level
}
```
````
```graphviz
digraph hierarchy {
nodesep=1.0 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this
Університет->{Деканат1 Деканат2 Їдальня}
Деканат1->{Кафедра1 Кафедра2}
Їдальня-> Буфет
{rank=same;Буфет Кафедра1 Кафедра2} // Put them on the same level
}
```
````
(При використанні темної теми, кольори автоматично змінюються)
#### Діаграма Ганта
```mermaid
gantt
title Графік-графік
section Студент 1
Створення проекту :a1, 2014-01-01, 30d
Захист проекту :after a1 , 20d
section Студент 2
Створення проекту :2014-01-12 , 12d
Захист проекту :20d
```
````
```mermaid
gantt
title Графік-графік
section Студент 1
Створення проекту :a1, 2014-01-01, 30d
Захист проекту :after a1 , 20d
section Студент 2
Створення проекту :2014-01-12 , 12d
Захист проекту :20d
```
````
#### Ноти
```abc
X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
```
````
```abc
X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
```
````
#### PlantUML
```plantuml
start
if (condition A) then (yes)
:Text 1;
elseif (condition B) then (yes)
:Text 2;
stop
elseif (condition C) then (yes)
:Text 3;
elseif (condition D) then (yes)
:Text 4;
else (nothing)
:Text else;
endif
stop
```
````
```plantuml
start
if (condition A) then (yes)
:Text 1;
elseif (condition B) then (yes)
:Text 2;
stop
elseif (condition C) then (yes)
:Text 3;
elseif (condition D) then (yes)
:Text 4;
else (nothing)
:Text else;
endif
stop
```
````
#### Vega-Lite
```vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/editor/data/barley.json"},
"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
"y": {"field": "variety", "type": "nominal"},
"color": {"field": "site", "type": "nominal"}
}
}
```
````
```vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/editor/data/barley.json"},
"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
"y": {"field": "variety", "type": "nominal"},
"color": {"field": "site", "type": "nominal"}
}
}
```
````