bl∅g.ru

Система классов и атрибуты в Markdown

blogtest · 19.08.2026 07:02
Система классов и атрибуты в Markdown

Система классов и атрибуты в Markdown

Расширение attr_list позволяет добавлять CSS-классы, ID и атрибуты прямо из Markdown. В этом гайде — полный список доступных классов и примеры использования.

Два синтаксиса

Инлайн (сразу после элемента)

Атрибуты в {} ставятся сразу после ссылки, картинки или другого инлайн-элемента:

[Ссылка](https://example.com){ .btn .btn-primary }
![Картинка](pic.jpg){ width=50% .rounded }

Блочные (на отдельной строке)

Для абзацев, заголовков и других блоков — {...} на строке сразу после элемента:

Текст абзаца
{.center .lead}

Важно

{.class} на той же строке, что и текст — не работает для блоков. Только на отдельной строке.

Заголовки

Для заголовков используется синтаксис с {:}:

### Заголовок {: #my-id .accent }

Типографика

Крупный текст (lead)

Важный вводный абзац
{.lead}
Важный вводный абзац

Мелкий текст (small)

Подпись или примечание
{.small .muted}
Подпись или примечание

Моноширинный (mono)

const x = 42;
{.mono}
const x = 42;

Жирный (bold) и курсив (italic)

**Жирный текст**
{.bold}
Жирный текст
Курсивный текст
{.italic}
Курсивный текст

Заглавные буквы (uppercase)

Срочное сообщение
{.bold .uppercase}
Срочное сообщение

Цвета текста

Акцентный текст
{.accent}

Опасность
{.danger}

Успех
{.success}

Предупреждение
{.warning}

Информация
{.info}

Приглушённый
{.muted}
Акцентный текст
Опасность
Успех
Предупреждение
Информация
Приглушённый

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

По левому краю
{.left}

По центру
{.center}

По правому краю
{.right}

Между краями (justified text — для длинных абзацев с переносами)
{.justify}
По левому краю
По центру
По правому краю
Между краями. Этот текст выровнен по ширине — слова распределяются равномерно между левым и правым краем. Хорошо работает для длинных абзацев с переносами строк.

Фоновые блоки

Карточка (bg-card)

Содержимое карточки
{.bg-card}
Содержимое карточки

Акцентный блок (bg-accent)

Важное сообщение на акцентном фоне
{.bg-accent}
Важное сообщение на акцентном фоне

Цветные блоки

Успешная операция
{.bg-success}

Ошибка при загрузке
{.bg-danger}

Предупреждение пользователя
{.bg-warning}
Успешная операция
Ошибка при загрузке
Предупреждение пользователя

Границы

Карточка с рамкой (border-card)

Контент внутри рамки
{.border-card}
Контент внутри рамки

Акцентная полоска слева (border-left)

Цитата или выделенный блок
{.border-left}
Цитата или выделенный блок

Цветные полоски

Важное
{.border-left .danger}

Подсказка
{.border-left .success}

Заметка
{.border-left .info}
Важное
Подсказка
Заметка

Скруглённые углы и тень

Карточка с тенью
{.border-card .shadow .rounded}
Карточка с тенью

Отступы

mt-0 / mb-0 — убрать отступ
mt-sm / mb-sm — 8px
mt-lg / mb-lg — 24px
pt-0 / pb-0 — убрать внутренний отступ
pt-sm / pb-sm — 8px
pt-lg / pb-lg — 24px

Пример — убрать отступ сверху у заголовка:

### Заголовок без отступа {: .mt-0 }

Кнопки

Ссылка оформляется как кнопка через .btn:

[Кнопка](https://example.com){ .btn }
Кнопка

Размеры

[Маленькая](#){ .btn .btn-sm }
[Обычная](#){ .btn }
[Большая](#){ .btn .btn-lg }
Маленькая Обычная Большая

Цвета и варианты

[Основная](#){ .btn }
[Опасность](#){ .btn .btn-danger }
[Успех](#){ .btn .btn-success }
[Контурная](#){ .btn .btn-outline }
Основная Опасность Успех Контурная

Комбинации

[Большая контурная](#){ .btn .btn-lg .btn-outline }
[Маленькая зелёная](#){ .btn .btn-sm .btn-success }
Большая контурная Маленькая зелёная

Флекс и грид

Флекс-контейнер

<div class="flex">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>
Элемент 1
Элемент 2
Элемент 3

По центру

<div class="flex flex-center">
  <div>Центр</div>
</div>
Центр

Между краями

<div class="flex-between">
  <div>Лево</div>
  <div>Право</div>
</div>
Лево
Право

Колонка

<div class="flex flex-col">
  <div>Блок 1</div>
  <div>Блок 2</div>
</div>
Блок 1
Блок 2

С переносом и отступами

<div class="flex flex-wrap gap-lg">
  <div>Тег</div>
  <div>Тег</div>
  <div>Тег</div>
</div>
Тег
Тег
Тег
Тег

Грид — две колонки

<div class="grid-2">
  <div>Колонка 1</div>
  <div>Колонка 2</div>
</div>
Колонка 1
Колонка 2

Грид — три колонки

<div class="grid-3">
  <div>Колонка 1</div>
  <div>Колонка 2</div>
  <div>Колонка 3</div>
</div>
Колонка 1
Колонка 2
Колонка 3

Ширина

Классы ширины работают внутри флекс- или грид-контейнеров.

<div class="flex">
  <div class="w-half">50%</div>
  <div class="w-half">50%</div>
</div>
50%
50%
<div class="flex">
  <div class="w-third">33%</div>
  <div class="w-two-thirds">67%</div>
</div>
33%
67%
<div class="flex">
  <div class="w-quarter">25%</div>
  <div class="w-three-quarters">75%</div>
</div>
25%
75%

Адаптивность

На экранах уже 640px все колонки и блоки с фиксированной шириной становятся на всю ширину — грид и флекс автоматически перестраиваются в одну колонку.

Разделитель

Текст выше
{.divider}
Текст ниже

Для горизонтальной линии используем HTML:

Текст выше

<hr class="divider">

Текст ниже

Комбинированные примеры

Заголовок по центру с акцентом

### Контакты {: #contacts .center .accent }

Контакты

Блок-цитата с полоской

> Важная мысль
{.border-left .accent}
Важная мысль

Карточка с заголовком и кнопкой

### Подписка {: .mt-0 }

Получайте уведомления о новых статьях
{.small .muted .mb-lg}

[Подписаться](#){ .btn .btn-lg .center }

Подписка

Получайте уведомления о новых статьях
Подписаться

Три карточки в гриде

<div class="grid-3">
  <div class="border-card">
    **Фича 1**
    Описание
  </div>
  <div class="border-card">
    **Фича 2**
    Описание
  </div>
  <div class="border-card">
    **Фича 3**
    Описание
  </div>
</div>
Фича 1
Описание
Фича 2
Описание
Фича 3
Описание

Плашка-предупреждение

!!! danger "Не публикуйте ключи"
    Используйте переменные окружения.
{.danger}

Не публикуйте ключи

Используйте переменные окружения.

Полный список классов

Типографика

Класс Описание
.lead Крупный текст (1.25em, medium)
.small Мелкий текст (0.85em)
.mono Моноширинный шрифт
.bold Жирный
.italic Курсив
.uppercase Заглавные буквы

Цвета

Класс Цвет
.accent Синий (акцент темы)
.muted Серый (приглушённый)
.danger Красный
.success Зелёный
.warning Жёлтый
.info Голубой

Фоны

Класс Описание
.bg-card Серый фон (как карточки)
.bg-accent Акцентный фон, белый текст
.bg-danger Красный фон
.bg-success Зелёный фон
.bg-warning Жёлтый фон

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

Класс Описание
.left По левому краю
.center По центру
.right По правому краю
.justify По ширине

Отступы

Класс Размер
.mt-0 / .mb-0 Убрать
.mt-sm / .mb-sm 8px
.mt-lg / .mb-lg 24px
.pt-0 / .pb-0 Убрать внутренний
.pt-sm / .pb-sm 8px
.pt-lg / .pb-lg 24px

Кнопки

Класс Описание
.btn Базовая кнопка
.btn-sm Маленькая
.btn-lg Большая
.btn-outline Контурная
.btn-danger Красная
.btn-success Зелёная

Границы

Класс Описание
.border-card Рамка с фоном и скруглением
.border-left Акцентная полоска слева
.border-left.danger Красная полоска
.border-left.success Зелёная полоска
.border-left.warning Жёлтая полоска
.border-left.info Голубая полоска
.rounded Скруглённые углы (12px)
.shadow Тень

Layout

Класс Описание
.flex Флекс-контейнер (gap 12px, center)
.flex-between Между краями
.flex-center По центру
.flex-col Колонка
.flex-wrap Перенос
.gap-sm Маленький gap (4px)
.gap-lg Большой gap (20px)
.grid-2 Две колонки
.grid-3 Три колонки

Ширина

Класс Размер
.w-full 100%
.w-half 50%
.w-third 33%
.w-two-thirds 67%
.w-quarter 25%
.w-three-quarters 75%

Прочее

Класс Описание
.divider Горизонтальная линия
.inline display: inline
.block display: block

Безопасность

attr_list позволяет добавлять любые HTML-атрибуты, включая onclick, style и другие. Любой автор статьи может вставить произвольный HTML. Это известная проблема — для блога это приемлемо, так как контент пишут только авторы с ролью author/admin.

Советы

  1. Комбинируйте классы — { .btn .btn-lg .btn-outline .danger } работает
  2. Для флекса начните с .flex, потом добавляйте .flex-center, .flex-between, .flex-col
  3. Ширина работает только внутри .flex или .grid-* контейнеров
  4. На телефоне грид и ширины автоматически становятся в одну колонку
  5. Цвета фона (.bg-*) уже включают padding и border-radius — не нужно добавлять вручную

Комментарии

Пока нет комментариев.

Войдите, чтобы комментировать.