Возможности VitePress
Информация
VitePress использует markdown-it в качестве парсера который расширяет возможности markdown. Мы можем добавить существенно больше красоты и удобства.
Полный, актуальный текст всех возможностей всегда можно посмотреть на https://vitepress.dev/guide/markdown.
Рассмотрим подробнее каждую из них.
Заголовки-ссылки
Заголовки автоматически становятся ссылками-якорями вида guide/vitepress#zagolovkissylki . Текст заголовка автоматически транслитерируется и обрезается до 25-ти символов (без обрезки слов).
Произвольный анкор
Но вы можете назначить произвольный анкор любому из заголовков, используя конструкцию {#my-anchor}.
## Обычный заголовок
### Произвольный анкор {#my-anchor}Ссылки
Пример:
[ссылка на внутреннюю страницу](/flatpak)
[ссылка на внешнюю страницу](https://alt-gnome.wiki)Вывод:
Frontmatter
YAML frontmatter доступен из коробки.
---
title: YAML frontmatter
platform: VitePress
---Эти переменные доступны в остальной часть страницы.
Таблицы
Генерируйте таблицы в стиле GitHub.
Пример:
| Tables | Are | Cool |
| ------------- | :-----------: | ----: |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |Вывод:
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
Эмоджи
Пример:
:tada: :100:Вывод:
🎉 💯
Список всех доступных эмоджи здесь.
Вывод оглавления в любом месте
Генерируется на основе заголовков.
Пример:
[[toc]]Вывод:
Медиа-контент
Пример:
Вывод:
Блоки кода
Пример:
```js
console.log('Hello World!')
```Вывод:
console.log('Hello World!')Блоки кода c парсингом Vue JS
Пример:
```js-vue
console.log('{{ $frontmatter.ExampleVar }}');
```Вывод:
console.log('Hello World!');Блоки кода с табами
Пример:
::: code-group
```python[python]
print("Hello World!")
```
```rust[rust]
fn main() {
println!("Hello World!");
}
```
:::Вывод:
print("Hello World!")fn main() {
println!("Hello World!");
}Контент с табами
Пример:
::: tabs
== python
Код `Hello World!` на Python.
```python
print("Hello World!")
```
== rust
Код `Hello World!` на Rust.
```rust
fn main() {
println!("Hello World!");
}
```
:::Вывод:
Код Hello World! на Python.
print("Hello World!")Красивые уведомления
Пример:
::: info
Это информационный блок.
:::
::: tip
Это совет.
:::
::: warning
это предупреждение об ошибке.
:::
::: danger
Это предупреждение об опасности
:::
::: details
Это блок сведений.
:::Вывод:
Информация
Это информационный блок.
Подсказка
Это совет.
Внимание
это предупреждение об ошибке.
Осторожно
Это предупреждение об опасности.
Подробнее
Это блок сведений.
Уведомления с произвольными заголовками
Пример:
::: info Произвольный заголовок
Это информационный блок с произвольным заголовков.
:::
::: danger Опасно
Это предупреждение об опасности.
:::
::: details Нажмите для отображения кода
```js
console.log('Привет, VitePress!')
```
:::Вывод:
Произвольный заголовок
Это информационный блок с произвольным заголовков.
Опасно
Это предупреждение об опасности.
Нажмите для отображения кода
console.log('Привет, VitePress!')Анимированное выделение текста
Пример:
<mark>Это сообщение несёт глубокий посыл!</mark>Вывод:
Это сообщение несёт глубокий посыл!
Кирилл Уницаев
Давид Султаниязов
Хачатур Тоникян
Дмитрий Бондарев
Семён Фомченков
Олег Щавелев