vue3-markdown

Vue 3 markodwn

This is a vue component of markdown editor based on micromark development, which mainly implements the following features.

• Multi-language support (Currently only support zh and en)
• Black and white theme preview
• Support KaTex formula input
• Custom image upload interface
• Integrated github markdown and KaTex styles

Preview

Live demo

Stackblitz

Installation

npm install vue3-markdown

Usage

<script setup>
import { ref } from 'vue'
import { VMarkdownEditor } from 'vue3-markdown'
import 'vue3-markdown/dist/vue3-markdown.css'

const content = ref('')
const handleUpload = (file) => {
  console.log(file)
  return 'https://i.postimg.cc/52qCzTVw/pngwing-com.png'
}
</script>

<template>
  <VMarkdownEditor
    v-model="content"
    locale="en"
    :upload-action="handleUpload"
  />
</template>

or just for view

<script setup>
import { ref } from 'vue'
import { VMarkdownView } from 'vue3-markdown'
import 'vue3-markdown/dist/vue3-markdown.css'

const content = ref('## One of the world's most popular markdown editors')
const mode = ref('light')
</script>

<template>
  <VMarkdownView
    :mode="mode"
    :content="content"
  ></VMarkdownView>
</template>

Publish

npm run build
# update version in `package.json`
# adduser for registry.npmjs.org if not add yet
npm adduser --registry=https://registry.npmjs.org
npm publish --registry=https://registry.npmjs.org