Возможности VitePress
VitePress поставляется со встроенными расширениями Markdown.
Якоря заголовка
К заголовкам автоматически применяются якорные ссылки. Тег генерируется автоматически. Он создаётся путём транслитерации из содержимого заголовка и обрезается до 25 символов.
Пользовательские якоря
Чтобы указать пользовательский якорь для заголовка, а не использовать автоматически сгенерированный, добавьте суффикс к заголовку:
# Использование пользовательских якорей {#мой-якорь}Это позволит ссылаться на заголовок по пользовательскому якорю #мой-якорь вместо стандартного #использование-пользовательских-якорей.
Метаданные
Метаданные YAML поддерживаются платформой VitePress:
---
title: Веду блог как хакер
lang: ru-RU
---Эти данные будут доступны на указанной странице, а также во всех пользовательских компонентах, которые используются в базе знаний.
Более подробную информацию можно найти в разделе «Метаданные».
Эмодзи 🎉
Разметка
:tada: :100:Результат
🎉 💯
Оглавление
Разметка
[[toc]]Результат
Информационный блок
Пользовательские блоки можно определить по их типам, заголовкам и содержимому.
Заголовок по умолчанию
Разметка
::: info
Это информация.
:::
::: tip
Это совет.
:::
::: warning
Это предупреждение.
:::
::: danger
Это сигнал об опасности.
:::
::: details
Это блок-спойлер.
:::Результат
NOTE
Это информация.
TIPS
Это совет.
WARNING
Это предупреждение.
CAUTION
Это уведомление об опасности.
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>Список всех поддерживаемых языков.
Также можно настроить пользовательскую тему подсветки синтаксиса в конфигурации проекта. Более подробную информацию смотрите в документации VitePress в секции «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:<строки>].
Разметка
```js
export default {
data () {
return {
msg: 'Фокус!' // [!code focus]
}
}
}
```Результат
export default {
data() {
return {
msg: 'Фокус!'
}
}
}Подсветка различий в блоках кода
Добавление в строку комментариев // [!code --] или // [!code ++] создаст подсветку в формате Git 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="осторожно" />Результат
Заголовок по умолчанию
Заголовок ^1.9.0
Заголовок beta
Заголовок осторожно
Авторы
x1z53
Олег Щавелев