📝 Typo

Каллауты

1
2
3

{{< callout/note >}}
Это **заметка**.
{{< /callout/note >}}

1
2
3

{{< callout/hint >}}
Это **подсказка**.
{{< /callout/hint >}}

1
2
3

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

1
2
3

{{< callout/custom "☕" "#000" "#8BC6EC" "linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)" >}}
Это **кастомный**.
{{< /callout/custom >}}

1
2
3

{{< callout/custom "" "" "" "" >}}
Это **кастомный**.
{{< /callout/custom >}}

1
2
3
4

"" - Emoji
"" - color: inherit;
"" - background-color: transparent;
"" - background-image: none;

Inline callout

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam duo dolores et ea rebum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

1
2
3
4
5

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam duo dolores et ea rebum. {{< callout/inline hyphens >}}Lorem
Ipsum is simply dummy text of the printing and typesetting industry.{{< /callout/inline >}}
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

1

{{< callout/inline hyphens >}}Inline{{< /callout/inline >}}

Наличие “hyphens” включает переносы.

Ахтунг

1

{{< ahtung/1 >}}

1

{{< ahtung/2 >}}

1

{{< ahtung/badEn >}}

Спойлер

Markdown

1
2
3

{{% details/1 "Заголовок" open %}}
**Контент**
{{% /details/1 %}}

html

1
2
3

{{< details/1 "Заголовок" open >}}
<strong>Контент</strong>
{{< /details/1 >}}

Встраивание YouTube видео

1

{{< iframes/yt jfKfPfyJRdk "title" "params" >}}

Примеры params:

• start=30 - начать с 30 секунд
• end=35 - закончить на 35 секундах
• controls=0 - убрать элементы управления

Параметры объединяются через &, например:

1

start=30&end=35&controls=0

Ссылка на пост

📝 Typo

Как правильно писать.

nozsh

1

{{< embedPost url="typo" >}}

Example Title

Some description

Author

Website

1

{{< embedPost url="https://example.com" title="Example Title" desc="Some description" cover="typo-cover.jpg" author="Author" site="Website" >}}

SOURCE // BY // ORIGINAL //  SOURCE // BY // ORIGINAL //  SOURCE // BY // ORIGINAL //  SOURCE // BY // ORIGINAL // 

SOURCE // BY // ORIGINAL //  SOURCE // BY // ORIGINAL //  SOURCE // BY // ORIGINAL //  SOURCE // BY // ORIGINAL // 

Example Title

Some description

Author

Website

1

{{< embedPost source=true ... >}}

Список источников

В markdown.

Источники

• Источник Источник
• Источник Источник
• Источник Источник

1
2
3
4
5

{{< references >}}
- Источник [Источник](#)
- Источник [Источник](#)
- Источник [Источник](#)
{{< /references >}}

Заголовки

Следующие элементы HTML h2 - h6 представляют пять уровней заголовков разделов. h2 это самый высокий уровень, а h6 самый низкий.

Заголовок h1 это заголовок (название) записи, поэтому он не используется.

1
2
3
4
5
6
7
8
9

## H2 <-- Учитывается в содержании

### H3 <-- Учитывается в содержании

#### H4 <-- Учитывается в содержании

##### H5 <-- Учитывается в содержании

###### H6 <-- Учитывается в содержании

Разметка

О ссылках

Белая ссылка, ссылка на доверенный сайт, открывается в текущей вкладке.

Черная ссылка, ссылка на не доверенный сайт (nofollow), открывается в новой вкладке + используется маскировка рефера через анонимайзер ссылок.

Белая и черная ссылка, имеют атрибуты для безопасности noreferrer noopener.

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

Списки

Обычный список

• Раз
• Два
• Три
• Это
  • Обычный
    • Список

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

- Раз
- Два
- Три
- Это
  - Обычный
    - Список

* Раз
* Два
* Три
* Это
  * Обычный
    * Список

Нумерованный список

1. Раз
2. Два
3. Три
4. Это
   1. Нумерованный
      1. Список

1
2
3
4
5
6

1. Раз
2. Два
3. Три
4. Это
   1. Нумерованный
      1. Список

Чекбоксы

• Пустой
• Еще пустой
  • Пустой, но вложенный
• Не пустой
  • Не пустой и вложенный

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

- [ ] Пустой
- [ ] Еще пустой
  - [ ] Пустой, но вложенный
- [x] Не пустой
  - [x] Не пустой и вложенный

* [ ] Пустой
* [ ] Еще пустой
  * [ ] Пустой, но вложенный
* [x] Не пустой
  * [x] Не пустой и вложенный

Цитаты

Цитата

«Когда у тебя ничего нет, нечего и терять.»

— Джек Доусон

1
2
3
4
5

> Цитата

> «Когда у тебя ничего нет, нечего и терять.»
>
> --- Джек Доусон

Сноски

Сноска¹

Сноска²

1
2
3

Сноска[^1]

[^1]: Это сноска.

Изображения

1

![alt](typo-cover.jpg)

С параметрами

1
2
3
4
5
6
7

{{< imgs/img
notp=false
loading=""
caption="Это подпись"
alt="Это alt"
width="50%"
src="typo-cover.jpg" >}}

• notp - true - не оборачивать в тег <p>, обычно нужно если используется внутри другого шорткода
• loading - lazy/eager, по умолчанию lazy
• caption - подпись

Галерея

^{Photo by Samsung Memory / Unsplash}

1
2
3
4
5
6

{{< imgs/gallery >}}
src | tall
src | wide
src | big
src |
{{< /imgs/gallery >}}

Видео

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{< vids/vid
width="100%"
align="center"
attr="controls loop muted"
controlslist="nodownload nofullscreen noremoteplayback"
webm="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
mp4="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
preload="metadata"
poster="typo-cover.jpg"
caption="Flowers" >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{< vids/vid
width=""
align=""
attr="controls"
controlslist=""
webm=""
mp4=""
preload="metadata"
poster=""
caption="" >}}

Параметры

width - Ширина видео.

align - Выравнивание видео на странице: left, center. По умолчанию без значения видео выравнивается по левому краю - left.

attr - Атрибуты видео.

controlslist - Если он указан, помогает браузеру выбрать, какие элементы управления будут отображаться для видео всякий раз, когда браузер показывает свой собственный набор элементов управления (т. е. когда указан атрибут controls).

• nodownload - Убирает кнопку загрузки видео. Пользователи не смогут скачать видеофайл на свои устройства с помощью элементов управления.
• nofullscreen - Убирает возможность перехода в полноэкранный режим. Пользователи не смогут развернуть видео на весь экран.
• noremoteplayback - Запрещает пользователям отправлять видео на удалённые устройства (например, на телевизоры через Chromecast или другие медиаплееры).

webm - Ссылка на видео в формате webm.

mp4 - Ссылка на видео в формате mp4.

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

• none: Указывает, что видео не должно быть предварительно загружено.
• metadata: Указывает, что загружаются только метаданные видео (например, длина).
• auto: Указывает, что видеофайл может быть загружен целиком, даже если пользователь не должен его использовать.
• пустая строка: синоним значения auto.

Значение по умолчанию отличается для каждого браузера. В спецификации рекомендуется установить значение metadata.

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

Атрибуты

Атрибуты указываются в attr.

autoplay - Булев атрибут; Если указано, видео автоматически начнет воспроизводиться, как только сможет, без остановки для завершения загрузки данных.

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

disablepictureinpicture - В некоторых случаях запрещает браузеру предлагать контекстное меню «Картинка в картинке» или автоматически запрашивать «Картинка в картинке».

loop - Булев атрибут; Если указано, браузер автоматически вернется к началу по достижении конца видео.

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

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

Таблицы

1
2
3
4
5

| Заголовок #1 | Заголовок #2 | Заголовок #3 | Заголовок #4 | etc. |
| ------------ | ------------ | ------------ | ------------ | ---- |
| Текст        | Текст        | Текст        | Текст        | etc. |
| Текст        | Текст        | Текст        | Текст        | etc. |
| Текст        | Текст        | Текст        | Текст        | etc. |

Отступы соблюдать не обязательно.

Выравнивание текста работает через: :--, :-:, --:.

1
2
3

| Лево  | Центр | Право |
| :---- | :---: | ----: |
| Текст | Текст | Текст |

Блоки кода

1
2
3
4
5
6
7
8

llinks_safe = document
  .querySelectorAll("a[href*='?sl']")
  .forEach((llinks_safe) => {
    llinks_safe.setAttribute("rel", "noreferrer nofollow noopener");

    let llinks_safe_href = llinks_safe.href.toString().slice(0, -3);
    llinks_safe.setAttribute("href", "https://href.li/?" + llinks_safe_href);
  });

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

Подсветка синтаксиса указывается после первых трех обратных кавычек:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

```js
llinks_safe = document
  .querySelectorAll("a[href*='?sl']")
  .forEach((llinks_safe) => {
    llinks_safe.setAttribute("rel", "noreferrer nofollow noopener");

    let llinks_safe_href = llinks_safe.href.toString().slice(0, -3);
    llinks_safe.setAttribute("href", "https://href.li/?" + llinks_safe_href);
  });
```

Убрать нумерацию строк {linenos=false}:

```js {linenos=false}
llinks_safe = document
  .querySelectorAll("a[href*='?sl']")
  .forEach((llinks_safe) => {
    llinks_safe.setAttribute("rel", "noreferrer nofollow noopener");

    let llinks_safe_href = llinks_safe.href.toString().slice(0, -3);
    llinks_safe.setAttribute("href", "https://href.li/?" + llinks_safe_href);
  });
```

Выделить строку или строки {hl_lines=[1,2,3]}:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

```js {hl_lines=[2,5]}
llinks_safe = document
  .querySelectorAll("a[href*='?sl']")
  .forEach((llinks_safe) => {
    llinks_safe.setAttribute("rel", "noreferrer nofollow noopener");

    let llinks_safe_href = llinks_safe.href.toString().slice(0, -3);
    llinks_safe.setAttribute("href", "https://href.li/?" + llinks_safe_href);
  });
```

Мультистрочное выделение {hl_lines=[1,2,"5-20"]}

Можно объединять {linenos=false,hl_lines=[1,2,3]}.

Математика

Включить в frontmatter:

---
math: true
---

Инлайн $E = mc^2$ формула:

Инлайн $E = mc^2$ формула

Блок с формулой:

$$ \int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$

$$
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Шпаргалки: Katex, Detexify.