Кузня контенту

<img src="/images/hneu-images/emb150.png" height="50"> Кузня контенту === Вступ === **Кузня контенту** — це мультиплатформенний онлайн редактор документів **markdown** з можливостями спільного доступу до перегляду та редагування. Це означає, що ви можете створювати документи разом з іншими людьми, використовуючи **ПК**, **планшет** та навіть **смартфон**.  Робоча область === ## Режими роботи **Стаціонарний та планшетний ПК** Редагування: щоб бачити лише код. Перегляд: щоб бачити візуальний результат. Спільний режим: щоб бачити і те, і інше. **Мобільний** Перегляд: щоб бачити візуальний результат. Редагування: щоб бачити лише код. ## Нічний режим Якщо ви не бажаєте бачити білий фон статті, і хочете переглядати все на чорному тлі, натисніть на іконку півмісяця та перейдіть у нічний режим. Вигляд редактора, що перебуває у нічному режимі, можна також повернути до попереднього стану, натиснувши на іконку сонця . ## Завантаження зображень Ви можете завантажити зображення, натиснувши кнопку камери . Також, ви можете просто перетягнути зображення в редактор. Це можно зробити і за допомогою буфера обміну, просто натиснувши **Ctrl+V**. Зображення буде автоматично завантажено на сервер і тому вам не потрібно буде додатково за це перейматися :tada:. ## Спільний доступ Якщо ви хочете поділитися документом з можливістю **редагування** — просто скопіюйте URL-адресу веб-сторінки. Якщо ви хочете поділитися документом так, щоб його можна було лише **переглядати**, натисніть кнопку "Опублікувати" та скопіюйте отриману URL-адресу для подальшого поширення. ## Збереження документів **Завантажити** файл на свій комп'ютер можна у форматах `HTML`, `PDF` та `Markdown`. Також можна скористатися утилітою Pandoc, яка знаходиться поруч з іншими форматами збереження. Вона дозволяє конвертувати файл у формати `Word`, `EPUB`, `RTF` та інші. ## Імпорт документів Аналогічно до функції _збереження_, ви також можете вставити контент з **буферу обміну** , який автоматично розпізнається як **html**, що може бути корисним:smiley:. ## Рівень доступу Можна змінити дозвіл на доступ до документу за допомогою маленької кнопки у верхньому правому куті екрана. Можливі шість варіантів: | |Читання/редагування для власника|Читання для зареєстрованого|Редагування для зареєстрованого|Читання для незареєстрованого|Редагування для незареєстрованого| |:-----------------------------|:--------------:|:------------:|:-------------:|:--------:|:---------:| | **Freely** |✔|✔|✔|✔|✔| | **Editable** |✔|✔|✔|✔|✖| | **Limited** |✔|✔|✔|✖|✖| | **Locked** |✔|✔|✖|✔|✖| | **Protected** |✔|✔|✖|✖|✖| | **Private** |✔|✖|✖|✖|✖| **Лише власник документу може змінити рівень доступу до документу.** ## Вбудовування документу Документи можна вбудувати на інший сайт так: ```html <iframe width="100%" height="500" src="https://content.hneu.edu.ua/features" frameborder="0"></iframe> ``` ## [Режим презентації](./slide-example) Ви можете використовувати спеціальний синтаксис для перетворення документу у слайди презентації. Для цього ви можете скористатися **[Режимом презентації](./slide-example)** . Перейдіть за вищенаведеним посиланням для отримання більш докладних інструкцій. Для того, щоб переключити редактор у режим презентації, змініть [document type](./yaml-metadata#type) на `slide`. Перегляд === ## Зміст У правій нижній частині області перегляду є кнопка _ToC_ (відображається лише у **спільному режимі**). При натисканні цієї кнопки ви побачите поточний зміст — _Table of Contents_, де буде виділено розділ, в якому ви перебуваєте. ToC відображає до **трьох рівнів заголовків**. ## Постійне посилання Кожен заголовок автоматично створює постійне посилання з лівого боку від себе. Ви можете навести курсор миші та натиснути на для того, щоб перейти до відповідної частини документу. Редагування === ## Режим редагування У правому нижньому куті області редактора є кнопка з підписом `sublime`. Натиснувши на неї, ви можете вибрати 3 режими редактора: - sublime (за замовчуванням); - emacs; - vim. ## Комбінації клавіш Комбінації клавіш залежать від обраного режиму редактора. За замовчуванням вони такі ж, як і у Sublime, що досить швидко і зручно. > Більше інформації дивіться [тут](https://codemirror.net/demo/sublime.html). Для emacs: > Більше інформації дивіться [тут](https://codemirror.net/demo/emacs.html). Для vim: > Більше інформації дивіться [тут](https://codemirror.net/demo/vim.html). ## Автозаповнення Цей редактор надає повну підказку щодо автоматичного заповнення markdown. - Емоджі: введіть `:`, щоб показати підказки. - Кодові блоки: введіть ` ``` ` та додатковий символ, щоб показати підказки. - Заголовки: введіть`#`, щоб показати підказки. - Посилання: введіть `[]`, щоб показати підказки. - Externals: введіть `{}`, щоб показати підказки. - Зображення: введіть `!`, щоб показати підказки. ## Назва документу Перший заголовок **першого рівня** буде використовуватись як назва документу. ## Теги При використанні тегів наступним чином, зазначені теги відобразяться у вашій **історії** . ###### теги: `особливості` `навчання` `оновлення` ### Приклад на markdown ``` ###### теги: `особливості` `навчання` `оновлення` ``` ## [Метадані YAML](./yaml-metadata) Спочатку вам потрібно вставити такий синтаксис у початок: ``` --- YAML metas --- ``` Замінивши **YAML metas** будь-якими парамертами YAML ви можете звернутися до прикладу, як це показано нижче: ``` --- title: meta title description: meta description image: https://raw.githubusercontent.com/hackmdio/codimd/develop/public/screenshot.png --- ``` **title** — назва сторінки; **description** — опис сторінки; **image** — зображення. Ви можете надати розширену інформацію про документ, встановивши [додаткові параметри](./yaml-metadata): - robots: встановлення метаботів; - lang: встановлення мови браузера; - dir: встановлення напрямку тексту; - breaks: встановлюється для використання розривів рядків; - GA: встановлюється для використання Google Analytics; - disqus: встановлюється для використання Disqus; - slideOptions: налаштування параметрів режиму слайдів. ## ToC Використайте елемент `[TOC]`, щоб додати *Зміст* у ваш документ. [TOC] ## Emoji Ви можете ввести будь-який смайлик, наприклад: :smile: :smiley: :cry: :wink:. ### Приклад на markdown ``` :smile: :smiley: :cry: :wink: ``` > Повний перелік смайлів можна подивитися [тут](http://www.emoji-cheat-sheet.com/). ## Перелік завдань - [ ] План - [x] Купити овочі. - [ ] Розробити електронний посібник. - [x] Випити трохи води. ### Приклад на markdown ``` - [ ] План - [x] Купити овочі. - [ ] Розробити електронний посібник. - [x] Випити трохи води. ``` ## Блоки коду Ми підтримуємо багато мов програмування. Використовуйте функцію автоматичного заповнення, щоб побачити весь список. ```javascript var s = "JavaScript syntax highlighting"; alert(s); function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ' class=""'; } catch (e) { /* handle exception */ } for (var i = 0 / 2; i < classes.length; i++) { if (checkCondition(classes[i]) === undefined) return /\d+[\s/]/g; } } ``` ### Приклад на markdown ~~~ ```javascript var s = "JavaScript syntax highlighting"; alert(s); function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ' class=""'; } catch (e) { /* handle exception */ } for (var i = 0 / 2; i < classes.length; i++) { if (checkCondition(classes[i]) === undefined) return /\d+[\s/]/g; } } ``` ~~~ ### Вигляд контейнеру для розміщення коду ~~~ ```javascript ``` ~~~ > Якщо потрібно позначити **номери рядків**, введіть = після введення мови блоку коду. > Також ви можете вказати номер рядка, з якого почнеться код. > Так, у блоці нижче, номер рядка починається зі 101: ```javascript=101 var s = "JavaScript syntax highlighting"; alert(s); function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ' class=""'; } catch (e) { /* handle exception */ } for (var i = 0 / 2; i < classes.length; i++) { if (checkCondition(classes[i]) === undefined) return /\d+[\s/]/g; } } ``` #### Приклад на markdown ~~~ ```javascript=101 var s = "JavaScript syntax highlighting"; alert(s); function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ' class=""'; } catch (e) { /* handle exception */ } for (var i = 0 / 2; i < classes.length; i++) { if (checkCondition(classes[i]) === undefined) return /\d+[\s/]/g; } } ``` ~~~ > Або ви можете продовжити нумерацію рядків попереднього кодового блоку, використовуючи `=+`: ~~~ ```javascript=+ var s = "JavaScript syntax highlighting"; alert(s); ``` ~~~ > Іноді у вас може виникати надто довгий текст без переносів . Використайте `!` для перенесення стрічок коду. ```! When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back. ``` #### Приклад на markdown ~~~ ```! When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back. ``` ~~~ ### Коментарі > Використовуйте наступний синтаксис, щоб вказати своє **ім'я, час та колір** для внесення різноманіття у коментарі. > [name=Тарас Шевченко] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7] > > Їх також можна групувати! > > [name=Тарас Шевченко] [time=Sun, Jun 28, 2015 10:00 PM] [color=red] ### Приклад на markdown ``` > Використовуйте наступний синтаксис, щоб вказати своє **ім'я, час та колір** для внесення різноманіття у коментарі. > [name=Тарас Шевченко] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7] > > Їх також можна групувати! > > [name=Тарас Шевченко] [time=Sun, Jun 28, 2015 10:00 PM] [color=red] ``` ## Зовнішні матеріали ### YouTube {%youtube XoaixVD5jVc %} ### Приклад на markdown ``` {%youtube XoaixVD5jVc %} ``` Щоб дізнатися яке посилання має відео, необхідно перейти на його сторінку в YouTube, та натиснути кнопку "Поділитися": ![](https://content.hneu.edu.ua/uploads/upload_a35615f9cb8d8adc12c5a364d6004222.png) Далі потрібно скопіювати частину, що виділена на зображенні нижче: ![](https://content.hneu.edu.ua/uploads/upload_3695083ad159a6da449fb7a4cd822a53.png) ### Gist {%gist schacon/793c8fdea738fd3d04a7%} ### Приклад на markdown ``` {%gist schacon/4277%} ``` ### SlideShare {%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} ### Приклад на markdown ``` {%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} ``` ### PDF **Увага: Ваш веб-переглядач може бути заблокований, якщо не використовується `https` URL-адреса.** {%pdf https://pns.hneu.edu.ua/help/lib/Polozhennya_PNS_2020.pdf %} ### Приклад на markdown ```! {%pdf https://pns.hneu.edu.ua/help/lib/Polozhennya_PNS_2020.pdf %} ``` ## Математичні вирази Ви можете використовувати математичні вирази та формули за допомогою **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\,. $$ ### Приклад на markdown ``` ! Функція *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 Марічка: Марічка позіхає Марічка->Іван: Коли у нас сессія? ``` #### Приклад на markdown ~~~ ```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 ``` #### Приклад на markdown ~~~ ```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 } ``` #### Приклад на markdown ~~~ ```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 ``` #### Приклад на markdown ~~~ ```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:| ``` #### Приклад на markdown ~~~ ```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 ``` #### Приклад на markdown ~~~ ```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"} } } ``` #### Приклад на markdown ~~~ ```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"} } } ``` ~~~ > Детальніше про **діаграми послідовності** можна прочитати [тут](http://bramp.github.io/js-sequence-diagrams/). > Детальніше про **алгоритми** можна прочитати [тут](http://adrai.github.io/flowchart.js/). > Детальніше про **графіки класифікації** можна прочитати [тут](http://www.tonyballantyne.com/graphs.html). > Детальніше про **часові графіки** можна прочитати [тут](http://mermaid-js.github.io/mermaid). > Детальніше про **ноти** можна прочитати [тут](http://abcnotation.com/learn). > Детальніше про **plantuml** можна прочитати [тут](http://plantuml.com/index). > Детальніше про **vega** можна прочитати [тут](https://vega.github.io/vega-lite/docs). > Детальніше про **fretboard** можна прочитати [тут](https://hackmd.io/c/codimd-documentation/%2F%40codimd%2Ffretboard-syntax). Область повідомлень: --- :::success Вітаємо :tada: ::: :::info Це інформаційне повідомлення :mega: ::: :::warning Попередження :zap: ::: :::danger Обережно! :fire: ::: :::spoiler Натисніть сюди для отримання деталей. А ось і я :stuck_out_tongue_winking_eye:. ::: #### Приклад на markdown ``` :::success Вітаємо :tada: ::: :::info Це інформаційне повідомлення :mega: ::: :::warning Попередження :zap: ::: :::danger Обережно! :fire: ::: :::spoiler Натисніть сюди для отримання деталей. А ось і я :stuck_out_tongue_winking_eye:. ::: ``` ## Форматування тексту ### Заголовки ``` # Заголовок першого рівню ## Заголовок другого рівню ### Заголовок третього рівю #### Заголовок четвертого рівню ##### Заголовок п'ятого рівню ###### Заголовок шостого рівню ``` ### Горизонтальні лінії ___ ``` --- *** ``` ### Автозаміна Увімкніть опцію друкарської автозаміни, щоб побачити результат. (c) (C) (r) (R) (tm) (TM) (p) (P) +- тест.. тест... тест..... тест?..... тест!.... !!!!!! ???? ,, Два дефіси -- довге тире "Подвійні лапки" 'Одинарні лапки' ### Акценти **Це напівжирний текст** __Це напівжирний текст__ *Це курсив* _Це курсив_ ~~Закреслений текст~~ Раз ~дватри~ Надрядковий текст: 19^th^ Підрядковий текст: H~2~O ++Підкреслений текст++ ==Виділений текст== #### Приклад на markdown ``` **Це напівжирний текст** __Це напівжирний текст__ *Це курсив* _Це курсив_ ~~Закреслений текст~~ Раз ~дватри~ Надрядковий текст: 19^th^ Підрядковий текст: H~2~O ++Підкреслений текст++ ==Виділений текст== ``` ### Цитати > Цитати також можна групувати ... >> ...за допомогою додаткових знаків `>` , якщо розміщувати їх поруч.. > > > ...або з пробілами. > > > #### Приклад на markdown ```= > Цитати також можна групувати ... >> ...за допомогою додаткових знаків `>` , якщо розміщувати їх поруч.. > > > ...або з пробілами. ``` ### Списки #### Маркований + Створіть список, починаючи рядок із `+`, `-`, або `*` + Підсписки формуються відступом з 2 пробілів: - Зміна символів маркера змушує запустити новий список: * Ac tristique libero volutpat at + Facilisis in pretium nisl aliquet - Nulla volutpat aliquam velit + Дуже просто! #### Приклад на markdown ``` + Створіть список, починаючи рядок із `+`, `-`, або `*` + Підсписки формуються відступом з 2 пробілів: - Зміна символів маркера змушує запустити новий список: * Ac tristique libero volutpat at + Facilisis in pretium nisl aliquet - Nulla volutpat aliquam velit + Дуже просто! ``` #### Нумерований 1. Світає 2. Край неба палає 4. Соловейко в темнім гаї сонце зустрічає 5. Ви можете використовувати послідовні номери ... 6. ...або завжди ставити `1.` 7. feafw 8. 332 9. 242 10. 2552 11. e2 #### Приклад на markdown ``` 1. Світає 2. Край неба палає 4. Соловейко в темнім гаї сонце зустрічає 5. Ви можете використовувати послідовні номери ... 6. ...або завжди ставити `1.` 7. feafw 8. 332 9. 242 10. 2552 11. e2 ``` *(Якщо залишити порожній рядок між двома будь-якими сусідніми рядками, то вертикальні інтервали між текстом збільшаться)* Почніть нумерацію зі зміщенням: 57. Верба 1. Тополя #### Приклад на markdown ``` 57. Верба 1. Тополя ``` ### Код по тексту Рядок `code` #### Приклад на markdown ~~~ Рядок `code` ~~~ Код за допопомогою відступу: // Some comments line 1 of code line 2 of code line 3 of code #### Приклад на markdown ~~~ // Some comments line 1 of code line 2 of code line 3 of code ~~~ ### Таблиці | Назва | Пояснення | | ------ | ----------- | | ЕІ | Факультет економічної інформатики. | | ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. | | Харків | Місто на північному сході України на Слобожанщині. | Вирівнювання по правому краю | Назва | Пояснення | | ------: | -----------: | | ЕІ | Факультет економічної інформатики. | | ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. | | Харків | Місто на північному сході України на Слобожанщині. | Вирівнювання по лівому краю | Назва | Пояснення | | :------ | :----------- | | ЕІ | Факультет економічної інформатики. | | ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. | | Харків | Місто на північному сході України на Слобожанщині. | Вирівнювання по центру | Назва | Пояснення | | :------: | :-----------: | | ЕІ | Факультет економічної інформатики. | | ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. | | Харків | Місто на північному сході України на Слобожанщині. | #### Приклади на markdown ~~~ | Назва | Пояснення | | ------ | ----------- | | ЕІ | Факультет економічної інформатики. | | ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. | | Харків | Місто на північному сході України на Слобожанщині. | Вирівнювання по правому краю | Назва | Пояснення | | ------: | -----------: | | ЕІ | Факультет економічної інформатики. | | ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. | | Харків | Місто на північному сході України на Слобожанщині. | Вирівнювання по лівому краю | Назва | Пояснення | | :------ | :----------- | | ЕІ | Факультет економічної інформатики. | | ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. | | Харків | Місто на північному сході України на Слобожанщині. | Вирівнювання по центру | Назва | Пояснення | | :------: | :-----------: | | ЕІ | Факультет економічної інформатики. | | ХНЕУ | Харківський національний економічний університет імені Семена Кузнеця. | | Харків | Місто на північному сході України на Слобожанщині. | ~~~ ### Посилання [Текст посилання](http://dev.nodeca.com) [Посилання з заголовком](http://nodeca.github.io/pica/demo/ "А ось і заголовок!") Автоперетворене посилання https://github.com/nodeca/pica #### Приклад на markdown ``` [Текст посилання](http://dev.nodeca.com) [Посилання з заголовком](http://nodeca.github.io/pica/demo/ "А ось і заголовок!") Автоперетворене посилання https://github.com/nodeca/pica ``` ### Зображення ![Емблема ХНЕУ](https://www.hneu.edu.ua/wp-content/uploads/2021/01/IMG_8192-1.png) #### Приклад на markdown ``` ![Емблема ХНЕУ](https://www.hneu.edu.ua/wp-content/uploads/2021/01/IMG_8192-1.png) ``` Подібно до посилань, зображення також мають синтаксис віповідний стилю примітки: ``` ![Alt text][id] ``` Зображення з посиланням та заголовком, поданим нижче в документі, що визначає URL-адресу: ![KhNUE][id] [id]: https://www.hneu.edu.ua/wp-content/uploads/2021/01/IMG_6718.jpg "KhNUE" #### Приклад на markdown ``` ![KhNUE][id] [id]: https://www.hneu.edu.ua/wp-content/uploads/2021/01/IMG_6718.jpg "KhNUE" ``` ![](https://www.hneu.edu.ua/wp-content/uploads/2021/01/IMG_8192-1.png =200x200) Можна відобразити зображення із заданим розміром. #### Приклад на markdown ``` ![](https://www.hneu.edu.ua/wp-content/uploads/2021/01/IMG_8192-1.png =200x200) ``` #### Підрядкові посилання (примітки) Примітка 1 з посиланням[^first]. Примітка 2 з посиланням[^second]. Вбудована примітка^[Текст вбудованої примітки]. Дублювання посилання на виноску[^second]. [^first]: Примітка **може мати розмітку** та кілька абзаців. [^second]: Примітка з текстом. #### Приклад на markdown ``` Примітка 1 з посиланням[^first]. Примітка 2 з посиланням[^second]. Вбудована примітка^[Текст вбудованої примітки]. Дублювання посилання на виноску[^second]. [^first]: Примітка **може мати розмітку** та кілька абзаців. [^second]: Примітка з текстом. ``` *(Див. кінець документу)* ### Визначення Термін 1 : Визначення 1 з коротким продовженням. Термін 2 з *вбудованою розміткою* : Визначення 2 { трішки коду, друга частина Визначення 2 } Третій пункт визначення Визначення 2. _Компактний стиль:_ Термін 1 ~ Визначення 1 Термін 2 ~ Визначення 2а ~ Визначення 2b #### Приклад на markdown ``` Термін 1 : Визначення 1 з коротким продовженням. Термін 2 з *вбудованою розміткою* : Визначення 2 { трішки коду, друга частина Визначення 2 } Третій пункт визначення Визначення 2. _Компактний стиль:_ Термін 1 ~ Визначення 1 Термін 2 ~ Визначення 2а ~ Визначення 2b ``` ### Абревіатури Це приклад абревіатури HTML. Слово "HTML" конвертується, але лише при повному співпадінні, у таких словах, як, наприклад, "xxxHTMLyyy" абревіатура не буде відображатися. *[HTML]: Hyper Text Markup Language #### Приклад на markdown ``` *[HTML]: Hyper Text Markup Language ```