# Расширения Markdown

# Якоря заголовков

Заголовки автоматически получают ссылки-якоря. Отображение якорей может быть настроено с помощью опции markdown.anchor.

# Ссылки

# Внутренние ссылки

Внутренние ссылки, оканчивающиеся на .md или .html, будут преобразованы в компонент <router-link> для SPA-навигации.

Каждый под-каталог в вашем статичном сайте должен содержать README.md. Он будет автоматически сконвертирован в index.html.

Если вы хотите добавить ссылку на другой markdown-файл в каталоге, то не забывайте:

1. Добавлять его с помощью .html или .md
2. Убедиться, что написали в правильном регистре, так как путь чувствителен к нему

# Пример

Для следующей структуры каталогов:

.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ three.md
   └─ four.md

[Главная](/) <!-- Отправит пользователя в корневой README.md -->
[foo](/foo/) <!-- Отправит пользователя index.html в каталоге foo -->
[foo с якорем на heading](/foo/#heading) <!-- Отправит к якорю заголовка README.md каталога foo -->
[foo - one](/foo/one.html) <!-- Вы можете добавлять .html -->
[foo - two](/foo/two.md) <!-- Или вы можете добавлять .md -->

# Внешние ссылки

Внешние ссылки автоматически получают target="_blank" rel="noopener noreferrer":

• vuejs.org
• VuePress on GitHub

Вы можете настроить атрибуты, добавляемые к внешним ссылкам, с помощью опции config.markdown.externalLinks.

# Front Matter

YAML front matter поддерживается из коробки:

---
title: Blogging Like a Hacker
lang: en-US
---

Данные будут доступны на странице, а также во всех пользовательских и компонентах темы через свойство $page.

title и lang будут автоматически установлены на текущей странице. Вы можете указать дополнительные meta-теги которые требуется добавить на этой странице:

---
meta:
  - name: description
    content: привет
  - name: keywords
    content: супер пупер SEO
---

# Альтернативные форматы Front Matter

Дополнительно VuePress поддерживает JSON или TOML front matter.

JSON front matter необходимо начинать и заканчивать фигурными скобками:

---
{
  "title": "Blogging Like a Hacker",
  "lang": "en-US"
}
---

TOML front matter необходимо явно определять как TOML:

---toml
title = "Blogging Like a Hacker"
lang = "en-US"
---

# Таблицы в стиле GitHub

Входные данные

| Таблицы          | Это                       | Круто |
| ---------------- |:-------------------------:| -----:|
| третья колонка   | выровнена по правому краю | $1600 |
| вторая колонка   | выровнена по центру       |   $12 |
| полосатые строки | приятно смотрятся         |    $1 |

Результат

# Эмодзи 🎉

Входные данные

:tada: :100:

Результат

🎉 💯

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

# Содержание

Входные данные

[[toc]]

Результат

Рендеринг содержания страницы можно конфигурировать с помощью опции markdown.toc.

# Пользовательские блоки

Входные данные

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

::: warning
Это предупреждение
:::

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

Результат

Вы также можете указать заголовок блока:

::: danger СТОП
Опасная зона, возвращайтесь назад
:::

# Подсветка строк в блоке кода

Входные данные

``` js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

Результат

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

# Нумерация строк

Вы можете включить нумерацию строк в каждом блоке кода с помощью опции:

module.exports = {
  markdown: {
    lineNumbers: true
  }
}  

• Демо:

# Импорт фрагментов кода Бета0.10.1+

Вы можете импортировать фрагменты кода из существующих файлов следующим образом:

<<< @/filepath

Также поддерживается подсветка строк:

<<< @/filepath{highlightLines} 

Входные данные

<<< @/test/markdown/fragments/snippet.js{2}

Результат

export default function () {
  // ..
}

# Продвинутая конфигурация

VuePress использует markdown-it для рендеринга markdown. Многие из расширений выше реализованы через пользовательские плагины. Вы также можете настроить экземпляр markdown-it с помощью опции markdown в .vuepress/config.js:

module.exports = {
  markdown: {
    // настройки для markdown-it-anchor
    anchor: { permalink: false },
    // настройки для markdown-it-toc
    toc: { includeLevel: [1, 2] },
    config: md => {
      // используем больше markdown-it плагинов!
      md.use(require('markdown-it-xxx'))
    }
  }
}