vue3-markdown

Vue 3 markodwn

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

1. Multi-language support (Currently only support zh and en)
2. Black and white theme preview
3. Support KaTex formula input
4. Custom image upload interface
5. 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