Initial use

The first step is to follow the md tutorial in Bytemd. I’m using the VUE version here.

First you need to create or have a VUE project (I’m a newly created VUE project)

Structure to understand

It is mainly divided into edit and view two pages

  • Editor is the Editor
  • View is the View

Install bytemd

npm install @bytemd/vue
Copy the code

Create a new Test page

<template> <Editor :value="value" :plugins="plugins" @change="handleChange" /> </template> <script import 'bytemd/dist/index.min.css' import { Editor} from '@bytemd/vue' import gfm from '@bytemd/plugin-gfm' import highlight from "@bytemd/plugin-highlight-ssr"; GFM (), highlight(),] export default {name: "test", components: { Editor }, data() { return { value: '', plugins } }, methods: { handleChange(v) { this.value = v }, }, } </script> <style scoped> </style>Copy the code

Modify the APP page

Start the project

Finally, it was time to start the project

This is just a simple operation up, you need to slowly explore the optimization