# 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

![demo](https://i.postimg.cc/G2CzjS3F/vme.png)

## [Live demo](https://vue-md.netlify.app/)

## [Stackblitz](https://stackblitz.com/edit/vite-iggejl?file=package.json)

## Installation

```sh
npm install vue3-markdown
```

## Usage

```js
<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

```js
<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

```sh
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
```