Как упорядочить страницу вкладками и сворачиваемыми блоками

Длинная страница может требовать от читателя меньше двумя способами. Вкладки ставят варианты рядом, и читатель видит тот, что ему нужен: одно вычисление в двух обозначениях, программу на двух языках. Сворачиваемый блок прячет подробности за одной строкой, и читатель открывает его, только если нужно: длинная выкладка, сведения, которые специалист и так знает. Оба оставляют всё на странице — для поиска, для печати и для читателя без скриптов.

Показать варианты во вкладках

1. Откройте группу строкой из пяти двоеточий и tabs: :::::tabs.
2. Каждый вариант откройте четырьмя двоеточиями, tab и его названием: ::::tab{name="По индукции"}. Напишите содержимое и закройте его ::::.
3. Закройте группу пятью двоеточиями.

:::::tabs
::::tab{name="По индукции"}
При $n = 1$ обе части равны $1$. Если $\sum_{k=1}^{n} k = \tfrac{n(n+1)}{2}$, то
прибавление $n + 1$ даёт $\tfrac{(n+1)(n+2)}{2}$.
::::
::::tab{name="Попарно"}
Запишите сумму в прямом и обратном порядке и сложите: каждый из $n$ столбцов
даёт $n + 1$, значит, удвоенная сумма равна $n(n+1)$.
::::
:::::

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

Названия делайте короткими и однотипными, ведь они стоят рядом: Python и Julia, По индукции и Попарно.

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

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

1. Дайте каждой такой группе одно и то же имя group в открывающей строке: :::::tabs{group="lang"}.
2. Используйте в каждой группе в точности одинаковые названия вкладок.

xs = [1, 2, 3]

xs = [1, 2, 3]

print(sum(xs))

println(sum(xs))

:::::tabs{group="lang"}
::::tab{name="Python"}
```python
xs = [1, 2, 3]
```
::::
::::tab{name="Julia"}
```julia
xs = [1, 2, 3]
```
::::
:::::
 
:::::tabs{group="lang"}
::::tab{name="Python"}
```python
print(sum(xs))
```
::::
::::tab{name="Julia"}
```julia
println(sum(xs))
```
::::
:::::

Выбор Julia в одной группе переключает на Julia все группы с именем lang, а браузер читателя запоминает выбор для следующей страницы с тем же именем группы. Имя группы — латинские буквы, цифры, - и _, до 40 символов; всё остальное игнорируется, и группа переключается сама по себе.

Спрятать подробности за щелчок

1. Откройте блок четырьмя двоеточиями, spoiler и в квадратных скобках строкой, которую читатель видит, пока блок закрыт: ::::spoiler[Показать вычисление].
2. Напишите скрытое содержимое.
3. Закройте блок четырьмя двоеточиями.

Интеграл равен $e - 1$.
 
::::spoiler[Показать вычисление]
Подставим $u = x^2$, тогда $du = 2x\,dx$:
 
$$
\int_0^1 2x\,e^{x^2}\,dx = \int_0^1 e^{u}\,du = e - 1.
$$
::::

Пишите в метке то, что читатель получит, открыв блок: Показать вычисление, Доказательство нижней оценки, Почему это работает. Метку давайте всегда: без неё блок называется Details — по-английски, на каком бы языке ни был документ. Четыре двоеточия оставляют место для блока внутри, например диаграммы TikZ или таблицы в выноске.

Выбрать подходящий блок

• Подсказка или решение задачи — это :::hint или :::solution внутри :::problem. Они сворачиваются так же, а ещё несут переводимую метку и принадлежат задаче. Смотрите Задача с подсказкой и решением.
• Два способа сделать одно и то же — это вкладки. Подробности об одном способе — сворачиваемый блок.
• То, на что опирается рассуждение, остаётся открытым. Читатель, пропустивший свёрнутый блок, должен по-прежнему понимать текст.
• То, что должны видеть не все читатели, место в работе с более узкой видимостью, а не за щелчком: свёрнутый текст есть на странице, и открыть его может любой.

Результат

В предпросмотре группа вкладок показывает ряд названий над содержимым первой вкладки, а щелчок по названию показывает другую вкладку. Сворачиваемый блок показывает метку со значком и открывается щелчком или клавишами Enter и Пробел. На печати и везде, где скрипты не работают, вкладки идут одна под другой, каждая под своим названием, а сворачиваемые блоки работают как обычно, потому что это собственный элемент раскрытия браузера. Chrome и Edge открывают свёрнутый блок, когда поиск по странице находит текст внутри него.