• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JasKang/vite-plugin-md-preview: markdown vue code preview

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

JasKang/vite-plugin-md-preview

开源软件地址(OpenSource Url):

https://github.com/JasKang/vite-plugin-md-preview

开源编程语言(OpenSource Language):

TypeScript 55.6%

开源软件介绍(OpenSource Introduction):

Version Version

vite-plugin-md-preview

Markdown code block preview plugin, write component demo in markdown using ```.

This plugin needs to be used in combination with vite-plugin-md to provide vue block preview capability for markdown.

Example: https://vite-plugin-md-preview.vercel.app

中文文档

Breaking Change

Rename former vite-plugin-vuedoc to vite-plugin-md-preview Removed markdown parsing capability and used it in combination with vite-plugin-md.

Features

  • Markdown Vue code block preview
  • Custom preview component, custom display style
  • Hot update support

Use

Installation

npm i vite-plugin-md vite-plugin-md-preview -D
# or
yarn add vite-plugin-md vite-plugin-md-preview -D

vite.config.ts

import Vue from '@vitejs/plugin-vue'
import shiki from 'markdown-it-shiki'
import Markdown from 'vite-plugin-md'
import MarkdownPreview, { transformer } from 'vite-plugin-md-preview'

export default {
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/], // Need to include .md files
    }),
    Markdown({
      transforms: {
        before: transformer, // -> 1. add transformer to vite-plugin-md
      },
      markdownItSetup(md) {
        md.use(shiki, { theme: 'github-light' }) // Support code highlighting
      },
    }),
    MarkdownPreview(), // -> 2. Add plugins
  ],
}

Register the VueCode component

The plugin does not contain a concrete implementation of the preview component, developers need to implement VueCode and register it global.

This component have a slot and receives a prop named source

Example:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    source: { type: String, default: '' },
  },
})
</script>
<template>
  <div class="demo">
    <div class="demo__preview">
      <slot></slot>
    </div>
    <div class="demo__source" v-html="decodeURIComponent(source)"></div>
  </div>
</template>

Register as a global component

const app = createApp(App)

app.component('VueCode', VueCode) // 必须的
app.mount('#app')

import the markdown file

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from './README.md'

export default {
  components: {
    HelloWorld,
  },
}
</script>

Using code blocks in markdown files

带有 preview 标记的 vue 代码块支持实时预览

# This is a markdown file

## Below is the code with preview capability

```vue preview
<template>
  <div>
    <button @click="click">button</button>
  </div>
</template>
<script setup>
const click = () => {
  alert('a')
}
</script>
```

Highlight

vite-plugin-md-preview has shiki built in to support code highlighting.

Note that this option does not handle other non-code highlighting in markdown, and can be made consistent by adding the markdown-it-shiki plugin to vite-plugin-md.

import Vue from '@vitejs/plugin-vue'
import shiki from 'markdown-it-shiki'
import Markdown from 'vite-plugin-md'
import MarkdownPreview, { transformer } from 'vite-plugin-md-preview'

export default {
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/], // Need to include .md files
    }),
    Markdown({
      transforms: {
        before: transformer,
      },
      markdownItUses: [[shiki, { theme: 'github-light' }]], // markdown code highlighting
    }),
    MarkdownPreview({
      shiki: { theme: 'github-light' }, // Code highlighting
    }),
  ],
}

License

MIT License © 2020-PRESENT Jaskang




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap