The cause of

Want to build a personal website, and then on the website to display personal information and usually study or use the framework of some content. So you need something that can take markdown content and put it on a page (similar to Github or other blogging sites). Personal website is vue3, vite built. The first is in

Search markdown on NPM to find the corresponding framework. Try a few of them, such as:

  • markdown-loader
  • vue-markdown
  • markdown-it
  • markdown-it-vue
  • v-md-editor

markdown-loader

This is the first thing that came up when I searched Markdown, and then I opened Webpack2 +, but I didn’t try it.

vue-markdown

This framework only supports the home page, but the last version is four years ago, I am afraid it does not support VUe3, so I did not try it.

markdown-it

This framework has a first one compared to the first two

Thumbsup: but after looking at the Live demo, I didn’t like the style very much, so I included it in the alternative framework and moved on to the next one.

markdown-it-vue

This frame is actually similar to the previous frame, and it’s the first one up here

Demo online, but the actual presentation style is similar to the previous one.

v-md-editor

This framework open to see is the most comfortable one, up not only has an online demo, there are Chinese documents, praise. The second is that vuE3 support is explicitly described in the documentation, so it’s his turn.

start

To use Vue3, first install Vue3’s dependencies.

# use NPM
npm i @kangc/v-md-editor@next -S

# to use yarn
yarn add @kangc/v-md-editor@next
Copy the code

The official default example is the editor, but we don’t need the editing function as a data page, so we need to make some changes in main.js/main.ts

/ / Vue3 necessary
import { createApp } from 'vue'
// Preview components and styles
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// VuePress theme and style (github theme is also available here)
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

// Prism
import Prism from 'prismjs';
// Code highlights
import 'prismjs/components/prism-json';
// Select the theme to use
VMdPreview.use(vuepressTheme, {
  Prism,
});

/ / Vue3 necessary
const app = createApp(App)
// Introduce the V-MD-Editor preview component
app.use(VMdPreview);
/ / Vue3 necessary
app.mount('#app')

Copy the code

Js /main.ts can be used on the corresponding page

<template> <v-md-preview :text="str"></v-md-preview> </template> <script> export default{ data() { return { str: }}} </script>Copy the code

Now that an MD preview page is complete, feel free to start writing.

Extension part plug-in

Since I usually use Typora to write Markdown, I chose some plugins supported by Typora

emoji

Simple text is actually very monotonous, if interspersed with some expressions :grinning:, it will kill :heart:.

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// emoji
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';

VMdPreview.use(createEmojiPlugin());
Copy the code

Avi (Flowchart, etc.)

It is first introduced in the index.html of the root directory

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
Copy the code

Next, add it in main.js

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// mermaid
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn';
import '@kangc/v-md-editor/lib/plugins/mermaid/mermaid.css';

VMdPreview.use(createMermaidPlugin());
Copy the code

The use effect is as follows:

The line no.

With the code line number display, look at the code is more clear.

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// Displays the number of lines of code
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';

VMdPreview.use(createLineNumbertPlugin());
Copy the code

The VuePress style has the following effects:

Fast copy code

This function is not not practical, it is convenient to query the manual and convenient to others.

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// Copy code quickly
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

VMdPreview.use(createCopyCodePlugin());
Copy the code
When you place the mouse over the code area, the copy button appears:Copy the code

The sum of the above plug-in code

<! --index.html-->
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
Copy the code
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn';
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';

// Prism
import Prism from 'prismjs';
// highlight code
import 'prismjs/components/prism-json';

VMdPreview.use(vuepressTheme, {
  Prism,
});
// Markdown supports flowcharts
VMdPreview.use(createMermaidPlugin())
// Markdown supports displaying lines of code
VMdPreview.use(createLineNumbertPlugin())
// Markdown supports fast code copying
VMdPreview.use(createCopyCodePlugin());
// Markdown supports emoji
VMdPreview.use(createEmojiPlugin());

const app = createApp(App)
app.use(VMdPreview);

app.mount('#app')
Copy the code