Шорткоды в Markdown

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

Что такое шорткоды?

Шорткоды - это короткие фрагменты кода, предоставляемые генераторами статических сайтов (такими как Hugo, Jekyll, Gatsby) для вызова предопределенной функциональности или компонентов в Markdown.

Базовый синтаксис

Hugo

{{< shortcode-name param1="value1" >}}

Jekyll

{% shortcode_name param1='value1' %}

Docusaurus / MDX

<ShortcodeName param1="value1" />

Распространенные шорткоды

Медиа

{{< youtube "dQw4w9WgXcQ" >}}
{{< vimeo "123456789" >}}

Блоки предупреждений

{{< note >}}
Это примечание.
{{< /note >}}

{{< warning >}}
Это предупреждение.
{{< /warning >}}

Вкладки

{{< tabs >}}
{{< tab "Вкладка 1" >}}
Содержимое вкладки 1.
{{< /tab >}}
{{< tab "Вкладка 2" >}}
Содержимое вкладки 2.
{{< /tab >}}
{{< /tabs >}}

Создание пользовательских шорткодов

Пользовательский шорткод Hugo

layouts/shortcodes/highlight-box.html:

<div class="highlight-box">
  {{ .Inner | markdownify }}
</div>

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

{{< highlight-box >}}
Это **важный** контент.
{{< /highlight-box >}}

Лучшие практики

# Хорошо: простой и понятный
{{< note >}}
Важное примечание
{{< /note >}}

# Избегайте: слишком сложный
{{< container type="note" style="background:blue" >}}
Важное примечание
{{< /container >}}

Заключение

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

Дополнительные ресурсы

• Документация шорткодов Hugo
• Теги Liquid Jekyll
• Документация MDX