ALT Gnome Wiki

Тема

Возможности VitePress ​

Информация

VitePress использует markdown-it в качестве парсера который расширяет возможности markdown. Мы можем добавить существенно больше красоты и удобства.

Полный, актуальный текст всех возможностей всегда можно посмотреть на https://vitepress.dev/guide/markdown.

Рассмотрим подробнее каждую из них.

Заголовки-ссылки ​

Заголовки автоматически становятся ссылками-якорями вида guide/vitepress#zagolovkissylki . Текст заголовка автоматически транслитерируется и обрезается до 25-ти символов (без обрезки слов).

Произвольный анкор ​

Но вы можете назначить произвольный анкор любому из заголовков, используя конструкцию {#my-anchor}.

markdown
## Обычный заголовок

### Произвольный анкор {#my-anchor}

Ссылки ​

Пример:

markdown
[ссылка на внутреннюю страницу](/flatpak)

[ссылка на внешнюю страницу](https://alt-gnome.wiki)

Вывод:

Frontmatter ​

YAML frontmatter доступен из коробки.

yaml
---
title: YAML frontmatter
platform: VitePress
---

Эти переменные доступны в остальной часть страницы.

Таблицы ​

Генерируйте таблицы в стиле GitHub.

Пример:

markdown
| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

Вывод:

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

Эмоджи ​

Пример:

markdown
:tada: :100:

Вывод:

🎉 💯

Список всех доступных эмоджи здесь.

Вывод оглавления в любом месте ​

Генерируется на основе заголовков.

Пример:

markdown
[[toc]]

Вывод:

Медиа-контент ​

Пример:

markdown
![логотип](/logo.png)

Вывод:

логотип

Блоки кода ​

Пример:

markdown
```js
console.log('Hello World!')
```

Вывод:

js
console.log('Hello World!')

Блоки кода c парсингом Vue JS ​

Пример:

markdown
```js-vue
console.log('{{ $frontmatter.ExampleVar }}');
```

Вывод:

js
console.log('Hello World!');

Блоки кода с табами ​

Пример:

markdown
::: code-group

```python[python]
print("Hello World!")
```

```rust[rust]
fn main() {
    println!("Hello World!");
}
```

:::

Вывод:

python
print("Hello World!")
rust
fn main() {
    println!("Hello World!");
}

Контент с табами ​

Пример:

markdown
::: tabs
== python
Код `Hello World!` на Python.

```python
print("Hello World!")
```

== rust
Код `Hello World!` на Rust.

```rust
fn main() {
    println!("Hello World!");
}
```

:::

Вывод:

Код Hello World! на Python.

python
print("Hello World!")

Красивые уведомления ​

Пример:

markdown
::: info
Это информационный блок.
:::

::: tip
Это совет.
:::

::: warning
это предупреждение об ошибке.
:::

::: danger
Это предупреждение об опасности
:::

::: details
Это блок сведений.
:::

Вывод:

Информация

Это информационный блок.

Подсказка

Это совет.

Внимание

это предупреждение об ошибке.

Осторожно

Это предупреждение об опасности.

Подробнее

Это блок сведений.

Уведомления с произвольными заголовками ​

Пример:

markdown
::: info Произвольный заголовок
Это информационный блок с произвольным заголовков.
:::

::: danger Опасно
Это предупреждение об опасности.
:::

::: details Нажмите для отображения кода

```js
console.log('Привет, VitePress!')
```

:::

Вывод:

Произвольный заголовок

Это информационный блок с произвольным заголовков.

Опасно

Это предупреждение об опасности.

Нажмите для отображения кода
js
console.log('Привет, VitePress!')

Анимированное выделение текста ​

Пример:

markdown
<mark>Это сообщение несёт глубокий посыл!</mark>

Вывод:

Это сообщение несёт глубокий посыл!

Авторы

The avatar of contributor named as Fiersik Kouji Fiersik Kouji
The avatar of contributor named as Давид Султаниязов Давид Султаниязов
The avatar of contributor named as fiersik fiersik
The avatar of contributor named as Хачатур Тоникян Хачатур Тоникян
The avatar of contributor named as h3try h3try
The avatar of contributor named as Семён Фомченков Семён ФомченковThe avatar of contributor named as Олег Щавелев Олег Щавелев

История изменений