Markdown

VuePress в основном генерирует страницы из файлов Markdown. Таким образом, вы можете легко использовать его для создания документации или блогов.

Вы должны создавать и записывать файлы Markdown, чтобы VuePress мог преобразовывать их на разные страницы в соответствии со структурой файла.

Введение в Markdown

Если вы новичок и не знаете, как писать в Markdown, прочитайте Введение в Markdown и Демонстрация Markdown.

Конфигурация Markdown

VuePress вводит настройку для каждой страницы маркдауна с помощью Frontmatter.

Инфо

Frontmatter — важная концепция в VuePress. Если вы этого не знаете, вам нужно прочитать Введение в Frontmatter.

Расширение Markdown

Содержимое Markdown в VuePress будет анализироваться markdown-it, который поддерживает расширения синтаксиса через плагины markdown-it.

Улучшение VuePress

Чтобы обогатить содержимое документа, VuePress расширяет стандартный синтаксис Markdown.

Чтобы узнать об этом расширенном синтаксисе, смотрите Встроенные функции Markdown.

Улучшение темы

Используя vuepress-plugin-md-enhance, тема расширяет синтаксис Markdown и предоставляет более богатые функции записи.

Пользовательский контейнер

Безопасно используйте {{ variable }} в Markdown.

Кастомный заголовок

Пользовательский информационный контейнер с code, ссылка.

const a = 1;

Кастомный заголовок

Пользовательский контейнер совет

Кастомный заголовок

Пользовательский контейнер предупреждений

Кастомный заголовок

Пользовательский контейнер опасности

Кастомный заголовок

Пользовательский контейнер подробной информации

Код

::: v-pre

Safely use {{ variable }} in Markdown.

:::

::: info Custom Title

A custom information container

:::

::: tip Custom Title

A custom tip container

:::

::: warning Custom Title

A custom warning container

:::

::: caution Custom Title

A custom danger container

:::

::: details Custom Title

A custom details container

:::

• Посмотреть детали

Вкладки

apple

Apple

banana

Banana

orange

Orange

• Посмотреть детали

Вкладки кода

yarn

yarn add -D vuepress-theme-hope

npm

npm i -D vuepress-theme-hope

• Посмотреть детали

Верхний индекс и нижний индекс

19^th H₂O

• Посмотреть детали

Выравнивание

Я по центру

Я по правому краю

• Посмотреть детали

Атрибуты

Слово, имеющее идентификатор.

• Посмотреть детали

Сноска

Этот текст имеет сноску^[1].

• Посмотреть детали

Выделение

Вы можете выделить важные слова .

• Посмотреть детали

Список задач

• План А

• План Б

• Посмотреть детали

Улучшение изображения

Поддержка настройки цветовой схемы и размера

• Посмотреть детали

Диаграмма

Точечная диаграмма

• Посмотреть детали

Echarts

Линейный график

• Посмотреть детали

Блок-схема

• Посмотреть детали

Mermaid

• Посмотреть детали

Tex

$$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\}$$

• Посмотреть детали

Включение файлов

@include(../markdown/demo.snippet.md{9-13})

• Посмотреть детали

Демонстрация кода

Нормальная демонстрация

<h1>VuePress Theme Hope</h1>
<p>Is <span id="very">very</span> powerful!</p>

document.querySelector("#very").addEventListener("click", () => {
  alert("Very powerful!");
});

span {
  color: red;
}

• Посмотреть детали

Стилизация

Донат Mr.Hope на чашку кофе. Рекомендуется

• Посмотреть детали

Playground

TS demo

• Посмотреть детали

Vue Playground

Vue Playground

• Посмотреть детали

Презентация

• Посмотреть детали

---

1. Это содержание сноски ↩︎