5 способов предварительного просмотра Markdown в VS Code: подробное руководство

Markdown – это облегченный язык разметки, обычно используемый для создания форматированных текстовых документов. Он широко используется в различных областях, включая разработку программного обеспечения, техническую документацию и ведение блогов. Visual Studio Code (VS Code) — популярный редактор кода, обеспечивающий отличную поддержку Markdown. В этой статье мы рассмотрим различные методы предварительного просмотра файлов Markdown в VS Code, что позволит вам увидеть визуализированный результат в режиме реального времени. Мы также предоставим примеры кода для иллюстрации каждого метода.

Метод 1: встроенный предварительный просмотр
VS Code имеет встроенную функцию предварительного просмотра Markdown, которая позволяет просматривать обработанный Markdown рядом с исходным кодом. Чтобы использовать эту функцию, выполните следующие действия:

  1. Откройте файл Markdown в VS Code.
  2. Нажмите Ctrl + K, затем Vв Windows/Linux или Cmd + K, а затем Vв macOS..
  3. Предварительный просмотр Markdown появится на отдельной панели.

Пример кода:

# Heading 1
## Heading 2
### Heading 3
- List item 1
- List item 2
- List item 3
Bold text
*Italic text*
[Link](https://example.com)

Метод 2: Расширение Markdown All in One
Расширение Markdown All in One — это мощный инструмент, который расширяет возможности редактирования Markdown в VS Code. Он предоставляет функцию предварительного просмотра, которая позволяет вам видеть обработанный Markdown прямо в редакторе. Вот как его использовать:

  1. Установите расширение «Markdown All in One» с торговой площадки VS Code.
  2. Откройте файл Markdown в VS Code.
  3. Нажмите правой кнопкой мыши внутри редактора и выберите «Markdown: Open Preview» в контекстном меню.

Пример кода:

# Heading 1
## Heading 2
### Heading 3
- List item 1
- List item 2
- List item 3
Bold text
*Italic text*
[Link](https://example.com)

Метод 3: Расширенное расширение Markdown Preview
Расширение Markdown Preview Enhanced — еще один популярный выбор для предварительного просмотра файлов Markdown в VS Code. Он предлагает широкий спектр функций, включая предварительный просмотр в реальном времени, оглавление и поддержку математических уравнений. Вот как его использовать:

  1. Установите расширение Markdown Preview Enhanced с торговой площадки VS Code.
  2. Откройте файл Markdown в VS Code.
  3. Нажмите Ctrl + Shift + Pв Windows/Linux или Cmd + Shift + Pв macOS, чтобы открыть палитру команд.
  4. Найдите «Расширенный предварительный просмотр Markdown: открыть предварительный просмотр сбоку» и выберите его.

Пример кода:

# Heading 1
## Heading 2
### Heading 3
- List item 1
- List item 2
- List item 3
Bold text
*Italic text*
[Link](https://example.com)

Метод 4: расширение Live Server
Хотя расширение Live Server в первую очередь предназначено для предварительного просмотра HTML, его также можно использовать для предварительного просмотра файлов Markdown. Он запускает локальный сервер и автоматически обновляет предварительный просмотр всякий раз, когда вы сохраняете файл Markdown. Выполните следующие действия:

  1. Установите расширение Live Server из магазина VS Code.
  2. Откройте файл Markdown в VS Code.
  3. Щелкните правой кнопкой мыши внутри редактора и выберите «Открыть с помощью Live Server» в контекстном меню.

Пример кода:

# Heading 1
## Heading 2
### Heading 3
- List item 1
- List item 2
- List item 3
Bold text
*Italic text*
[Link](https://example.com)

Метод 5: оформление GitHub для предварительного просмотра Markdown
Если вы предпочитаете внешний вид Markdown, отображаемый на GitHub, вы можете использовать расширение «Стилизация для предварительного просмотра Markdown GitHub» в VS Code. Он применяет стили CSS GitHub к предварительному просмотру Markdown, обеспечивая аналогичный опыт рендеринга. Вот как его использовать:

  1. Установите расширение Markdown Preview GitHub Styling из магазина VS Code.
  2. Откройте файл Markdown в VS Code.
  3. Щелкните правой кнопкой мыши внутри редактора и выберите «Предварительный просмотр Markdown GitHub Styling» в контекстном меню.

Пример кода:

# Heading 1
## Heading 2
### Heading 3
- List item 1
- List item 2
- List item 3
Bold text
*Italic text*
[Link](https://example.com)

В этой статье мы рассмотрели пять различных методов предварительного просмотра файлов Markdown в VS Code. Предпочитаете ли вы встроенный предварительный просмотр, расширенные расширения или индивидуальный стиль, существует множество вариантов, соответствующих вашим потребностям. Используя эти методы, вы можете эффективно создавать и визуализировать контент Markdown, обеспечивая удобство редактирования.