Несложный язык разметки Markdown, как его использовать, и чем он может быть полезен при публикациях в Git-репозиториях, работе с документациями и при составлении сайтов.
*https://www.youtube.com/watch?v=jPKi2Addbxw
**https://300.ya.ru/summary
пересказ видео
Вступление
- Приветствие и представление автора
- Объяснение темы видео: Markdown
Что такое Markdown
- Простой язык разметки с ограниченными возможностями
- Активно используется в Git репозиториях, документации и статических сайтах
Редакторы для Markdown
- Специализированные редакторы, такие как Typora
- Поддержка в редакторах кода, таких как WebStorm и VS Code
Комментарии
- Комментарии в формате Steam или комментариев
Заголовки
- Заголовки от 1 до 6 уровней, обозначаемые хэштегами
- Автоматическое формирование якорных ссылок
Выделения
- Курсив: одно нижнее подчеркивание или одна звездочка
- Жирный шрифт: два нижних подчеркивания или две звездочки
- Зачеркивание: два символа тильды
Списки
- Маркированные списки: символ звездочки
- Нумерованные списки: число перед элементом
Ссылки
- Текст ссылки и адрес в квадратных скобках
Оформление кода
- Однострочный код: обратные кавычки
- Многострочный код: три обратные кавычки, поддержка подсветки синтаксиса
Картинки
- Включение картинок в Markdown
Добавление картинок
- Картинки добавляются с помощью ссылки и альт текста в квадратных скобках.
- Перед квадратными скобками ставится знак ! для обозначения картинки.
Цитаты
- Цитаты добавляются с помощью кавычек.
- Цитаты могут быть оформлены в несколько строк.
Горизонтальные разделители
- Разделители создаются с помощью трех звездочек, символов тире или подчеркивания.
- Количество символов не влияет на внешний вид разделителя.
Таблицы
- Таблицы можно создавать напрямую через Markdown, но это неудобно.
- Рекомендуется использовать сторонние ресурсы для генерации кода таблиц.
Список дел
- Список дел создается с помощью звездочки и квадратных скобок.
- Внутри скобок можно указать статус задачи (выполнена или нет).
Видео из Youtube
- Видео добавляются с помощью ссылки на видео и картинки в квадратных скобках.
- Видео не проигрывается в Markdown, а ведет на страницу Youtube.
Обзор результатов на Github
- Результаты отображаются так же, как в редакторе Markdown.
- Горизонтальные разделители, таблицы и списки дел выглядят по-другому.
Шпаргалка по синтаксису Markdown
- Шпаргалка доступна на Github.
- В шпаргалке есть примеры использования различных элементов Markdown.
Заключение
- Markdown полезен для публикации в git репозиториях, написания документации и создания сайтов со статической генерацией.
- Автор благодарит за обратную связь и приглашает на следующие видео.
В этом видео
Эпизоды
Расшифровка видео
Вступление. Что такое Markdown?
0:00
всем привет и добро пожаловать на мой
0:02
youtube канал мне зовут михаил не
0:03
помнящий в этом видео мы будем говорить
0:05
про такую штуку как markdown
0:07
разберемся что это такое и как с этим
0:09
можно работать вообще для чего оно нужно
0:11
данном случае это просто стартовой
0:13
страницей happy dino markdown чего же
0:16
она может пригодиться вообще-то язык
0:19
разметки достаточно простой и в отличие
0:21
от emilio у него достаточно ограниченные
0:25
возможности но при этом он активно
0:27
используется для самых разных вещей
0:29
например
0:29
а самые популярные из них это работа с
0:32
репозиториями в различных git
0:36
репозиториев мы собственно мы будем
0:37
сегодня смотреть как он отображается
0:40
именно на примере гитхаба хоть и слабее
0:42
и прочих сервисах где мы можем
0:45
столкнуться с китом омар да он
0:47
используется очень активно кроме того
0:49
различные истории связанные с
0:51
документация my также часто поддерживают
0:53
этот инструмент
0:54
ну и кроме того он на современный подход
0:57
по и созданием статических сайтов
0:59
например таких как детки тоже часто
1:02
используют марк town для генерирования
1:04
как раз в тех самых страничек
1:08
ну и в чем мы будем писать на самом деле
Редакторы для Markdown
1:11
есть специализированные
1:13
а специализированные так называемые
1:16
редакторы которые позволяют печатать
1:18
markdown например один из них называется
1:20
той поры с на той поры .
1:24
а я при желании его можно поставить
1:26
исключительно для того чтобы писать
1:28
markdown а если есть такое желание это
1:30
будет красиво и удобно
1:32
другие редакторы как бы то ни было в
1:36
данном случае мы можем писать мардан но
1:38
и в редакторе кода непосредственно в том
1:42
который мы привыкли например такие
1:44
инструменты как веб шторм пить и storm в
1:47
них есть встроенная поддержка markdown а
1:49
в том плане что вам они показывают сразу
1:51
что мы будем писать я сегодня буду
1:54
использовать весь код и для весь кода у
1:57
меня есть расширение специально для
1:59
markdown а она называется of the open or
2:03
down превью ответственно каждый раз
2:05
подойдут работать мардан файлом мне
2:07
отдельно откроется рядышком некая превью
2:09
который будет показывать что я там пишу
2:12
если вы также будете использовать весь
2:15
код то просто поставьте вот для удобства
2:17
работы понимания того с чем мы работаем
2:20
и так давайте начнем я создам августа
2:25
репозитории собственно говоря он будет
2:26
то больше для демонстрации что
2:28
действительно markdown работает каких то
2:30
возможно его обидчик марк down дыма и
2:41
добавим красники readme file
2:43
обычно они как раз и нас ридми файл и
2:46
как раз в формате
2:48
markdown есть они как правило вот так
2:50
вот здесь отображается при чем у нас
2:53
здесь сразу есть некий за голову которые
2:55
дублируют а название моего репозитории
2:57
обратите внимание что здесь есть
2:58
ссылочка то есть заголовки на сразу
3:01
будут формироваться с якорными ссылками
3:03
которые можно копировать и давать людям
3:06
именно в таком формате что тоже
3:08
достаточно удобно
3:12
я спланирует репозиторий себе на
3:15
компьютер и
3:25
из них папок не было зайду сразу нужны
3:28
мне попку да вот мой ридми файл его
3:36
открываю у меня сразу у preview
3:39
как только файл и открываю у меня
3:41
появляется некое превью где я вижу
3:43
только я ожидаю что этот мардан будет
3:46
выглядеть давайте пойдем по порядочку с
3:49
чем мы здесь имеем делом тут оставлять
3:53
здесь комментарием если нам нужны
Комментарии
4:01
комментарий то здесь в формате steam или
4:03
комментариев нам вполне подойдет
4:06
ответственно в данном случае здесь меня
4:09
будут заголовки и заголовок 1 уровня для
Заголовки
4:12
него
4:13
у нас уже в принципе все есть это некий
4:17
hiding в данном случае сам заголовок
4:21
неважно какие пишу нам важно что просто
4:22
решетка если нам нужен заголовок второго
4:25
уровня то запомнить легко две решетки и
4:30
давайте всю эту историю просто я
4:32
продублирую несколько раз я подписан на
4:34
3 решетки
4:35
заголовок третьего уровня заголовок 4
4:38
заголовок 5 насвистим и всего за головку
4:41
в 6 уровней соответственно здесь просто
4:44
по количеству хэштегов markdown
4:47
автоматически будет понимать все такой
4:49
заголовок нам требуется есть любой
4:52
заголовок будет автоматически
4:53
сопровождаться
4:54
для нас якорные ссылки что как бонус для
4:58
нас очень даже неплохо следующий момент
Выделения. Курсив, жирный шрифт и зачеркивание
5:01
это различного рода выделения
5:04
обоим еще 1 комментарий
5:06
соответственно выделения и для выделений
5:10
у нас может быть какой-то курсив для
5:13
курсива мы используем одно нижнее
5:15
подчеркивание слабо
5:17
одно нижнее подчёркивание допустим и
5:21
толики напишу
5:22
и нижнее подчеркивание причем даже в
5:24
редакторе сам редактор уже значит должен
5:26
быть и толик и визуально здесь я тоже
5:28
вижу что это у меня
5:30
некое выделение при этом выделять слова
5:33
мы можем не только через нижнее
5:35
подчеркивание
5:36
у нас могло бы
5:37
много слов втором случае главное чтобы
5:39
самом выражение начиналось с одного
5:41
нижнего подчеркни заканчивалась им
5:43
логичным образом мы можем использовать
5:46
просто одну звездочку и также какой-то
5:49
набор символов в внутри
5:51
должа это сущность у нас будет
5:53
превращаться в курсе все что касается
5:58
выделение жирным это по сути все тоже
6:00
самое только с удвоением соответственно
6:05
болдер worlds начинается соответственно
6:13
с двух нижних подчёркивание и либо 2
6:16
звездочек и заканчивается опять же двумя
6:24
нижними подчеркивание
6:25
ибо двумя звездочками а при этом мы
6:29
видим что у нас нет разделения по
6:31
строчкам а если мы его кучно не добавим
6:34
до одно разделение как будто бы у нас
6:37
нет переноса а соответственно здесь
6:40
визуально мы должны добавить чтобы она
6:42
нас добавилась и непосредственно вызова
6:45
не на его выходе
6:49
есть также возможность сделать
6:52
перечёркивая текст на английском если
6:59
для этого мы используем два символа
7:01
тильды как старт потом идет набор слов и
7:04
два символа синдикат окончания это тоже
7:08
касается выделением вот такие три штуки
Списки. Маркированные и нумерованные
7:10
дальше у нас идут списке истина списке
7:16
списке нас могут быть маркированы могут
7:19
быть соответственно нумерованный для
7:21
маркированных списков мы ставим символ
7:24
звездочка и какой-то набор элементов
7:28
который нам требуются следующая
7:30
звездочка набор элементов
7:31
ну соответственно текста по списку
7:33
который мы хотим если нам нужно на
7:36
какой-то как это вложенность то мы
7:38
делаем здесь чисто визуально ступа в
7:40
нашем файле
7:42
допустимой там 2.1 звездочка альтам 2.2
7:48
не у нас в
7:50
это будем выгляди так же будет
7:52
соблюдаться некая вложенность
7:54
то что касается нумерованных списков то
7:56
мы простоим число причем здесь опять же
7:59
мы можем везде писать просто единичку
8:01
а у нас в итогам выводим все будет
8:04
достаточно корректно выводиться а если
8:07
мы будем здесь использовать цифры
8:09
то опять же все будет корректно если я
8:12
поставлю 5 на выводе это меня никак не
8:13
повлияет главное что здесь будет стоять
8:15
число на выводе все идет по порядочку
Ссылки
8:21
следующая штука это ссылке ссылка ссылка
8:29
предполагает что у нас есть некий текст
8:31
и сама ссылка ответственности ссылка с
8:36
кабачков а здесь у нас просто текст
8:38
ссылки
8:40
допустим это условно ул а здесь у нас
8:43
адрес куда мы хотим перейти истина и вот
8:50
так вот это будет выглядеть мы сможем на
8:52
эту историю кликнуть ссылку делать
8:55
достаточно просто один из наиболее
8:58
популярных вариант опять же слов может
9:00
быть любое количество просто внутри
9:02
квадратных скобочках
9:07
следующая штучка это то что называется
Оформление кода
9:11
оформление входа отдых в некоторых
9:16
случаях нам нужно будет просто одно
9:17
слово допустим я опишу
9:21
и хочу выделить команду нам слово
9:28
команда хочу выделить для этого мне
9:29
нужно поставить в начале в конце по
9:31
одному символу такого кассового
9:34
коса кавычки и опять же историю меня
9:37
будет определенным образом выделяться в
9:41
во многих ситуациях но по-моему не везде
9:45
по умолчанию поддерживаться также
9:47
многострочный порт многострочный код
9:49
оформляется как три косы кавычки начала
9:53
три косаря кавычки конец ее посередине
9:55
какой-то блок кода мы видим что уже даже
9:57
выделился какой-то набор
9:59
коды с которым можно работать и здесь я
10:02
допустим могу написать что-нибудь in pm
10:05
install пустим в при арт вот и в
10:08
зависимости того что я здесь напишу я
10:10
могу захотеть разного рода оформления то
10:12
есть но если это такая простая история
10:14
как просто капельку м команды и могу
10:16
оставить без уточнениях это допустимо ли
10:18
на сайте что это длинный баш команды а
10:21
если мне более важно то что касается
10:26
оформление я хочу подсветку синтаксиса
10:28
я могу написать здесь с каким языком я
10:31
работаю если допустим я хочу сделать
10:33
некий импорт промт create ответственно у
10:39
меня уже и в моем редакторе кода я вижу
10:42
как корректную подсветку и то что увидит
10:49
в конечном итоге пользователь тоже
10:51
достаточно аккуратно оформлена давать
10:53
например сделаем еще допустим css здесь
10:57
у нас какого-нибудь глаз допустим и др и
11:01
мы этому пидору
11:04
сдаем допустим какой нибудь морджим 1 м
11:11
очень узлов и опять же оформлена
11:15
достаточно аккуратно access с это же
11:20
касается блоков кода целом свой язык
11:24
достаточно аккуратненько можно выделить
11:27
с точки зрения документации пять
11:31
подсказок которые мы оставляем к своим
11:33
каким-то проектом на а детей это очень
11:35
бывает полезно хотя бы какую-то описку
11:39
описать того что мы сделали на следующая
Картинки
11:43
штука id картинки картинки нам нужна
11:49
какая-нибудь картиночку дать им
11:52
нем какую-нибудь картинку картинку ну
11:56
допустим вот эту вот по этой картинке
12:00
есть адрес моего скопируем этот адрес
12:03
картинка как мы знаем по обычному ешьте
12:06
мы лю-у картинки как правило есть то что
12:09
называется аль текстом этот аль текст мы
12:11
пишем в квадратных скобках потом
12:13
указываем ссылку на саму картинку
12:15
соответственно но до квадратных скобках
12:18
скобок нам нужно поставить ! просто хотя
12:21
бы потому что мы должны как-то отличать
12:25
ссылки в картина куда то есть у нас об
12:28
обычная история мы смотрели это просто
12:31
ссылка на допустим здесь и напишем
12:33
программу это просто ссылка чтобы это
12:36
было именно картинкой я добавляю знак !
12:40
я получаю ту картинку в оригинальном ее
12:42
размере следующий нюанс это цитаты мы
Цитаты
12:45
можем добавлять
12:46
цитаты нашему коду цитаты знаю зачем это
12:52
вот так вот сходу мне бы пригодилась но
12:54
почему бы нет какая-то цитатам я-то тебя
13:00
то мы видим что вот оно таким вот
13:03
образом оформлено добавить еще как
13:06
какой-то набор еще какой-то текст в
13:13
данном случае он оформляется прямо там
13:14
же но в данном случае мы уже видели в
13:16
чем то происходит а если нам нужно
13:18
перенос мы делаем его
13:20
ну либо просто выпишем в одну строчку
13:23
достаточно длинный комментарии чтобы
13:25
потом разносился на разные строчки уже
13:28
автоматически по необходимости и ацетат
13:32
и дальше если вдруг нам для нашего
Горизонтальные разделители
13:36
оформления требуются какие-то разрывы
13:38
страниц и визуальные раскрываю танец и
13:42
горизонталь призван тальные про
13:49
жители разделители то здесь для нас все
13:54
достаточно просто мы используем либо три
13:57
звездочки и получаем вот такой вот
13:59
разделители
14:00
либо мы используем три символа кира либо
14:04
мы используем три символа нижнем
14:05
подчеркивании
14:06
на самом деле три больше можем
14:07
использовать сколько угодно
14:09
она никак не изменится в любом случае мы
14:12
получим вот мне бы такое визуальное
14:14
визуально историю с способами также мы
Таблицы
14:19
можем работать с таблицами опять же если
14:21
у нас есть там какой то и пиа и мы хотим
14:23
какие . тащи меня сделать то мы можем
14:26
работать с таблицами но с таблицами
14:28
работать вот именно напрямую через
14:29
марданом бывает не очень удобно поэтому
14:32
для того чтобы жизнь стала чтобы
14:35
приятнее мы можем воспользоваться
14:37
сторонним сторонним ресурсам для этих
14:41
целей ссылочку я добавлю в описании
14:46
ответственно ты был ты был с джинни
14:48
рейтер и генератор для таблиц
14:51
соответственно мы заполняем некую
14:52
табличку и потом получаем код вот в
14:55
таком формате который нам остается
14:57
поэтому просто ставить в наш мир годам
14:59
истина здесь я просто забавой добавляя
15:03
какую-нибудь какие-нибудь данные
15:06
допустим не type дефолт вылью и
15:18
какой-нибудь дискрипшн
15:20
без причин и здесь допустим again
15:29
тип string по умолчанию
15:35
по умолчанию нет у нас молчание пустая
15:37
строка ну и здесь какой-нибудь описание
15:40
опционально да и допустим паспорт
15:43
паспорт тоже строка здесь тоже — пустая
15:49
строка исключено никакого не будет
15:52
нажимаем generate
15:55
мы можем здесь какие-то нам проставить
15:58
галочки в зависимость того на хотим мы
16:00
их или нет но почитать не одну мне
16:02
сложно можем добавить определенного рода
16:04
выравнивания допустим выровнять выделить
16:06
ячейку и сделать выравнивание в рамках
16:08
ячейки если нам это нужно либо вот так
16:10
допустим так тоже можно ответственно
16:15
делаем день рейд получаем вот такую
16:17
историю
16:18
а нам остается только скопировать вот
16:21
соответственно если у нас здесь что-то
16:22
лишнее мы можем правой кнопкой кликнуть
16:24
на колонку сказать удали пожалуйста нам
16:27
этого требуется копируем и добавляем
16:31
себе в обход получаем табличку и так вот
16:35
аккуратненько она у нас будет оформлена
16:36
в конечной разметки если вдруг мы здесь
16:39
что-то сломаем то и табличка потом у нас
16:42
поедет кто будет отображаться достаточно
16:44
криво поэтому вот так вот все эти
16:46
пробелы вручную добавлять конечно же не
16:48
удобно потом какой-нибудь более длинный
16:50
на и у нас появится все придется вручную
16:52
генерирует переписывать поэтому вот эти
16:55
генераторы они снимают определенные
16:58
нагрузках нас есть также такая
Список дел
17:02
интересная штука как список дел
17:07
список дел например он может
17:10
использоваться нибудь опишем инструмент
17:13
и вот у нас есть какие-то планы что мы
17:16
хотим сделать и мы можем пометить что
17:18
уже сделано и что только будет в белом
17:20
для списка сделал мы используем
17:22
звездочку потом ставим квадратные скобки
17:25
ну и какое то дело это делаете и здесь
17:31
внутри квадратных скобок у нас может
17:33
быть либо пусто а либо мы можем
17:34
поставить здесь все буквы x тест на
17:37
будет отображаться
17:40
но играть еще парочку сделаем один
17:43
сделаем вот таким вот не заполнены вот
17:46
вам тут 3 ну и последняя штука который я
Видео из Youtube
17:50
узнал на самом деле будут буквально
17:52
когда готовился к записи этого видео это
17:55
возможность добавлять к нам наш мир down
17:59
youtube видео посмотрим как это можно
18:02
сделать
18:03
соответственно youtube видео возможно
18:08
даже не получится даже еще не успел
18:10
попробовать соответственно нам нужно
18:12
сделать здесь следующую штуку мы
18:14
добавляем такой типа массивчик а у нас
18:18
видео будет состоять из двух вещей во
18:19
первых это будет картинка мы уже знаем
18:21
картинки добавлять а то есть внутри
18:24
квадратных скобок у нас будет картинка а
18:26
после квадратных скобок у нас будет
18:28
соответственно в такой вот история со
18:31
ссылкой на непосредственно видео давайте
18:34
найдем какую-нибудь видео и попробуем
18:36
дать на него ссылочку на перейдем на
18:39
youtube
18:42
скопируем ссылочкам
18:47
и вставим ссылку ответственно
18:50
мы можем дать нашему нашей будущей
18:54
картинки какой-то альт текст в данном
18:58
случае у нас что-то типа gate с и нам
19:04
нужно соответственно картинка для того
19:06
видео которое мы собираемся использовать
19:08
здесь мы картинку можем из кода вытащить
19:12
вот она картинка у нее здесь есть
19:19
дополнительные get параметры которые нам
19:21
скорее всего не нужны ли бы могли бы
19:24
моих оставить и добавим их тоже был наш
19:27
код просто как сок и вот так у меня
19:31
отображается здесь картинка посредством
19:34
моим превью не знаю вероятно вряд ли
19:37
должно проигрывать видео хотя он
19:38
предлагает не открыть ссылку ну
19:41
собственно говоря мы можем все дела
19:43
публиковать и посмотреть как это в итоге
19:44
будет выглядеть на тем поэтому я говорю
19:48
это я на файлах они создавались раз
19:52
говорю git commit минус а.м.
19:56
ридми комплит и я делаю команда гибку
20:02
чтобы за уши твои изменения на
20:05
непосредственно гид хоп и давайте
Обзор результатов на Github
20:13
na’vi на эту страничку посмотрим как это
20:15
выглядит теперь здесь вот мои заголовки
20:16
каждого заголовка есть соответственно
20:20
якорная ссылочка это якорную ссылочку мы
20:23
можем скопировать кому-то дать это очень
20:25
классно в целом все выглядит примерно
20:30
так же как было в редакторе при этом это
20:33
у нас история с выделением просто в
20:36
рамках одной строке мы видели здесь
20:39
немножко по-другому эта штука
20:40
отображалась вот так вот но здесь была
20:44
просто таким коричневым цветом тесно в
20:47
реальность она выглядит более похоже на
20:49
то что я ожидал различные варианты с
20:52
выделением картинкам цитата
20:56
соответственно горизонтальные отступом
20:59
табличка список дел мы видим что здесь
21:02
он выглядит по-другому здесь больше
21:03
похоже на чек-листы и здесь мы видим
21:05
соответственно youtube видео которое на
21:09
самом деле на прикол не открывается она
21:11
просто ведёт нас на другую страницу на
21:14
непосредственно само видео на ютюбе надо
21:20
это больше похоже на ссылку где всю эту
Шпаргалка по синтаксису Markdown
21:25
историю можно посмотреть я в данном
21:28
случае активно использовал при
21:30
подготовке видео чтобы ничего не забыть
21:31
о страничку на гитхабе который
21:33
называется markdown чик чик и здесь в
21:37
целом все то что мы с вами смотрели
21:38
здесь можно найти собственно говоря
21:42
касаемо а непосредственно youtube это
21:45
как раз последний элемент который здесь
21:47
есть и да я был не очень внимателен из
21:50
написано что мы можем напрямую вставить
21:52
ссылку и точнее вставить само видео на
21:56
youtube но мы можем добавить картинку со
21:58
ссылкой на youtube и здесь есть пример
22:00
как это сделать со штемпелем тюмень
22:02
разметка мы тоже можем использовать я не
22:04
показывал пример но такая возможность
22:07
соответственно имеется и здесь были
22:10
где-то приведенные
22:12
для этого дела примеры скудный найду но
22:17
можно опять же за счет этого
22:20
комментариями не работает сейчас вот
22:22
пример как это нам орда он не выглядит
22:24
то что мы сделали с вами вот такая
Заключение
22:29
история вот такая история если вы что-то
22:32
публикуете git репозиториев если вы
22:36
пишете документации или планируется
22:38
заниматься сайтами со статической
22:40
генерации markdown вам наверняка
22:42
окажется полезен и если было полезно
22:44
видео то буду рад обратной связи лайком
22:48
и так далее напомню что меня зовут
22:50
михаил не помнящий до встречи в
22:52
следующих видео всем пока