Перейти к основному содержанию

Markdown

Около 2 минНачало работыНачало работыMarkdown

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

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

Введение в Markdown

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

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

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

Инфо

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

Расширение Markdown

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

Улучшение VuePress

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

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

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

Используя vuepress-plugin-md-enhanceopen in new window, тема расширяет синтаксис 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

Вкладки кода

npm
npm i -D vuepress-theme-hope

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

19th H2O

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

Я по центру

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

Атрибуты

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

Сноска

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

Выделение

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

Список задач

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

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

Диаграмма

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

Echarts

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

Блок-схема

Mermaid

Tex

rωr(yωω)=(yωω){(logy)r+i=1r(1)ir(ri+1)(logy)riωi} \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. Это содержание сноски ↩︎