Возможности VitePress
VitePress поставляется со встроенными расширениями Markdown.
Якоря заголовка
К заголовкам автоматически применяются якорные ссылки. Тег генерируется автоматически. Он создаётся путём транслитерации из содержимого заголовка и обрезается до 25 символов.
Пользовательские якоря
Чтобы указать пользовательский тег якоря для заголовка, а не использовать автоматически сгенерированный, добавьте суффикс к заголовку:
# Использование пользовательских якорей {#мой-якорь}Это позволит вам ссылаться на заголовок как #мой-якорь вместо стандартного #использование-пользовательских-якорей.
Метаданные
Метаданные YAML поддерживаются платформой VitePress:
---
title: Веду блог как хакер
lang: ru-RU
---Эти данные будут доступны на указанной странице, а также во всех пользовательских компонентах, которые вы используете.
Более подробную информацию вы найдёте в разделе Метаданные.
Эмодзи 🎉
Разметка
:tada: :100:Результат
🎉 💯
Оглавление
Разметка
[[toc]]Результат
Уведомления VitePress
Пользовательские контейнеры можно определить по их типам, заголовкам и содержимому.
Заголовок по умолчанию
Разметка
::: info
Это информация.
:::
::: tip
Это совет.
:::
::: warning
Это предупреждение.
:::
::: danger
Это сигнал об опасности.
:::
::: details
Это блок-спойлер.
:::Результат
Информация
Это информация.
Подсказка
Это совет.
Внимание
Это предупреждение.
Осторожно
Это уведомление об опасности.
Подробнее
Это блок-спойлер.
Пользовательский заголовок
Вы можете задать собственный заголовок, добавив текст сразу после «типа» контейнера.
Разметка
::: danger СТОП
Опасная зона, остановитесь
:::
::: details Нажмите на меня, чтобы просмотреть код
```js
console.log('Привет, VitePress!')
```
:::Результат
СТОП
Опасная зона, остановитесь
Нажмите на меня, чтобы просмотреть код
console.log('Привет, VitePress!')Блоки кода
VitePress использует Shiki для выделения синтаксиса языка в блоках кода Markdown с помощью цветного текста. Shiki поддерживает широкий спектр языков программирования. Всё, что вам нужно сделать, это добавить правильный псевдоним языка к начальным значкам блока кода:
Разметка
```js
export default {
name: 'MyComponent',
// ...
}
``````html
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
```Результат
export default {
name: 'MyComponent'
// ...
}<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>Список всех поддерживаемых языков.
Вы также можете настроить тему подсветки синтаксиса в конфигурации проекта. Более подробную информацию см. в секции markdown.
Выделение строк в блоках кода
Разметка
```js{4}
export default {
data () {
return {
msg: 'Подсвечено!'
}
}
}
```Результат
export default {
data () {
return {
msg: 'Подсвечено!'
}
}
}Помимо одной строки, вы можете указать несколько отдельных строк, диапазонов или и то, и другое:
- Диапазоны строк, например:
{5-8},{3-10},{10-17} - Несколько одиночных строк, например:
{4,7,9} - Диапазоны строк и отдельные строки, например:
{4,7-13,16,23-27,40}
Разметка
```js{1,4,6-8}
export default { // Подсвечено
data () {
return {
msg: `Подсвечено!
Эта строка не выделена,
но эта и две следующих - да.`,
motd: 'VitePress - это потрясающе',
lorem: 'ipsum'
}
}
}
```Результат
export default { // Подсвечено
data () {
return {
msg: `Подсвечено!
Эта строка не выделена,
но эта и две следующих - да.`,
motd: 'VitePress - это потрясающе',
lorem: 'ipsum'
}
}
}Кроме того, можно выделять непосредственно в строке, используя комментарий // [!code highlight].
Разметка
```js
export default {
data () {
return {
msg: 'Подсвечено!' // [!code highlight]
}
}
}
```Результат
export default {
data() {
return {
msg: 'Подсвечено!'
}
}
}Фокус в блоках кода
Добавление комментария // [!code focus] к строке сфокусирует её и размоет остальные части кода.
Кроме того, вы можете задать количество строк для фокусировки с помощью // [!code focus:<lines>].
Разметка
```js
export default {
data () {
return {
msg: 'Фокус!' // [!code focus]
}
}
}
```Результат
export default {
data() {
return {
msg: 'Фокус!'
}
}
}Подсветка различий в блоках кода
Добавление в строку комментариев // [!code --] или // [!code ++] создаст diff этой строки, сохраняя цвета блока кода.
Разметка
```js
export default {
data () {
return {
msg: 'Удалено' // [!code --]
msg: 'Добавлено' // [!code ++]
}
}
}
```Результат
export default {
data () {
return {
msg: 'Удалено'
msg: 'Добавлено'
}
}
}Ошибки и предупреждения в блоках кода
Добавление в строку комментариев // [!code warning] или // [!code error] окрасит её соответствующим образом.
Разметка
```js
export default {
data () {
return {
msg: 'Ошибка', // [!code error]
msg: 'Предупреждение' // [!code warning]
}
}
}
```Результат
export default {
data() {
return {
msg: 'Ошибка',
msg: 'Предупреждение'
}
}
}Номера строк
Вы можете добавить метки :line-numbers / :no-line-numbers в ваши ограждённые блоки кода, чтобы переопределить значение, установленное в конфиге.
Вы также можете настроить номер начальной строки, добавив = после :line-numbers. Например, :line-numbers=2 означает, что номера строк в блоках кода будут начинаться с 2.
Разметка
```ts {1}
// опция line-numbers по умолчанию отключена
const line2 = 'Строка 2'
const line3 = 'Строка 3'
```
```ts:line-numbers {1}
// опция line-numbers включена
const line2 = 'Строка 2'
const line3 = 'Строка 3'
```
```ts:line-numbers=2 {1}
// опция line-numbers включена, нумерация начинается с 2
const line3 = 'Строка 3'
const line4 = 'Строка 4'
```Результат
// опция line-numbers по умолчанию отключена
const line2 = 'Строка 2'
const line3 = 'Строка 3'// опция line-numbers включена
const line2 = 'Строка 2'
const line3 = 'Строка 3'// опция line-numbers включена, нумерация начинается с 2
const line3 = 'Строка 3'
const line4 = 'Строка 4'Группировка блоков кода
Вы можете сгруппировать несколько блоков кода для отображения содержимого во вкладках:
Разметка
::: code-group
```js [config.js]
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
}
export default config
```
```ts [config.ts]
import type { UserConfig } from 'vitepress'
const config: UserConfig = {
// ...
}
export default config
```
:::Результат
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
}
export default configimport type { UserConfig } from 'vitepress'
const config: UserConfig = {
// ...
}
export default configГруппировка блоков текста
Вы можете сгруппировать несколько блоков текста для отображения содержимого во вкладках:
Разметка
:::tabs
== tab a
a content
== tab b
b content
:::
:::tabs
== tab a
a content 2
== tab b
b content 2
:::Результат
a content
a content 2
Включить содержание одного файла в другой с разметкой Markdown
Вы можете включить файл Markdown в другой файл Markdown, даже вложенный. Например, вы можете включить относительный файл Markdown следующим образом:
Разметка
<!--@include: \@/.parts/blocks/constructing.md\-->Результат
🚧 В разработке
К сожалению, эта страница ещё находится в разработке. Если вы не нашли нужную информацию, вы можете воспользоваться меню навигации на боковой панели, чтобы начать чтение.
Импорт фрагментов кода
Вы можете импортировать фрагменты кода из существующих файлов, используя следующий синтаксис:
<<< @/filepathБейджи
С помощью бейджей удобно добавлять статус к заголовкам или иным строковым элементам. Например, может быть полезно указать тип раздела или поддерживаемую версию.
Использование в заголовках
Вы можете использовать компонент Badge, который доступен глобально.
Разметка
### Заголовок <Badge type="info" text="по умолчанию" />
### Заголовок <Badge type="tip" text="^1.9.0" />
### Заголовок <Badge type="warning" text="beta" />
### Заголовок <Badge type="danger" text="осторожно" />Результат