Расширенный синтаксис

Вступление

Исходный синтаксис Markdown, опубликованный Джоном Грубером, добавил несколько важных элементов для редактирования документов, но некоторые пользователи остались недовольны.

Расширенный синтаксис пытается решить эту проблему, добавляя новые элементы с помощью новой маркировки.

Таблицы, блоки кода, автоматическая генерация links и даже сноски являются примерами расширения базового синтаксиса Markdown.

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

ПРИМЕЧАНИЕ: вполне возможно, что ваше приложение Markdown уже поддерживает элементы, представленные в этой статье, поэтому стоит протестировать каждый из них, следуя руководству.

Ароматы Markdown

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

Эти варианты, помимо поддержки основного синтаксиса, добавляют элементы, улучшающие редактирование документа.

Приложения, совместимые с Markdown, часто используют один из языков, показанных ниже:

CommonMark

GitHub-flavored Markdown (GFM)

Markdown Extra

R Markdown

MultiMarkdown

Создание таблиц в Markdown

Таблица в Markdown может использоваться для представления сравнений данных пользователем.

Для создания таблицы в Markdown мы используем тире - и вертикальные полосы | для разделения строк и столбцов.

В первой строке таблицы мы строим заголовок, разделяя эту строку тремя или более дефисами ---, чтобы процессор Markdown понимал форматирование.

Разделение столбцов выполняется с помощью вертикальной черты |, которую программисты также называют pipe.

Ниже приведен пример таблицы:

| Заголовок  | Заголовок   |
| ------- | -------- |
| Текст   | Текст    |
| Текст   | Текст    |

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

Пример:

Заголовок  | Заголовок
------- | --------
Текст   | Текст
Текст   | Текст

Вывод отображается в HTML:

Ширина ячеек в таблице Markdown может быть разной.

Пример:

| Заголовок | Заголовок |
| --- | ----------- |
| Текст | Текст |
| Текст     | Текст |

Автоматическое создание таблиц в Markdown

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

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

Шаг 1 - Откройте наш редактор Markdown нажав здесь.

Шаг 2 - щелкните значок автоматического создания таблицы, чтобы открыть панель параметров.

Шаг 3 - На панели параметров:

1. Введите количество строк в таблице.
2. Установите количество столбцов в таблице.
3. Выберите положение выравнивания текста в столбцах.
4. Щелкните для подтверждения и создания структуры таблицы.

Шаг 4 - Введите значения для каждой ячейки.

Выравнивание

Markdown позволяет выровнять содержимое столбца таблицы по левому, правому или центру.

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

Пример:

| Фрукты  | Овощи | Овощи |
| :---    | :----    | :---    |
| кешью    | Кресс   | Морковь |
| яблоко    | Брокколи | Горох |

Результат в HTML:

ПРИМЕЧАНИЕ: использование двоеточия для выравнивания текста по левому краю необязательно, поскольку по умолчанию содержимое таблицы уже выровнено в этой позиции.

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

Пример:

| Фрукты  | Овощи | Овощи |
|    ---: |    ----: |    ---: |
| кешью    | Кресс   | Морковь |
| яблоко    | Брокколи | Горох |

Результат в HTML:

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

Пример:

| Фрукты  | Овощи | Овощи |
|  :---:  |  :----:  |  :---:  |
| кешью    | Кресс   | Морковь |
| яблоко    | Брокколи | Горох |

Результат в HTML:

Можно объединить форматирование выравнивания, поскольку это влияет только на содержимое внутри столбца.

Пример:

| Фрукты  | Овощи | Овощи |
| :---    |  :----:  |    ---: |
| кешью    | Кресс   | Морковь |
| яблоко    | Брокколи | Горох |

Результат в HTML:

Стоит отметить, что выравнивание тире --- линии, разделяющей заголовки таблиц, не имеет значения для процессора Markdown, что действительно будет приниматься во внимание, так это положение двоеточия :.

В следующем примере тире --- расположены слева от столбца, и выравнивание работает равномерно.

| Фрукты  | Овощи | Овощи |
| :---    | :----:   | ---:    |
| кешью    | Кресс   | Морковь |
| яблоко    | Брокколи | Горох |

Результат в HTML:

ПРИМЕЧАНИЕ: содержимое заголовка таблицы также будет выровнено в соответствии с положением двоеточия.

Форматирование текста в таблицах

Вы можете вставить в таблицу несколько основных элементов Markdown.

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

Заголовки, блоки кода, blockquotes, списки, горизонтальные линии, изображения и tags HTML не работают.

ПРИМЕЧАНИЕ: вы даже можете найти приложения, которые допускают вставку упомянутых выше элементов в таблицу, но это ухудшит переносимость вашего документа, поскольку другие программы не поддерживают это.

Удаление вертикальных полос на столах

Вы уже узнали, что для разделения столбцов таблицы мы используем вертикальную черту |.

Теперь, если вы собираетесь отображать тот же символ в качестве содержимого в ячейке, вы должны использовать кодировку HTML: |.

Ao converter o seu documento para um outro formato, o código | se transformará em uma barra vertical |.

Огороженный блок кода

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

Для создания изолированного блока кода в Markdown поместите три кавычки ` ``перед содержимым и три кавычки `` ` после содержимого.

Пример:

```
{
  "Имя": "Robert",
  "фамилия": "Salles",
  "возраст": 25
}
```

Отрендеренный вывод выглядит так:

{
  "Имя": "Robert",
  "фамилия": "Salles",
  "возраст": 25
}

ПРИМЕЧАНИЕ: некоторые процессоры Markdown позволяют использовать фрагменты ~~~ вместо обратных кавычек для формирования блока кода.

См. Также: Как избежать магистралей в блоке кода.

Подсветка синтаксиса

Многие библиотеки JavaScript используются для выделения блоков кода, например: Prism.js & highlight.js.

Они берут определенный HTML tag, обычно tag pre или tag code, и применяют выделение на основе синтаксиса языка программирования кодового блока.

Синтаксис языка обычно определяется параметром class tag, например:

<code class="lang-markdown"></code>

Используя класс lang-plaintext>lang-markdown, фреймворк будет знать, что содержимое между "кодом" tags должно быть выделено в соответствии с языком Markdown.

ПРИМЕЧАНИЕ: выделение может выполняться даже автоматически, некоторые инструменты имеют возможность определять языки программирования автоматически, без необходимости определять его в параметре class.

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

Пример:

```json
{
  "Имя": "Robert",
  "фамилия": "Salles",
  "возраст": 25
}
```

Как и в первой строке блока, сразу после трех открывающих магистралей было указано json, код будет выделен соответствующим образом:

{
  "Имя": "Robert",
  "фамилия": "Salles",
  "возраст": 25
}

ПРИМЕЧАНИЕ: код будет выделен только в том случае, если вы используете библиотеку JavaScript, которая выполняет этот тип задач, сам HTML не выделяет код.

Сноски

Сноска в Markdown позволяет пользователю создать ссылку на некоторую концепцию, упомянутую в документе.

Обычно эти сноски помещаются в конец документа, но в Markdown вы можете определить их в любом месте текста.

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

Синтаксис для создания сноски разделен на две части.

Первая часть представляет собой номер, содержащий link, и создается с использованием квадратных скобок, курсора и идентификатора, например: [^1].

Идентификатор может содержать цифры и буквы, но не допускает пробелов и табуляции.

Вторая часть охватывает содержание самой ссылки, для ее создания используйте квадратные скобки, курсор, за которым следует тот же идентификатор (который вы создали ранее), двоеточие, пробел и текст, например: [^1]: Моя сноска.

Вот простая сноска[^1]. Вот более подробная сноска[^bignote].

[^1]: Это первая сноска.

[^bignote]: Вот один с несколькими абзацами и кодом.

    Сделайте отступ в абзацах, чтобы включить их в сноску.

    `{ мой код }`

    Добавьте столько абзацев, сколько хотите.

Редеризация в HTML выглядит так:

Вот простая сноска¹. Вот более подробная сноска².

ПРИМЕЧАНИЕ: содержимое нижнего колонтитула можно разместить в любом месте документа, кроме других элементов Markdown, таких как таблицы, списки и блоки кода.

ПРИМЕЧАНИЕ: сноски всегда будут нумероваться последовательно, независимо от созданных вами идентификаторов, последовательность заметок [^ 35], [^ yyyy] и [^ 102_444] будет отображаться как 1, 2 и 3.

Добавление ID или Class к элементам Markdown

Когда мы создаем tags в HTML, мы можем назначить им уникальную идентификацию и общую идентификацию с помощью параметров id и class.

Пример:

<h2 id="special-title"></h2> & <p class="bg-blue"></p>

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

Параметр class является общим и может быть назначен нескольким элементам.

Функция id или class состоит в том, чтобы позволить вам легко распознавать эти элементы через JavaScript или CSS, используя этот id или этот class мы можем обрабатывать свойства такие как цвет, размер, размещение и т. д.

Чтобы добавить id или class к элементу в открытых фигурных скобках Markdown { сразу после содержимого элемента, поместите знак решетки #, чтобы указать id или . чтобы указать class, затем сам идентификатор и, наконец, закрыть фигурные скобки }.

Примеры:

### Мой титул {#identifier}

Мой абзац{.my-class}

HTML выглядит так:

<h3 id="identifier">Мой титул</h3>

<p class="my-class">Мой абзац</p>

ПРИМЕЧАНИЕ: обратите внимание, что не все приложения Markdown поддерживают вставку параметров id или class, важно всегда обращаться к документации программы.

Links для ids no Markdown

Используя тот же стандартный синтаксис для создания links [] (), мы можем связать прямую ссылку на id в самом документе.

В скобках, где мы помещаем URL, вставьте id элемента, которому предшествует знак решетки #.

Если id находится в другом документе, форматирование аналогично, однако перед идентификацией поместите страницу URL.

Пример:

[ID заголовков](https://markdown.net.br/sintaxe-estendida#markdown-title-id)

Список определений

Список определений в HTML представлен tags dl и dt. В этом списке концептуально представлены термины и их объяснения.

Чтобы создать список определений с помощью Markdown, введите термин в одну строку, нажмите клавишу Enter, двоеточие, пробел и определение термина.

Пример:

Первый срок
: Это определение первого термина.

Второй срок
: Это определение второго термина.
: Это еще одно определение второго термина.

HTML выглядит так:

<dl>
  <dt>Первый срок</dt>
  <dd>Это определение первого термина.</dd>
  <dt>Второй срок</dt>
  <dd>Это определение второго термина. </dd>
  <dd>Это еще одно определение второго термина.</dd>
</dl>

Результат:

Первый срок

Это определение первого термина.

Второй срок

Это определение второго термина.

Это еще одно определение второго термина.

Зачеркнутый текст в Markdown

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

Зачеркнутый текст - это не что иное, как формат, в котором горизонтальная линия вставляется в середину фрагмента контента.

Чтобы пометить содержимое в Markdown, используйте две плитки ~~ до и после текста, который нужно отформатировать.

Markdown это: ~~трудно~~ легко обучаема.

И вот результат:

Markdown это: трудно легко обучаема.

Списки задач в Markdown

Список задач в Markdown позволяет пользователю создавать последовательность элементов с флажками слева от них, используя квадратные скобки [].

Поскольку мы работаем со списком, необходимо начинать строку элемента с тире -.

Чтобы отметить задачу как выполненную, поместите x в квадратные скобки [x].

- [x] Lorem ipsum dolor sit amet
- [ ] Lorem consectetur adipisicing elit
- [ ] Lorem ut labore et dfolore

Отрендеренный вывод выглядит так:

Вставка Emojis в документ Markdown

Да, вы можете вставить знаменитый emoticons прямо в формат Markdown вашего документа.

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

Мы лучше поймем, как работают обе процедуры, но сначала щелкните здесь, чтобы открыть наш редактор Markdown и протестировать Emojis в реальном времени.

Копирование и вставка Emojis в Markdown

Шаг 1 - Откройте эту страницу Emojipedia, на которой есть улыбающийся emoticon, и нажмите кнопку Copy.

Шаг 2 - Вернитесь в наш редактор Markdown, щелкните на левой панели и нажмите CTRL + V, чтобы вставить.

ПРИМЕЧАНИЕ: вы можете изучить Emojipedia, чтобы найти свой любимый смайлик, процедура копирования и вставки одинакова для всех.

Если ваше приложение Markdown совместимо, вы увидите представление emoticon прямо в тексте.

При преобразовании документа Markdown в HTML или даже PDF смайлы по-прежнему отображаются правильно.

ПРИМЕЧАНИЕ: если документ HTML не отображает смайлики должным образом, закодируйте страницы в UTF-8.

Использование кодов доступа Emoji

Код эмодзи формируется путем идентификации emoticon, окруженного двоеточием.

Я отправился в поход! :tent: Я скоро вернусь.

Это так весело! :joy:

Отрендеренный вывод выглядит так:

Я отправился в поход! ⛺ Я скоро вернусь.

Это так весело! 😂

Обнаружение кода доступа Emojis

Если вы не знаете код доступа к смайликам, воспользуйтесь нашим редактором Markdown, чтобы узнать.

Шаг 1 - Щелкните здесь, чтобы открыть Markeditor.

Шаг 2 - нажмите кнопку вставки Emojis на панели инструментов.

Шаг 3 - В окне выбора Emoji:

1. Выберите источник, из которого вы хотите получить Emojis.
2. Щелкните на Emoji, который будет вставлен в документ (вы можете щелкнуть несколько Emojis в одном окне).
3. Нажмите кнопку подтверждения, чтобы ввести код доступа к изображениям в тексте.

На левой панели вы можете просмотреть коды Emojis, а на правой панели - рендеринг.

ПРИМЕЧАНИЕ: изображения emoticons могут сильно отличаться от приложения к приложению, в этом списке вы найдете смайлики, совместимые с Markdown, используемым GitHub, вы можете протестировать их в своем приложении, чтобы узнать, есть совместимость.

автоматический Link из URL в Markdown

Некоторые процессоры Markdown превращают URL в links, когда находят адрес между знаками меньше < и больше >.

Пример:

<https://markdown.net.br>

Em outras ocasiões, embutir o endereço entre <> é dispensável, ou seja, basta inserir a URL no próprio documento que o aplicativo fará a conversão automaticamente.

Пример:

https://markdown.net.br

Отрендеренный вывод выглядит так:

https://markdown.net.br

Отключение автоматического связывания URL

Если вы просто хотите представить URL в документе и предотвратить автоматическое преобразование приложения в link, заключите адрес между обратными кавычками ` `.

`https://markdown.net.br`

Отрендеренный вывод выглядит так:

https://markdown.net.br

ПРИМЕЧАНИЕ: стоит помнить, что использование обратных кавычек для окружения содержимого преобразует его в код.