Vite Plugin Markdown Preview screenshot

Vite Plugin Markdown Preview

Author Avatar Theme by Jaskang
Updated: 28 Mar 2024
180 Stars

在 markdown 中书写 vue demo,支持 vite/vitepress。

Categories

Overview:

The vite-plugin-markdown-preview is a markdown code block preview plugin based on Vite/Vitepress. It replaces vue code blocks in markdown documents with vue components that have the preview tag.

Features:

  • Preview Vue Code Blocks: Replaces vue code blocks in markdown with vue components.
  • Installation Guide: Provides clear instructions on how to install and configure the plugin.
  • Custom Preview Components: Allows users to customize the appearance of preview components by registering a CodePreview component.

Installation:

To install the vite-plugin-markdown-preview, follow these steps:

  1. Install the necessary dependencies:

    npm install vite-plugin-markdown-preview unplugin-vue-markdown
    
  2. Configure the plugin in your Vitepress project by updating the .vitepress/config.ts file.

  3. Use the plugin in your Vite project by specifying it in the dependencies.

Summary:

The vite-plugin-markdown-preview is a useful tool for Vite/Vitepress users to enhance their markdown documents by replacing vue code blocks with vue components for easy previewing. Additionally, it offers the flexibility of customizing the preview components to meet specific design requirements.