Макдаун что это
Перейти к содержимому

Макдаун что это

Markdown разметка

Markdown — это простой язык разметки, используемый для создания форматированного текста (например, HTML) с помощью текстового редактора. Он позволяет добавлять к тексту базовое форматирование, используя символы, известные и доступные на всех клавиатурах. Размер шрифта, цвет и другие расширенные параметры недоступны в Markdown.

В Vivaldi вы можете использовать Markdown для форматирования своих Заметок или публикации на Форуме Vivaldi.

Использование Markdown

Чтобы использовать Markdown, сначала ознакомьтесь с синтаксисом в CommonMark, а затем попробуйте его в Заметках или на Форуме Vivaldi.

Некоторые примеры Markdown:

Столбец 1 Столбец 2 Столбец 3
Слева По центру Справа

Заголовок 1

Заголовок 2

Заголовок 3

* Пункт 1
* Пункт 2
* Пункт 3

1. Пункт 1
2. Пункт 2
3. Пункт 3

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3

< !DOCTYPE html >
< html >
< body > < h1 >My First Heading < /h1 >
< p >My first paragraph. < /p > < /body >
< /html >

> Lorem ipsum dolor sit amet, conctetur adipiscing elit. Integer eget porta sapien, eget pellentesque sapien. Duis in aliquam elit. Mauris lacinia magna quis nibh commodo, sed elementum quam elementum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget porta sapien, eget pellentesque sapien. Duis in aliquam elit. Mauris lacinia magna quis nibh commodo, sed elementum quam elementum.

Язык разметки Markdown

Зачем нужен ещё один язык разметки и как на нём писать.

Время чтения: 13 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

  • Сергей Кириенко ,
  • Светлана Коробцева

Обновлено 25 июня 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Markdown — удобочитаемый язык разметки, который прозрачно конвертируется в HTML. Его можно открывать и изменять в любом редакторе текста. Широко используется для написания документаций и README-файлов.

Все статьи Доки написаны на Markdown. Разметку этой страницы можно найти в репозитории контента Доки.

Пример

Скопировать ссылку «Пример» Скопировано

Вы можете встретить Markdown в .md или .markdown файлах. Давайте посмотрим на пример одного из таких:

 # Дока Дока — это **добрая** энциклопедия для веб-разработчиков.Вы можете [открыть её](https://doka.guide) в своём браузере. ## Преимущества - Понятный материал;- Нескучные объяснения;- Удобный поиск. # Дока Дока — это **добрая** энциклопедия для веб-разработчиков. Вы можете [открыть её](https://doka.guide) в своём браузере. ## Преимущества - Понятный материал; - Нескучные объяснения; - Удобный поиск.

Он содержит базовые элементы, которые можно найти почти в любом README . md :

  • заголовок первого уровня для названия;
  • выделение жирным шрифтом важных частей в описании;
  • ссылка с понятным текстом;
  • заголовок второго уровня для подпунктов;
  • маркированный список для перечисления преимуществ.

Несмотря на то, что Markdown достаточно удобно читать в исходном виде, его часто переводят в HTML. Результат конвертации находится ниже.

Цитаты

Скопировать ссылку «Цитаты» Скопировано

Если в начале строки поставить треугольную скобку ( > ), то Markdown превратит текст после неё в цитату. Внутри могут быть любые блоки: параграфы, заголовки или даже другие цитаты.

 > Одна треугольная скобкапревращает в цитату несколько строк,идущих друг за другом. > Одна треугольная скобка превращает в цитату несколько строк, идущих друг за другом.     
 > # Цитаты великих людей> Ваша работа заполнит большую часть жизни и единственный способ быть> полностью довольным — делать то, что по-вашему является великим делом.> И единственный способ делать великие дела — любить то, что вы делаете.>> *— Стив Джобс, Речь в Стенфорде* > # Цитаты великих людей > Ваша работа заполнит большую часть жизни и единственный способ быть > полностью довольным — делать то, что по-вашему является великим делом. > И единственный способ делать великие дела — любить то, что вы делаете. > > *— Стив Джобс, Речь в Стенфорде*      
 > Первая, родительская цитата> > А это уже вторая,\> > дочерняя цитата > Первая, родительская цитата > > А это уже вторая,\ > > дочерняя цитата

Исходный код

Скопировать ссылку «Исходный код» Скопировано

Markdown позволяет специальным образом размечать исходный код, все символы внутри будут автоматически экранированы. Есть 3 способа, как это можно сделать:

  • Обернуть код одной-двумя парами бэктиков ( `код` )
  • Обернуть код тремя и более парами бэктиков ( «`код«` )
  • Поставить таб или 4 пробела перед каждой строчкой кода
Одна-две пары бэктиков

Скопировать ссылку «Одна-две пары бэктиков» Скопировано

Этот способ позволяет вставлять исходный код как строчный элемент. Даже если фактически у нас будет несколько строчек кода, обёрнутых бэктиками, мы всё равно получим одну строку после конвертации в HTML.

 Функция `alert()`вызывает диалоговое окно. Сумму двух переменныхможно вывести так:``const a = 1const b = 2alert(a + b)`` Функция `alert()` вызывает диалоговое окно. Сумму двух переменных можно вывести так: ``const a = 1 const b = 2 alert(a + b)``
Три и более пары бэктиков

Скопировать ссылку «Три и более пары бэктиков» Скопировано

Если обернуть одну строчку кода тремя или более парами бэктиков, то мы получим строчный элемент, а если несколько строчек, то — блочный. Второй вариант позволяет указывать язык программирования, который мы используем, для этого нужно написать его сразу после открывающих бэктиков.

После обозначения языка программирования визуально ничего не изменится, но это даст возможность дополнительным плагинам и скриптам подсветить код внутри блока.

 Функция ```console.log()```выводит текст в консоль. Сумму двух переменныхможно вывести так:```javascriptconst a = 1const b = 2 console.log(a + b)``` Функция ```console.log()``` выводит текст в консоль. Сумму двух переменных можно вывести так: ```javascript const a = 1 const b = 2 console.log(a + b) ```
Отступ

Скопировать ссылку «Отступ» Скопировано

Другой способ выделить код — поставить перед ним таб или 4 пробела. Исходный код необходимо отделять пустой строкой от предыдущего блока.

 Метод ```.toString()```превращает числа в строку. Его можно использовать так: const a = 1 const b = 2 (a + b).toString() Метод ```.toString()``` превращает числа в строку. Его можно использовать так: const a = 1 const b = 2 (a + b).toString()

Выделение текста

Скопировать ссылку «Выделение текста» Скопировано

Если обернуть текст звёздочками ( * ) или нижними подчёркиваниями ( _ ), то он станет жирным или курсивным. Оба символа работают одинаково, стиль выделения зависит только от их количества:

  • одна пара * или _ сделает текст *курсивным*;
  • две пары * или _ сделают текст **жирным**;
  • три пары * или _ применят ***оба стиля***.
 Обычный текст *Курсивный текст* _Другой курсивный текст_ **Жирный текст** __Другой жирный текст__ ***Оба стиля*** ___Оба стиля___ Обычный текст *Курсивный текст*br> _Другой курсивный текст_ **Жирный текст**br> __Другой жирный текст__ ***Оба стиля***br> ___Оба стиля___br>

Для экранирования служебных символов Markdown нужно поставить обратную косую черту перед каждым из них ( \* , \ _ , \* \ * ).

 **_Оба стиля из \* и \__** __*Оба стиля из \* и \_*__ \*\*Экранирование звёзд\*\* \_\_\_Экранирование подчёркиваний\_\_\_ **_Оба стиля из \* и \__**br> __*Оба стиля из \* и \_*__ \*\*Экранирование звёзд\*\*br> \_\_\_Экранирование подчёркиваний\_\_\_

Ссылки

Скопировать ссылку «Ссылки» Скопировано

Markdown предлагает 3 стиля разметки ссылок: строчный, справочный и автоматический.

Строчные

Скопировать ссылку «Строчные» Скопировано

Для вставки ссылки в строчном стиле необходимо воспользоваться следующей конструкцией: [Текст ссылки ] ​ ( U R L ) . Есть возможность добавить подсказку, для этого нужно после URL дописать текст в кавычках: [Текст ссылки ] ​ ( U R L «Подсказка» ) .

 Привет, [Дока](https://doka.guide "Энциклопедия про web-dev")! Привет, [Дока](https://doka.guide "Энциклопедия про web-dev")!
Справочные

Скопировать ссылку «Справочные» Скопировано

Для вставки ссылки в справочном стиле нужно написать [Текст ссылки ] ​ [ Ключ ] в том месте, где вы хотите её поместить, а где-нибудь выше или ниже добавить сноску [Ключ ] : U R L «Подсказка» .

 У [Доки][1] есть свой [репозиторий][repo]. [1]: https://doka.guide "Энциклопедия про web-dev"[repo]: https://github.com/doka-guide "Репозиторий Доки" У [Доки][1] есть свой [репозиторий][repo]. [1]: https://doka.guide "Энциклопедия про web-dev" [repo]: https://github.com/doka-guide "Репозиторий Доки"
Автоматические

Скопировать ссылку «Автоматические» Скопировано

Markdown позволяет использовать упрощённый вариант для вставки ссылок, для этого нужно просто обернуть URI треугольными скобками ( < U R I>).

Можно вставлять адреса электронной почты ( ), тогда мы автоматически получим ссылку типа mailto : .

 Заходите на или присылайте нам письма на Заходите на или присылайте нам письма на hi@doka.guide>

Изображения

Скопировать ссылку «Изображения» Скопировано

Конструкции для вставки изображений очень похожи на те, что используются для ссылок. Предлагается 2 стиля разметки: строчный и справочный.

Строчные

Скопировать ссылку «Строчные» Скопировано

Для вставки изображения в строчном стиле необходимо воспользоваться конструкцией !⁠ [ Alt текст ] ​ ( U R L картинки ) . При желании можно добавить подсказку: !⁠ [ Alt текст ] ​ ( U R L картинки «Подсказка» ) .

 ![Одна собака](dog.png "Собака смотрит влево") ![Одна собака](dog.png "Собака смотрит влево")
Справочные

Скопировать ссылку «Справочные» Скопировано

Для вставки изображения в справочном стиле нужно написать !⁠ [ Alt текст ] ​ [ Ключ ] в том месте, где вы хотите его поместить, а где-нибудь выше или ниже описать картинку по ключу [Ключ ] : U R L картинки «Подсказка» .

 ![Одна собака][1] [1]: dog.png "Собака смотрит влево" ![Одна собака][1] [1]: dog.png "Собака смотрит влево"

Горизонтальный разделитель

Скопировать ссылку «Горизонтальный разделитель» Скопировано

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

). Чтобы это сделать, необходимо поставить на одной строке три (или более) дефиса ( — ), подчёркивания ( _ ) или звёздочки ( * ). Они не обязательно должны идти друг за другом, между ними могут быть табы или пробелы.

 --- *** _ _ _ * * * * ------------ --- *** _ _ _ * * * * ------------

Стандартизация

Скопировать ссылку «Стандартизация» Скопировано

У Markdown есть оригинальная спецификация от одного из создателей языка — Джона Грубера. К сожалению, она не всегда однозначно описывает синтаксис, из-за чего многие конвертеры Markdown работают по-разному. Чтобы исправить эту ситуацию, группа разработчиков «поклонников Markdown» создала CommonMark — спецификацию, которая описывает многие частные случаи, и эталонную реализацию парсера Markdown на JS.

Диалекты

Скопировать ссылку «Диалекты» Скопировано

Простой Markdown не всегда подходит для тех или иных проектов, поэтому существуют спецификации, которые расширяют или сужают его.

GitHub Flavored Markdown

Скопировать ссылку «GitHub Flavored Markdown» Скопировано

GFM — один из диалектов Markdown, который, как можно догадаться из названия, используется на GitHub. Он основан на спецификации CommonMark и расширяет её дополнительными элементами: таблицами, списками задач и зачёркиваниями.

Таблицы

Скопировать ссылку «Таблицы» Скопировано

Колонки таблицы размечаются с помощью вертикальных черт ( | ), а заголовок отделяется дефисами ( — ).

 | Место | Участник | Рейтинг ||-------|----------|---------|| 1 | Саша | 118 || 2 | Юля | 92 || 3 | Даниил | 36 | | Место | Участник | Рейтинг | |-------|----------|---------| | 1 | Саша | 118 | | 2 | Юля | 92 | | 3 | Даниил | 36 |

Можно поставить двоеточие ( : ) рядом с дефисами для выравнивания текста:

  • по левой стороне ( | : — — — — | )
  • по центру ( | : — — — — : | )
  • по правой стороне ( | — — — — : | )
 | Место | Участник | Рейтинг ||------:|:--------:|:--------|| 1 | Саша | 118 || 2 | Юля | 92 || 3 | Даниил | 36 | | Место | Участник | Рейтинг | |------:|:--------:|:--------| | 1 | Саша | 118 | | 2 | Юля | 92 | | 3 | Даниил | 36 |

Ячейки таблицы могут не соответствовать друг другу по размеру.

 |Место|Участник|Рейтинг||-:|:-:|:-||1|Саша|118||2|Юля|92||3|Даниил|36| |Место|Участник|Рейтинг| |-:|:-:|:-| |1|Саша|118| |2|Юля|92| |3|Даниил|36|
Список задач

Скопировать ссылку «Список задач» Скопировано

Для создания списка задач используется синтаксис маркированного списка, но с добавлением чекбоксов ( [ ] или [x ] ) после маркеров.

 - [x] Выйти на улицу- [x] Зайти в магазин- [ ] Купить продукты - [x] Молоко - [x] Хлеб - [ ] Помидоры- [ ] Вернуться домой - [x] Выйти на улицу - [x] Зайти в магазин - [ ] Купить продукты - [x] Молоко - [x] Хлеб - [ ] Помидоры - [ ] Вернуться домой
Зачёркивание

Скопировать ссылку «Зачёркивание» Скопировано

Если необходимо зачеркнуть текст, то можно поставить по две тильды ( ~ ~ ) в начале и в конце фрагмента.

 ~~Привет, Вова!~~\Здравствуйте, Владимир! ~~Привет, Вова!~~\ Здравствуйте, Владимир!

Stack Exchange Additions

Скопировать ссылку «Stack Exchange Additions» Скопировано

Популярный среди разработчиков сайт Stack Overflow и все остальные сайты, входящие в группу Stack Exchange, используют в редакторе вопросов Markdown, основанный на спецификации CommonMark. Он расширен следующим образом:

Теги

Скопировать ссылку «Теги» Скопировано

Ссылка на вопросы по определённому тегу пишется просто в квадратных скобках с префиксом tag :

 Все вопросы по тегу [tag:javascript] на нашем сайте. Все вопросы по тегу [tag:javascript] на нашем сайте.
Спойлер

Скопировать ссылку «Спойлер» Скопировано

Если после символа цитирования поставить восклицательный знак ( >! ), то цитата выведется свёрнутой, и развернуть её пользователь сможет, кликнув по ней.

 В конце пятого эпизода выясняется, что>! он его отец. В конце пятого эпизода выясняется, что >! он его отец.
Другие отличия

Скопировать ссылку «Другие отличия» Скопировано

Stack Exchange использует тот же синтаксис для создания таблиц, что и GitHub Flavored Markdown, а также некоторые HTML-теги из числа безопасных.

В комментариях к вопросам поддерживается только минимальный набор правил разметки: жирный шрифт, курсив, строчный код в бэктиках и ссылки строчного формата.

Мессенджеры

Скопировать ссылку «Мессенджеры» Скопировано

Многие мессенджеры, например Telegram или Discord, используют упрощённую версию Markdown. Там отсутствует разметка заголовков, списков и цитат, но поддерживается расширенный синтаксис выделения текста: жирный шрифт, курсив, зачёркивания, ссылки, разметка исходного кода.

На практике

Скопировать ссылку «На практике» Скопировано

Саша Беспоясов советует

Скопировать ссылку «Саша Беспоясов советует» Скопировано

Иногда в ссылках встречаются скобки. В такой ссылке может быть трудно определить, где она заканчивается:

 [Ковариантность](https://ru.wikipedia.org/wiki/Ковариантность_и_контравариантность_(математика)) [Ковариантность](https://ru.wikipedia.org/wiki/Ковариантность_и_контравариантность_(математика))

Код выше выведет «Ковариантность)», потому что ссылка закончится на первой закрывающей скобке.

Чтобы таких проблем не возникало, можно обернуть адрес в угловые скобки:

 [Ковариантность]() [Ковариантность]()>)

Так, например, автоматически делает Prettier, когда работает с Markdown-файлами.

Сергей Минаков советует

Скопировать ссылку «Сергей Минаков советует» Скопировано

Не стоит использовать два пробела для жёсткого переноса строк в параграфе, потому что во многих проектах для IDE включена опция trim _ trailing _ whitespace , которая стирает все пробелы, стоящие в конце строки.

Лучше всего использовать тег
, потому что перенос с помощью обратной косой черты ( \ ) может поддерживаться не всеми Markdown-конвертерами, так как её описание есть в CommonMark, но отсутствует в оригинальной спецификации.

Илья Таратухин советует

Скопировать ссылку «Илья Таратухин советует» Скопировано

Markdown не предполагает специального синтаксиса для встраивания видео, но и использование HTML-тегов тоже не запрещает. Есть два основных пути добавить видео в Markdown:

  1. Использовать обложку видео со ссылкой на внешнюю платформу. 100% рабочий и допустимый на сторонних площадках вроде GitHub способ.
 [![Обложка к видео «Дока — как добавить пулреквест со статьёй»](https://i3.ytimg.com/vi/y-_nXfKkI3w/hqdefault.jpg)](https://www.youtube.com/watch?v=y-_nXfKkI3w) [![Обложка к видео «Дока — как добавить пулреквест со статьёй»](https://i3.ytimg.com/vi/y-_nXfKkI3w/hqdefault.jpg)](https://www.youtube.com/watch?v=y-_nXfKkI3w)

Обложка к видео «Дока — как добавить пулреквест со статьёй»

  1. Использовать HTML-разметку и вставить , например тот, что генерирует YouTube в диалоге «поделиться».
  iframe width="560" height="315" src="https://www.youtube.com/embed/y-_nXfKkI3w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>iframe>

Что такое Markdown

Markdown — язык разметки текстов. Такие тексты легко писать и читать. Их можно без труда сконвертировать в HTML. Большинство программистов предпочитают Markdown для написания документации, описаний своих проектов, написания блогов и так далее.

  • Что это значит?
  • Зачем это нужно?
  • Синтаксис Markdown
  • Дополнительно про Markdown

Что это значит?

«Язык разметки» — это просто набор соглашений, правил.

Допустим, что вы общаетесь с другом по СМС. В них нельзя сделать текст жирным или наклонным. Вы договариваетесь с другом: если я пишу *что-то* вот так между звездочками, то считай, что это наклонный текст. А если я пишу **что-то** между двумя звездочками, то считай, что это жирный текст. Вы придумали правила.

Markdown — это набор подобных правил.

Правила понятны разным программам и сайтам. Например, «Вопросы и ответы» в уроках на Хекслете поддерживают Markdown. Это значит, что вы можете писать туда тексты по правилам Markdown, а после нажатия «Отправить» разметка станет реальной: текст в одинарных звездочках станет наклонным, текст в двойных звездочках станет жирным и так далее. Это конвертация из Markdown в HTML.

Зачем это нужно?

  1. Для добавления разметки туда, где невозможна реальная разметка. Например, в простом текстовом файле или в тех же СМС, где невозможно выделение жирным, создание заголовков, выделение цитат и пр.
  2. Для более удобного написания текстов для последующей конвертации в HTML или другие форматы.

Синтаксис Markdown

Это краткий справочник основных элементов синтаксиса Markdown. Единого стандарта не существует и разные версии Markdown могут отличаться в деталях. Но базовые элементы из списка ниже поддерживаются во всех стандартах.

Выделение текста

*Этот текст будет наклонным (курсив)* _Этот текст будет наклонным (курсив)_ **Этот текст будет жирным** __Этот текст будет жирным__ _Можно **вставлять** один тип в другой _

Заголовки

# Это самый крупный заголовок, он превращается в тег ## ### #### ##### ######

Ссылки

https://hexlet.io — текст простой ссылки станет кликабельной ссылкой автоматически

Ссылкой можно сделать любой текст:

[ Это ссылка на Хекслет]( https://hexlet.io)

Цитата

> Это мудрая цитата > Мудрого человека.

Картинки

![ Это опциональный alt-текст]( /assets/images/markdown/markdown.png)

Код

Для выделения кода (или любого неотформатированного текста) используются специальные символы — обратные тики: `

Иногда нужно добавить кусок кода `function(12);` в обычную строчку текста.

А иногда нужно вставить целый блок кода:

```javascript const func = (num) => < if (num >0) < return num - 1; >return num + 1; >; ```

Списки

* Пункт * Еще один пункт * Подпункт * Еще один подпункт 
1. Пункт 1. Еще один пункт 1. Подпункт 1. Еще один подпункт

В пронумерованном списке можно использовать любые числа — это не важно. При конвертации в HTML или другой формат числа станут правильными и последовательными (1, 2, 3 и т.д.).

Дополнительно про Markdown

  1. Markdown в Википедии
  2. 10-минутный интерактивный туториал

Markdown: что это и кому нужно

В вебе есть стандартный язык разметки — HTML. Его понимают браузеры, но человеку читать чистый HTML-код тяжело — мешают теги и обилие служебной информации. Например, наша главная страница в HTML выглядит как-то так:

Markdown: наша главная страница в HTML выглядит как-то так

Чтобы понять, почему так, нужно вспомнить истоки HTML. Когда его только создавали, у него была задача описывать гипертекстовые документы: то есть документы, в которых будет текст и гиперссылки. При этом передаваться он должен был по очень медленным каналам. Первые HTML-страницы были минималистичными: только текст, заголовки, таблицы и редкие ссылки.

Постепенно веб развивался, сайты становились всё сложнее: появлялся дизайн, меню, навигация, картинки, табличная вёрстка. Но всё это по-прежнему выражалось языком простых текстовых документов. В него добавлялись новые теги, он усложнялся, и вот дорос до тех джунглей, в которых нам приходится работать сейчас.

Весь веб, который вы сейчас видите, сделан на «костылях» от простого языка для разметки текста.

Что такое Markdown

Markdown — это язык текстовой разметки документов. Его придумали в 2004 году блогер Джон Грубер и интернет-активист Аарон Шварц, чтобы быстро форматировать статьи. Требования к языку у них были такие:

  1. Чем проще — тем лучше.
  2. Документы с этой разметкой можно перевести в красиво отформатированный вид, как на веб-странице.
  3. Исходный текст материала должен оставаться читаемым даже без преобразования в веб-страницу.

В результате у них получился простой язык, который активно используется до сих пор.

Смысл маркдауна в том, что вы делаете разметку своего документа минимальными усилиями, а уже какой-то другой плагин или программа превращает вашу разметку в итоговый документ — например в HTML. Но можно и не в HTML, а в PDF или что-нибудь ещё. Маркдаун — это как бы язык для других программ, чтобы они формировали документы на основе вашего текста.

Единственное, что вам может понадобиться, — настроить в этом плагине шрифты, отступы и цвета, чтобы результат выглядел красиво. Один раз настраиваете, а потом быстро пишете много материалов, которые на выходе превратятся в готовые статьи с хорошей разметкой.

Наша статья про дизайн и код в Markdown-редакторе Typora. Выглядит неплохо Исходный код статьи

Синтаксис

Для оформления заголовков используют решётку. Одна решётка — заголовок первого уровня, две — заголовок второго уровня, и так до пятого. Посмотрите на скриншотах выше, как это работает.

## Это будет заголовком второго уровня (как Синтаксис в этом разделе)

Чтобы выделить слово или абзац, используют одну звёздочку в начале и в конце:

*вот так* → вот так

Если нужно выделить сильнее, берут две звёздочки:

**выделяем текст сильнее** → выделяем текст сильнее

Зачёркивают двумя тильдами:

~~зачеркнули и всё~~ → зачеркнули и всё

Для оформления кода используют обратный апостроф: `.

`Пример кода` → Пример кода

Если нужно оформить много строк кода, тогда перед каждой из них ставят 4 пробела или один таб. Ещё можно взять такой блок в три обратных апострофа подряд — в начале и конце кода:

Чтобы сделать ненумерованный список, каждый элемент начинают с символов * , — или + .

Нумерованные списки делаются из цифры с точкой, причём цифры могут быть любыми и идти не по порядку. Смотрите:

1. Один
3. Три
10. Десять

Ссылка состоит из текста ссылки и адреса. Текст пишется в квадратных скобках, а адрес — в круглых. То, что в кавычках, можно не писать и оставить в скобках только адрес:

[Текст ссылки](https://thecode.media/ «Необязательный заголовок ссылки»)

Картинки вставляются точно так же, только добавляется восклицательный знак в самом начале:

![Alt-текст изображения](https://thecode.media/image.jpg «Необязательный заголовок изображения»)

Как работает эта магия

Если мы просто напишем текст и разметим его с помощью Markdown, то он так и останется текстом с разными спецсимволами. Чтобы результат выглядел как на скриншоте выше, используют специальные редакторы, плагины или программы, которые поддерживают этот язык разметки.

Работает это так:

  1. Программа берёт текст и смотрит, есть ли в нём эта разметка.
  2. Если есть — применяет нужное правило оформления к нужному фрагменту текста и выводит его красиво. Если нужно — подставит картинку, сделает ссылку и сама оформит список.
  3. Если разметки нет — выводит содержимое просто как текст.

Такое работает не в каждом редакторе — если в Word выделить текст звёздочками, то это так и останется текстом со звёздочками, без курсива или жирного оформления. Но почти все редакторы понимают, когда в них вставляют текст, размеченный маркдауном. Они тогда сразу выделяют нужные фрагменты, делают заголовки и вставляют картинки.

Зачем использовать Markdown

  1. Если вам нужно простое оформление текста без изысков или вам нужно быстро подготовить материал к публикации без сложной вёрстки.
  2. Если вы делаете блог или другой статичный сайт, на котором хотите размещать свои тексты с лаконичным дизайном.
  3. Вы хотите писать красивые сообщения в WhatsApp или Telegram.
  4. Вы программист и пишете документацию к своему проекту на GitHub

Но во всех этих случаях вам нужно одно — сделать минимальную вёрстку текста так, чтобы он выглядел опрятно и чтобы его можно было прочитать и без специальных программ.

Что дальше

Скоро покажем, как запустить свой блог, используя Markdown и плагин для быстрого преобразования HTML-файлов. А там уже и до своего языка разметки недалеко.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *