Путівник по Markdown

Автор ідеї та втілення: Олександр Мізюк
E-mail: gtmizyuk@gmail.com

Вступ

У даному керівництві ви познайомитесь з Markdown - легкою мовою розмітки даних, яку створено з нахилом на читабельність та зручність редагування тексту з подальшим перетворенням його на HTML.

У підручнику подані основні відомості про базовий і розширений (позначений ) синтаксиси мови Markdown.

Окрім того, керівництво містить велику кількість практичних прикладів того, як використовувати розмітку Markdown.

Для чого можна використовувати Markdown? Цю мову розмітки використовують для створення нотаток, документів, вебсайтів, технічної документації тощо. Цікаво те, що файли Markdown можна перетворювати на презентації, які зручно переглядати в браузері.

Одним з наочних прикладів практичного застосування Markdown може слугувати і цей підручник, адже створений він саме за допомогою мови розмітки Markdown.

Створюйте цікаві проекти разом з Markdown!

Для кого цей підручник

Підручник зорієнтований на вчителів інформатики та їхніх учнів, але кожен може знайти свою зацікавленість і можливість використати отримані знання для власних цілей.

Використовуючи Markdown вчителі зможуть представляти навчальні матеріали у доступній й зручній для учнів формі, як локально, так і дистанційно, розміщуючи в Інтернеті, незалежно від того, на якому комп’ютерному пристрої матеріал буде переглядатися.

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

Дізнайтеся, як використовувати Markdown на повну!

Початкові знання і вміння

Необхідні початкові знання для входження в тему - рівень користувача комп’ютера. Познайомившись із синтаксисом Markdown, ви можете сміливо екпериментувати з розміткою.

Використання HTML в розмітці Markdown передбачає, що ви маєте початкові уявлення про мову HTML і відрізняєте теги цієї мови.

Для роботи із шаблоном в редакторі StackEdit вітаються знання основ HTML і CSS, але це не є обов’язковим, оскільки в підручнику наведені вже готові фрагменти коду, які можна використовувати в шаблоні.

Для опрацювання розділу, присвяченому створенню презентацій з Remark, ви повинні розуміти синтаксис Markdown і мати початкові знання про HTML і CSS.

Для знавців HTML і CSS, JS, звичайно, є ширше поле для діяльності, адже вони можуть писати і використовувати власний код.

Markdown? Легко!

Інструменти

Хоча Markdown є мовою розмітки, яку легко читати та редагувати звичайними текстовими редакторами, існують спеціально розроблені, для цих речей, програми.

Для роботи з Markdown, у даному підручнику, розглядається онлайн-редактор StackEdit, який підтримує доповнений і покращений варіант мови Markdown - Github Flavoured Markdown.

Для створення презентацій з Markdown, у підручнику використовується Remark - простий інструмент для створення слайдових презентацій в браузері.

Пишіть Markdown відразу у вікні браузера!

Знайомство з Markdown

Абзаци

Cтворюються за допомогою порожнього рядка. Якщо навколо тексту зверху і знизу є порожні рядки, то текст перетворюється в абзац.

Заголовки

Заголовки мають 6 рівнів і позначаються сиволом # на початку рядка.

MD:

# Заголовок 1 рівня
## Заголовок 2 рівня
### Заголовок 3 рівня
#### Заголовок 4 рівня
##### Заголовок 5 рівня
###### Заголовок 6 рівня

Результат:

Форматування тексту

MD:

*Курсивний*  _текст_

**Напівжирний**  __текст__

==Виділений текст==

~~Закреслений текст~~ 

> Текст цитати.

H~2~O це формула води.

1 MiB = 2^20^ байт = 1024 KiB.

Результат:

Курсивний текст

Напівжирний текст

Виділений текст

Закреслений текст

Текст цитати.

H₂O - це формула води.

1 MiБ (МебіБайт) = 2²⁰ Байт = 1024 KiB (КібіБайт).

Відміна форматування тексту

MD:

    Якщо ви хочете, щоб введені теги <strong>HTML</strong>, код, теги <strong>Markdown</strong> відображалися в точності як ви їх написали, то почніть рядок з <i>чотирьох пропусків</i>.

Результат:

Якщо ви хочете, щоб введені теги <strong>HTML</strong>, код, теги <strong>Markdown</strong> відображалися в точності як ви їх написали, то почніть рядок з <i>чотирьох пропусків</i>.

Спеціальні символи

MD:

> Текст цитати.

\> Текст цитати.

Результат:

Текст цитати.

> Текст цитати.

Списки

Марковані

Для розмітки невпорядкованих списків можна використовувати або *, або -, або+.

MD:

- елемент 1
- елемент 2
- елемент 3

Результат:

• елемент 1
• елемент 2
• елемент 3

Вкладені пункти мають бути створені чотирма пропусками перед маркером пункту.

MD:

* елемент 1
* елемент 2
    * вкладений елемент 2.1
    * вкладений елемент 2.2
* елемент 3
	+ вкладений елемент 3.1
	+ вкладений елемент 3.2
	    - вкладений елемент 3.2.1
	    - вкладений елемент 3.2.2

Результат:

• елемент 1
• елемент 2
  • вкладений елемент 2.1
  • вкладений елемент 2.2
• елемент 3
  • вкладений елемент 3.1
  • вкладений елемент 3.2
    • вкладений елемент 3.2.1
    • вкладений елемент 3.2.2

Списки завдань

MD:

- [ ] не позначено
- [x] позначено

Результат:

• не позначено
• позначено

Нумеровані

MD:

1. Елемент 1
2. Елемент 2
    1. Вкладений елемент 2.1 
    2. Вкладений елемент 2.2
3. Елемент 3

Результат:

1. Елемент 1
2. Елемент 2
   1. Вкладений елемент 2.1
   2. Вкладений елемент 2.2
3. Елемент 3

Горизонтальна лінія

MD:

***
---

Результат:

---

---

Посилання

Зовнішні

MD:

Це [посилання](https://example.com).

Це [посилання з атрибутом title](https://example.com "Я посилання"). Це - [без title](https://example.com).

Це [приклад][1] [кількох][2] [посилань][id] з розміткою як у виносок в тексті. Можна використовувати [короткий запис][] без `id`.

[1]: https://example.com "Назва посилання 1"
[2]: https://example.com/some
[id]: https://example.com/links (Назва посилання id)
[короткий запис]: https://example.com/short

Результат:

Це посилання.

Це посилання з атрибутом title. Це - без title.

Це приклад кількох посилань з розміткою як у виносок в тексті. Можна використовувати короткий запис без id.

Автоматичне посилання

MD:

https://www.example.com
`https://www.example.com`
example@hotmail.com
<example@hotmail.com>
`example@hotmail.com`

Результат:

https://www.example.com
https://www.example.com
example@hotmail.com
example@hotmail.com
example@hotmail.com

Ідентифікатори заголовків

MD:

### Горизонтальна лінія
[Горизонтальна лінія](#горизонтальна-лінія)

Результат:

Горизонтальна лінія

MD:

[Форматування тексту](http://cs.rozh2sch.org.ua/stackedit.html#форматування-тексту)

Результат:

Форматування тексту

Зображення

Зображення з атрибутами alt і title

MD:

![alt](https://bit.ly/33B4VxM "shih-tzu")

Результат:

Локально

MD:

![alt](shih-tzu.jpg "shih-tzu")

Результат:

Віддалено

MD:

![alt](https://bit.ly/33B4VxM "shih-tzu")

Результат:

Розмір

MD:

![alt](https://bit.ly/33B4VxM "shih-tzu" =80x120)

Результат:

Зображення-виноски

MD:

![alt][image1]
![alt][image2]
![alt][image3]

[image1]: https://bit.ly/3djeSo1 (Australian Shepherd)
[image2]: https://bit.ly/3doa8gP (Bulldog)
[image3]: https://bit.ly/2QCJtTK (Jack Russell Terrier)

Результат:

Зображення-посилання

MD:

[![alt](https:///bit.ly/2QCJtTK)](https://bit.ly/2QCJtTK "Jack Russell Terrier")

Результат:

Програмний код

Код в тексті

MD:

`print('Hello, World!')`

Результат:

print('Hello, World!')

Блок коду

MD:

```
// блок коду
var foo = 'bar';
```

Результат:

// блок коду
var foo = 'bar';

Підсвітка коду

MD:

```javascript
// підсвітка коду JavaScript
var foo = 'bar';
```

Результат:

// підсвітка коду JavaScript
var foo = 'bar';

Розмітка Markdown в блоці коду

MD:

~~~
```javascript
// підсвітка коду JavaScript
var foo = 'bar';
```
~~~

Результат:

```javascript
// підсвітка коду JavaScript
var foo = 'bar';
```

Таблиці

MD:

Товар     | Ціна
--------- | -----
Ноутбук   | $1600
Смартфон  | $150
Принтер   | $75

Результат:

Товар	Ціна
Ноутбук	$1600
Смартфон	$150
Принтер	$75

MD:

| Ім'я           | Прізвище    | Розробка        |
|:-------------- |:-----------:| ---------------:|
| за лівим краєм | по центру   | за правим краєм |
| Лінус          | Торвальдс   | Linux           |
| Денніс         | Рітчі       | С               |
| Джек           | Дорсі       | Twitter         |

Результат:

Ім’я	Прізвище	Розробка
за лівим краєм	по центру	за правим краєм
Лінус	Торвальдс	Linux
Денніс	Рітчі	С
Джек	Дорсі	Twitter

Абревіатури

MD:

*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets
*[JS]: JavaScript
*[URL]: Uniform Resource Locator
*[MD]: Markdown

Результат:

MD перетворює текст у HTML. Для візуальної презентації HTML-сторінок використовують CSS. JS за допомогою сценаріїв надає вебсторінкам інтерактивності. Вебсторінки мають власну URL-адресу.

Словник понять

MD:

Markdown
: Інструмент перетворення тексту в HTML

Філософія Markdown
: Мова `Markdown` покликана бути такою ж простою для читання та простотою для написання, наскільки це можливо

StackEdit
: Редактор `Markdown` в браузері

Автори
: Джон Грубер
: Бенуа Швеблін

Результат:

Markdown

Інструмент перетворення тексту в HTML

Філософія Markdown

Мова Markdown покликана бути такою ж простою для читання та простотою для написання, наскільки це можливо

StackEdit

Редактор Markdown в браузері

Автори

Джон Грубер

Бенуа Швеблін

Виноски

MD:

MD[^1] перетворює текст у HTML[^2]. 
Для візуальної презентації HTML[^2]-сторінок використовують CSS[^3].
JS[^4] за допомогою сценаріїв надає вебсторінкам інтерактивності. 
Веб-сторінки мають власну URL[^5]-адресу.

[^1]: MD - легка мова розмітки.
[^2]: HTML - мова розмітки гіпертексту.
[^3]: CSS - спеціальна мова стилю сторінок, що використовується для опису їх зовнішнього вигляду.
[^4]: JS - скриптова мова. 
[^5]: URL - стандартизована адреса певного ресурсу.

Результат:

MD¹ перетворює текст у HTML².
Для візуальної презентації HTML²-сторінок використовують CSS³.
JS⁴ за допомогою сценаріїв надає вебсторінкам інтерактивності.
Веб-сторінки мають власну URL⁵-адресу.

Emoji

MD:

> Створено з :heart: за допомогою [StackEdit](https://stackedit.io/).

Результат:

Створено з ❤️ за допомогою StackEdit.

HTML в Markdown

MD всередині HTML:

<p>*Курсив* і **напівжирний**</p>не будуть працювати.

Результат:

*Курсив* і **напівжирний**

не будуть працювати.

Коментарі

HTML:

<!-- цей вміст не відображається на сторінці -->

Назви клавіш

HTML:

<kbd>Ctrl</kbd>+<kbd>C</kbd>
<kbd>Ctrl</kbd>+<kbd>V</kbd>

Результат:

Ctrl+C
Ctrl+V

Внутрішні посилання

HTML:

<a href="#link" title="внутрішнє посилання">Тут натискаємо</a> 
<a id="link">Сюди приходимо (текст можна видалити)<a/>

Результат:

Тут натискаємо
Сюди приходимо (текст можна видалити)

Зовнішні посилання у новій вкладці

HTML:

<a href="https://google.com.ua" target="_blank" title="Google">Google</a>

Результат:

Google

Відео

YouTube

HTML:

<div class="responsive-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/wgbV6DLVezo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

Результат:

Локально

HTML:

<div class="responsive-video"><iframe src="remark/assets/control_presentation.mp4" width="560" height="315" autoplay=false></iframe></div>

Результат:

Створення презентацій з Remark

Швидкий старт

Для швидкого створення презентації за допомогою Remark, виконайте кілька простих кроків.

1. Створіть HTML-файл з таким вмістом:

<!DOCTYPE html>
<html lang="uk">
<head>
    <title>Cтворення HTML-презентацій з Remark</title>
    <meta charset="utf-8">
    <link rel="icon" type="image/svg+xml" href="https://image.flaticon.com/icons/svg/957/957493.svg" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" />
    <style>
        @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
        @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
        @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

        body { font-family: 'Droid Serif'; }
        h1, h2, h3 {
            font-family: 'Yanone Kaffeesatz';
            font-weight: normal;
        }
        .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
</head>
<body>
    <textarea id="source">

class: center, middle

# Титульний слайд

---

# Зміст

--

1. Вступ

--

2. Основна частина

--

3. Закінчення

---

# Вступ

Деякий текст.

---

# Основна частина

Розділ 1.

--

- Підрозділ 1.1

--

- Підрозділ 1.2

--

Розділ 2.

--

- Підрозділ 2.1

---

# Закінчення

Деякий текст.

    </textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
    <script>    
        var slideshow = remark.create();
    </script>
</body>
</html>

2. Відкрийте створений файл презентації у браузері і перегляньте презентацію (використовуйте клавіші-стрілки, клавішу Пропуск, колесо прокручування мишки чи проведіть дотиком на сматфоні чи планшеті).
3. Відредагуйте розмітку Markdown та/або HTML і CSS, за потребою, збережіть зміни у файлі та оновіть сторінку в браузері.
4. Натисніть на клавіатурі клавішу C, щоб клонувати екран; потім натисніть клавішу P, щоб перейти в режим доповідача. Для переходу в повноекранний режим використовуйте клавішу F, а для відкривання меню довідки - H.

Як це працює

У HTML-сторінку підключений JS-файл remark.js

<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>

який, власне, і обробляє розмітку Markdown й перетворює її у слайди. Як бачимо, файл підключений віддалено, тому для використання необхідне підключення до Інтернету. Для офлайн-використання потрібно завантажити remark.js у каталог з HTML-файлом і прописати локальний шлях підключення скрипта в HTML-коді.

Для створення нової презентації, за замовчуванням, в коді HTML-сторінки необхідно записати виклик функції create(), яка запускає створення нової презентації:

<script>    
	var slideshow = remark.create();
</script>

Коли дана функція викликається без жодних аргументів, очікується, що розмітка Markdown буде розташована всередині коду HTML-сторінки між тегами:

<textarea id="source"> 
	<!-- тут розмітка Markdown -->
</textarea>

Дуже зручно зберігати джерело розмітки Markdown в окремому файлі з розширенням .md. Використовуючи параметр sourceUrl, можна вказати URL-адресу вашого файла з Markdown-розміткою:

<script>
	var slideshow = remark.create({ sourceUrl: 'markdown.md' });
</script>

Наприклад, виконаємо запуск вебсервера командою python -m http.server 8000 (номер порта 8000 можна змінити) у командному рядку в каталозі вашого html-файла. Коли вебсервер запрацює, ви отримаєте доступ до своїх файлів через http://localhost:8000.

Шаблон HTML-файла презентації

У HTML-файл презентації, як і у випадку підключення Remark, можна, за потреби, підключати інші файли бібліотек, записувати власні правила стильового оформлення в розділі <style></style> тощо. Наприклад, у шаблоні, який був створений в розділі Швидкий старт, використовується:

1. Favicon - іконка сайту, що зображається поряд з адресою сайта в адресному рядку.

<link rel="icon" type="image/svg+xml" href="https://image.flaticon.com/icons/svg/957/957493.svg" />

2. Набір значків Font Awesome 5.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" />

3. Шрифти Google Fonts.

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

body { font-family: 'Droid Serif'; }
h1, h2, h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }

4. Деякі стильові правила для заголовків і блоків програмного коду.

Створення слайдів

Як вже відомо, Remark використовує синтаксис Markdown для створення слайдів. Давайте розглянемо приклад створення слайдів презентації, використовуючи короткі пояснення й фрагменти коду Markdown.

Розділювачі слайдів

Для розділення слайдів використовують три тире ---.

# Слайд 1

Деякий текст.

---

# Слайд 2

Деякий текст.

---

# Слайд 3

Деякий текст.

Рівні заголовків тексту

Рівні заголовків тексту на слайдах створюється за допомогою символа #.

# Слайд

# Заголовок 1 рівня 

## Заголовок 2 рівня

### Заголовок 3 рівня

#### Заголовок 4 рівня

##### Заголовок 5 рівня

###### Заголовок 6 рівня

Текст на слайді

Для розділення рядків тексту на слайді використовують два тире --.

Зверніть увагу на порожні рядки перед розділювачами і після них. Окрім того, що вони роблять одноразово відступ між рядками по вертикалі, вони, також, не дозволяють рядкам одночасно з’являтись на слайді, як у випадку четвертого і п’ятого рядків у прикладі.

# Текст на слайді

На цьому слайді поступово з'являються рядки тексту:

--

- перший рядок

--

- другий рядок

--

- третій рядок

--

- четвертий рядок
- разом з п'ятим

Нотатки для доповідача

Для додавання нотаток до слайду використовують три знаки питання ???.

Нотатки відображаються лише в режимі доповідача. Щоб увімкнути/вимкнути режим доповідача використовуйте клавішу P.

# Нотатки для доповідача

На цьому слайді додані нотатки про слайд для доповідача.

???
Нотатки до слайду.

Коментарі

Коментарі можна додавати на слайди за допомогою конструкції <!-- тут коментар -->. Коментарі є прихованими для глядача під час демонстрації презентації.

# Коментарі

Деякий текст.

<!-- I'm a comment. --> Тут прихований коментар.

Знову деякий текст.

Властивості слайда

До слайдів можна додавати властивості у форматі назва властивості: значення, а потім використовувати ці властивості у презентації.

Властивості слайда та їх значення записуються над рядком заголовка слайда.

Ім’я слайда

Властивість name - ім’я слайда.

# Перший слайд

Деякий текст.

---

name: properties 

# Другий слайд

Цей слайд має ім'я `properties`, яке можна використати на поточному слайді.

Для цього необхідно записати 

{{ name }} 

у потрібному місці слайда.
---

# Третій слайд

Деякий текст.

Навігація між слайдами за ім’ям слайда

Для переходу між слайдами за ім’ям слайда використовується звичайне внутрішнє посилання в Markdown.

В якості якоря посилання записується ім’я слайда (в назві використовуйте букви англійського алфавіту), що міститься у властивості name.

name: slide-one

# Слайд 1

Сюди перейшли із другого слайда за допомогою посилання.

Повернутися на [другий слайд](#slide-two).

---

name: slide-two

# Слайд 2

[На перший слайд](#slide-one)

Вирівнювання усього тексту на слайді

Властивість class - приймає, розділений комами, список імен класів, які впливають на форматування на поточному слайді.

Властивість дозволяє призначати CSS-класи до слайду. Зокрема, можна використовувати готовий набір класів для встановлення горизонтального і вертикального вирівнювання для усього тесту на слайді.

name: text-alignment
class: middle, center

# Деякий слайд

Деякий текст на слайді, вирівняний по центру слайда.

Перше значення вказує вирівнювання вертикально:

- top (за замовчуванням)
- middle
- bottom

Друге значення вказує вирівнювання горизонтально:

- left (за замовчуванням)
- center
- right

Фонові зображення

background-image - властивість слайда для підключення тла до поточного слайда. За замовчуванням, фонове зображення буде відцентроване горизонтально та вертикально відносно слайда та зменшене за розмірами, якщо виявиться більшим за слайд.

Стилі CSS як для фонового зображення слайдів, так й інші стилі, визначені, за замовчуванням, у стилях Remark. За потреби, стилі можна перевизначити у власному HTML-файлі презентації.

class: top, left  
background-image: url(https://bit.ly/2R8y2DR) 

# Тло слайда

Цей слайд містить фонове зображення.

Приховані слайди

Для приховування слайда під час показу використовуйте властивість exclude зі значенням true.

exclude: true

# Приховані слайди

Цей слайд під час демонстрації презентації не буде відображений.

Лічильник слайдів

count - властивість, яка дозволяє не включати конкретні слайди в лічильник слайдів, який, за замовчуванням, відображається в правому нижньому куті презентації. Для цього необхідно для властивості count встановити значення false.

count: false

# Лічильник слайдів

Цей слайд не буде рахуватись лічильником слайдів, що розташований у правому нижньому куті.

Оновлення вмісту слайда

template - властивість, яка дозволяє додавати вміст до слайдів презентації за допомогою певного шаблону. Значення цієї властивості - ім’я слайда, а у самому шаблоні вказується вміст, що треба додати на слайд.

name: add-content

# Оновлення вмісту слайда

Оновлення вмісту поточного слайда.

Зараз до цього слайда буде додано вміст.

---

template: add-content

Цей вміст був доданий до слайда, який має ім'я `add-content`.

Макет

Властивість layout зі значенням true робить поточний слайд макетом, який служить в якості шаблону за замовчуванням для всіх наступних слайдів.

Якщо встановити значення false, то відбувається перехід до використання початкового шаблону за замовчуванням.

layout: true

# Секція

---

## Підрозділ 1

---

## Підрозділ 2

Вирівнювання текстових блоків на слайді

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

Зокрема, можна застосовувати готовий набір класів вмісту для встановлення горизонтального вирівнювання блоків тексту.

Зверніть увагу на конструкцію використання класів: .клас[деякий вміст].

#  Вирівнювання тексту

.left[за лівим краєм]

.center[по центру]

.right[за правим краєм]

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

- left (за замовчуванням)
- center
- right

Вставка зображень

Зображення на слайди додаються за допомогою розмітки Markdown.

В даному випадку, до вставлених зображень було застосовано вирівнювання за лівим краєм і правим краєм за допомогою класів вмісту .left і .right відповідно.

# Зображення на слайді

На цьому слайді вставили зображення і вирівняли за лівим краєм і правим краєм відповідно.

.left[![вирівнювання зображення-анімації за лівим краєм](https://bit.ly/2UHTj8j "kitten-playing")]

.right[![вирівнювання фото за правим краєм](https://bit.ly/33B4VxM "shih-tzu")]

Вставка відео

Існує кілька способів включення відео в презентацію Remark: вбудований код з YouTube чи інших сайтів і спосіб вставлення файлів з локального каталогу.

# Вставка відео

1. Відео з YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/UNxezXWQu10" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

2. Відео локально (наприклад, з каталогу assets).

<video width="560" height="420" controls>
	<source src="assets/video_example.mp4" type="video/mp4">
</video> 

Підсвітка коду

Для зміни параметрів підсвітки коду зверніться до розділу Конфігурація Remark.

Зокрема, за допомогою опції highlightStyle: far можна вказати стиль підсвітки (arta, ascetic, dark, default, far, github, googlecode, idea, ir-black, magula, monokai, rainbow, solarized-dark, solarized-light, sunburst, tomorrow, tomorrow-night-blue, tomorrow-night-bright, tomorrow-night, tomorrow-night-eighties, vs, zenburn), за допомогою опції highlightLines: true - дозволити підсвічування жовтим кольором рядків коду, що позначені символом зірочки *, а за допомогою опції highlightSpans: true - дозволити підсвічування жовтим кольором в тексті коду окремих його частин, виділяючи їх зворотними апострофами ``.

```python
def add(a, b):
*	return `a + b`
```

CSS-класи

Коли в розмітці зустрічається один або декілька імен класів CSS, а потім вказуються квадратні дужки, вміст із дужок замінюється на HTML-теги <span> із зазначеними класами.

MD:

.someclass[.class1.class2[деякий текст починається з одним оформленням,] а продовжується з іншим]

HTML:

<span class="someclass">
	<span class="class1 class2">деякий текст починається з одним оформленням,</span> а продовжується з іншим
</span>

Якщо ви хочете мати <div>-теги, розділіть ваш вміст на нові рядки.

MD:

.someclass[
.class1.class2[
деякий текст починається з одним оформленням,] а продовжується з іншим з нового рядка]

HTML:

<div class="someclass">
	<div class="class1 class2">деякий текст починається з одним оформленням,</div>
	а продовжується з іншим з нового рядка
</div>

Керування презентацією

Для демонстрації презентації достатньо відкрити HTML-файл презентації у браузері. А далі, для керування показом, використовувати або клавіші-стрілки, або клавішу Пропуск, або колесо прокручування мишки, або дотик на сматфоні чи планшеті.

Презентацію можна демонструвати також в режимі доповідача.

Режим доповідача

Режим доповідача можна активувати/деактивувати, натиснувши клавішу P на клавіатурі, фокусуючись у вікні браузера, в якому відкритий файл презентації. Вам буде представлено ваш поточний слайд, попередній перегляд наступного слайду, ваші поточний та наступний слайди, а також таймер.

Крім того, ви можете натиснути клавішу C, щоб створити нове вікно, де відображатиметься та сама презентація. Це вікно пов’язане з головним вікном. Зміна слайда в одному вікні спричинить до зміни слайда у іншому.

Меню довідки

Щоб побачити, які сполучення клавіш використовуються для керування презентацією, під час демонстрації презентації натисніть H або ?.

Експорт у PDF і друк

При збереженні презентації у форматі PDF налаштуйте параметри відображення слайдів, які запропонує браузер, для коректного відображення вмісту на слайдах.

1. Відкрийте презентацію в браузері.
2. Змініть розмір вікна браузера так, щоб слайди заповнили повну ширину вікна (у верхній і нижній частині слайдів має бути трохи вільного місця).
3. Натисніть Ctrl+P, налаштуйте опції відображення і збережіть файл у форматі PDF, за потреби, роздрукуйте.

Конфігурація Remark

<script>  
    var slideshow = remark.create({
       highlightStyle: 'tomorrow-night-blue', // стиль підсвічування коду
       highlightLines: true,                  // підсвічування рядків коду, позначених зірочкою (*)
       highlightSpans: true,                  // підсвічування в тексті коду фрагментів, які виділені зворотними апострофами (``)
       // стилі коду: arta, ascetic, dark, default, far, github, googlecode, idea, ir-black, magula, monokai, rainbow, solarized-dark, solarized-light, sunburst, tomorrow, tomorrow-night-blue, tomorrow-night-bright, tomorrow-night, tomorrow-night-eighties, vs, zenburn
       // Формат слайдів
       // Default: '4:3'
       // Alternatives: '16:9', ...
       ratio: '4:3',
    
      // Навігація між слайдами
      navigation: {
        // навігація за допомогою прокрутки
        // Default: true
        // Alternatives: false
        scroll: true,

        // навігація за допомогою дотику на сенсорних екранах
        // Default: true
        // Alternatives: false
        touch: true,

        // навігація за допомогою натискання мишки
        // Default: false
        // Alternatives: true
        click: false,
      },
    
       // Параметри таймера
      timer: {
        // запустити таймер, коли відбудеться зміна слайдів
        // Default: true
        // Alternatives: false
        startOnChange: true,

        // скинути таймер
        // Default: true
        // Alternatives: false
        resetable: true,

        // увімкнути/вимкнути таймер
        // Default: true
        // Alternatives: false
        enabled: true,

        // формат часу, який минув у мілісекундах, за замовчуванням H:mm:ss
        formatter: function (elapsedTime) {
          var left = elapsedTime;
          var millis = left % 1000; left = Math.floor(left / 1000);
          var seconds = left % 60; left = Math.floor(left / 60);
          var minutes = left % 60; left = Math.floor(left / 60);
          var hours = left;

          return '' + hours + ':' + ([minutes, seconds]
            .map(function (d) { return '' + d; })
            .map(function (s) { return s.length < 2 ? '0' + s : s; })
            .join(':'));
        }
      },
    
      // Позначення номера слайда
      slideNumberFormat: 'Слайд %current% з %total%',
      // використання функції формату 
      slideNumberFormat: function (current, total) {
        return 'Слайд ' + current + ' з ' + total;
        // return current + ' / ' + total;
      },
    
      // Підрахунок слайдів
      countIncrementalSlides: true,
      
      // Підключення локального чи зовнішнього файла з Markdown
      // у тег textarea з id="source"
      // Default: undefined
      // Alternatives: 'some_file.md', 'https://example.host.com/file.md', ...
      sourceUrl: 'markdown.md',     
    });
    </script>

Налаштування StackEdit

Додатковий код в шаблоні вебсторінки зі змістом

Favicon

HTML:

<!-- варіанти для png і svg для віддаленого підключення, можна підключати й локально -->
<link  rel="icon" type="image/png"  href="https://bit.ly/3bxx23w">
<link rel="icon" type="image/svg+xml" href="https://image.flaticon.com/icons/svg/2038/2038433.svg">  

Font Awesome 5

HTML:

<!-- підключення шрифтових іконок Font Awesome 5 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" />  

CSS:

.fontawesome-icon {  
	text-shadow: 1px 1px 1px #ccc;  
	font-size:1.5em;  
}  
.fa-laptop-code,  
.fa-puzzle-piece,  
.fa-github-alt{  
	color:#3C787E;  
	font-size:1.5em  
}

HTML:

<i class="fas fa-laptop-code fontawesome-icon"></i><br>
<i class="fas fa-puzzle-piece"></i><br>
<i class="fab fa-github-alt fontawesome-icon"></i>

Результат:

Зміст

CSS:

.stackedit__toc ul{
    padding:0  
}  
.stackedit__toc ul a{
    margin:.3rem 0;
    padding:.3rem 1rem  
}  
.stackedit__toc ul ul{
	/*color:#888;*/
	font-size:.9rem;
	padding-left:.5rem;  
}  
.stackedit__toc ul ul a{
	margin:0;
	padding:.1rem 1rem  
}  
.stackedit__left{
	width:300px;  
}  
@media (min-width:1060px){
	.stackedit__right{
		left:300px
	}  
} 

Нотації

CSS:

.admonitionblock{
	padding:15px;
	margin-bottom:21px;
	border:1px solid transparent;
	border-radius:4px;  
}  
.admonitionblock .admonitionblock-link{
	font-weight:normal
}  
.admonitionblock>p,.admonitionblock>ul{
	margin-bottom:0
}  
.admonitionblock>p+p{
	margin-top:5px
}  

/* TIP - ПОРАДА */  
.admonitionblock-tip{
	background-color:#dff0d8;
	border-color:#d6e9c6;
	color:#3c763d
}  
.admonitionblock-tip .admonitionblock-link{
	color:#2b542c
}    
/* NOTE - ІНФОРМАЦІЯ */  
.admonitionblock-note{
	background-color:#d9edf7;
	border-color:#bce8f1;
	color:#31708f
}  
.admonitionblock-note .admonitionblock-link{
	color:#245269
}  

/* WARNING - УВАГА */  
.admonitionblock-warning{
	background-color:rgba(255,209,0,0.12);
	border-color:rgba(255,209,0,0.24);
	color:#b89600
}  
.admonitionblock-warning .admonitionblock-link{
	color:#856d00
}
  
/* CAUTION - НЕБЕЗПЕКА */  
.admonitionblock-caution{
	background-color:rgba(239,104,53,0.12);
	border-color:rgba(191,52,0,0.15);
	color:#bf3400
}  
.admonitionblock-caution .admonitionblock-link{
	color:#962a01
}  

/* IMPORTANT - ВАЖЛИВО */  
.admonitionblock-important{
	background-color:rgba(232,76,61,0.1);
	border-color:rgba(232,76,61,0.15);
	color:#d82a1a
}  
.admonitionblock-important .admonitionblock-link{
	color:#ab2114
}  

HTML:

<div class="admonitionblock admonitionblock-note"><i class="fas fa-info-circle"></i> <strong>Інформація:</strong> Використовуйте цю нотацію для повідомлення якої-небудь інформації. В нотації можна використовувати <a class="admonitionblock-link" href="#" target="_blank" title="Інформація">стилізовані посилання</a>.</div>
<div class="admonitionblock admonitionblock-tip"><i class="fas fa-lightbulb"></i> <strong>Порада:</strong> Використовуйте цю нотацію для поради. В нотації можна використовувати <a class="admonitionblock-link" href="#" target="_blank" title="Порада">стилізовані посилання</a>.</div>
<div class="admonitionblock admonitionblock-warning"><i class="fas fa-exclamation-triangle"></i> <strong>Увага:</strong> Використовуйте цю нотацію для привертання уваги. В нотації можна використовувати <a class="admonitionblock-link" href="#" target="_blank" title="Увага">стилізовані посилання</a>.</div>
<div class="admonitionblock admonitionblock-caution"><i class="fas fa-fire"></i> <strong>Небезпека:</strong> Використовуйте цю нотацію, коли певні дії можуть стати причиною небезпеки. В нотації можна використовувати <a class="admonitionblock-link" href="#" target="_blank" title="Небезпека">стилізовані посилання</a>.</div>
<div class="admonitionblock admonitionblock-important"><i class="fas fa-exclamation-circle"></i> <strong>Важливо:</strong> Використовуйте цю нотацію, коли необхідно вказати на важливі моменти. В нотації можна використовувати <a class="admonitionblock-link" href="#" target="_blank" title="Важливо">стилізовані посилання</a>.</div>

Результат:

Вбудовування відео з YouTube

CSS:

.responsive-video {
	overflow:hidden;
	position:relative;
	width:100%
}  
.responsive-video::after {
	padding-top:56.25%;
	display:block;
	content:''
}  
.responsive-video iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}    

HTML:

<div class="responsive-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/wgbV6DLVezo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Результат:

Вбудовування Google Документів (на прикладі Google Slides)

CSS:

.google-doc-container{
	position:relative;
	width:100%;
	padding-top:77.99999%;
	overflow:hidden
}  
.google-doc-container iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
} 

HTML:

<div class="google-doc-container"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSvjKvVv-TdYSWg9ea4EBGYTV8epBku3uwjq8wAoZyQz1GHItflyAqpmJU5zSpNIaIEdiKohb7bVVZc/embed?start=false&loop=false&delayms=3000" frameborder="0" width="480" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>

Результат:

Шаблон для створення стилізованої вебсторінки зі змістом повністю

<!DOCTYPE html>  
<html lang="uk">  
  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>{{files.0.name}}</title>  
<link rel="icon" type="image/svg+xml" href="https://image.flaticon.com/icons/svg/2038/2038433.svg">
<link rel="stylesheet" href="https://stackedit.io/style.css" />  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" />  
<style>  
/* TOC styles */  
.stackedit__toc ul{  
	padding:0  
}  
.stackedit__toc ul a{  
	margin:.3rem 0;  
	padding:.3rem 1rem  
}  
.stackedit__toc ul ul{  
	/*color:#888; колір для назви розділів */  
	font-size:.9rem;  
	padding-left:.5rem;  
}  
.stackedit__toc ul ul a{  
	margin:0;  
	padding:.1rem 1rem  
}  
.stackedit__left{  
	width:300px;  
}  
@media (min-width:1060px){  
.stackedit__right{  
	    left:300px  
	}  
}  
  
/* Font Awesome icons styles */  
  
.fontawesome-icon {  
	text-shadow: 1px 1px 1px #ccc;  
	font-size: 1.5em;  
}  
.fa-laptop-code,  
.fa-puzzle-piece,  
.fa-github-alt{  
	color:#3C787E;  
	font-size: 1.5em  
}  
.fa-markdown, .fa-user-edit,  
.fa-envelope {  
	color:#1eb2a6;  
}  
  
/* Admonition block style */  
.admonitionblock{  
	padding:15px;  
	margin-bottom:21px;  
	border:1px solid transparent;  
	border-radius:4px;  
}  
.admonitionblock .admonitionblock-link{  
	font-weight:normal  
}  
.admonitionblock>p,.admonitionblock>ul{  
	margin-bottom:0  
}  
.admonitionblock>p+p{  
	margin-top:5px  
}  
  
/* Admonition style labels */  
  
/* TIP - Порада */  
.admonitionblock-tip{  
	background-color:#dff0d8;  
	border-color:#d6e9c6;  	
	color:#3c763d  
}  
.admonitionblock-tip .admonitionblock-link{  
	color:#2b542c  
}  
  
/* NOTE - Інформація */  
.admonitionblock-note{  
	background-color:#d9edf7;  
	border-color:#bce8f1;  
	color:#31708f  
}  
.admonitionblock-note .admonitionblock-link{  
	color:#245269  
}  
  
/* WARNING - Увага */  
.admonitionblock-warning{  
	background-color:rgba(255,209,0,0.12);  
	border-color:rgba(255,209,0,0.24);  
	color:#b89600  
}  
.admonitionblock-warning .admonitionblock-link{  
	color:#856d00  
}  
  
/* CAUTION - Обережно */  
.admonitionblock-caution{  
	background-color:rgba(239,104,53,0.12);  
	border-color:rgba(191,52,0,0.15);  
	color:#bf3400  
}  
.admonitionblock-caution .admonitionblock-link{  
	color:#962a01  
}  
  
/* IMPORTANT - Важливо */  
.admonitionblock-important{  
	background-color:rgba(232,76,61,0.1);  
	border-color:rgba(232,76,61,0.15);  
	color:#d82a1a  
}  
.admonitionblock-important .admonitionblock-link{  
	color:#ab2114  
}  
  
/* YouTube responsive styles */  
.responsive-video {  
	overflow: hidden;  
	position: relative;  
	width:100%  
}  
.responsive-video::after {  
	padding-top: 56.25%;  
	display: block;  
	content: ''  
}  
.responsive-video iframe {  
	position: absolute;  
	top: 0;  
	left: 0;  
	width: 100%;  
	height: 100%  
}  
  
/* Google Docs (Slides) responsive styles */  
.google-doc-container{  
	position: relative;  
	width: 100%;  
	padding-top: 77.99999%;  
	overflow: hidden  
}  
.google-doc-container iframe{  
	position: absolute;  
	top: 0;  
	left: 0;  
	width: 100%;  
	height: 100%  
}  
</style>  
</head>  
  
{{#if pdf}}  
<body class="stackedit stackedit--pdf">  
{{else}}  
<body class="stackedit">  
{{/if}}  
<div class="stackedit__left">  
<div class="stackedit__toc">  
{{#tocToHtml files.0.content.toc 6}}{{/tocToHtml}}  
</div>  
</div>  
<div class="stackedit__right">  
<div class="stackedit__html">  
{{{files.0.content.html}}}  
</div>  
</div>  
</body>  
</html>

Корисні ресурси

1. Редактор StackEdit
2. Підручник з Markdown онлайн
3. Документація Markdown
4. Чудовий довідник з Markdown
5. Програми та компоненти, що підтримують Markdown
6. Список інструментів Markdown та навчальних ресурсів
7. Remark - інструмент для створення презентацій з Markdown
8. Cloudinary - хмарний сервіс для управління зображеннями та відео

---

1. MD - легка мова розмітки. ↩︎

2. HTML - мова розмітки гіпертексту. ↩︎ ↩︎

3. CSS - спеціальна мова стилю сторінок, що використовується для опису їх зовнішнього вигляду. ↩︎

4. JS - скриптова мова. ↩︎

5. URL - стандартизована адреса певного ресурсу. ↩︎