阅读 756

Vue3展示Markdown内容

起因

想要搭建一个个人网站,然后在网站上展示个人信息以及平时学习或者使用框架的一些内容。所以需要一个能够将markdown内容转化到页面上展示(就类似于github或者各大博客网站)。个人网站是vue3,vite构建。首先是在

npm上搜索markdown去找寻对应框架,试过其中几个,例如:

markdown-loader

搜索markdown首先出来的就是这个,然后打开看了下webpack2+,个人就没有去试用。

vue-markdown

这个框架单单看首页支持的东西比较全,但是上个版本在四年前,我怕它不支持vue3,所以也没有试用。

markdown-it

这个框架相较于前两个首先有个

live demo好评:thumbsup:,但是看了下live demo,个人不是很喜欢这个风格,就列入备选框架中,然后接着看下一个。

markdown-it-vue

这个框架其实跟之前那个框架差不多,上来也首先是一个

Demo online,但是实际展现风格跟之前那个差不多。

v-md-editor

这个框架打开看到则是最舒服的一个,上来不仅有个线上demo,还有中文文档,好评。其次是文档中明确描写了支持vue3,那就决定是他了。

开始

要在Vue3中使用,首先安装Vue3的依赖包。

# 使用 npm
npm i @kangc/v-md-editor@next -S

# 使用 yarn
yarn add @kangc/v-md-editor@next
复制代码

然后官方给出的默认例子是编辑器,但是我们这边作为一个展现数据的页面,并不需要编辑功能,所以我们需要在main.js/main.ts中做一些更改

// Vue3必备
import { createApp } from 'vue'
// 预览组件以及样式
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// VuePress主题以及样式(这里也可以选择github主题)
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';
// 代码高亮
import 'prismjs/components/prism-json';
// 选择使用主题
VMdPreview.use(vuepressTheme, {
  Prism,
});

// Vue3必备
const app = createApp(App)
// 引入v-md-editor预览组件
app.use(VMdPreview);
// Vue3必备
app.mount('#app')

复制代码

main.js/main.ts页面配置完成后,即可在对应页面使用

<template>
	<v-md-preview :text="str"></v-md-preview>
</template>

<script>
    export default{
        data() {
            return {
                str: '# 标题'
            }
        }
    }
</script>
复制代码

这样一个md预览页面就算是完成了,可以尽情的开始书写了。

扩展部分插件

因为个人平常写markdown的工具是typora,所以选用了部分typora支持的插件

emoji

单纯的文字看着其实很单调,如果其中穿插一些表情:grinning:,那将绝杀: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());
复制代码

Mermaid(流程图等)

首先要在根目录的index.html中引入

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
复制代码

其次在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());
复制代码

使用效果如下:

image-20210616154052433

代码行号

有了代码行号显示,看代码都更清晰了。

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// 显示代码行数
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';

VMdPreview.use(createLineNumbertPlugin());
复制代码

VuePress风格的效果如下:

image-20210616154531243

快速复制代码

这个功能不可谓不实用,方便自己查询手册也方便他人。

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// 快速复制代码
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());
复制代码
实际使用效果如下,鼠标放置在代码区域,会出现复制按钮:
复制代码

image-20210616154841411

上述插件代码总和

<!--index.html-->
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
复制代码
// 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支持流程图
VMdPreview.use(createMermaidPlugin())
// markdown支持显示代码行数
VMdPreview.use(createLineNumbertPlugin())
// markdown支持代码快速复制
VMdPreview.use(createCopyCodePlugin());
// markdown支持emoji
VMdPreview.use(createEmojiPlugin());

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

app.mount('#app')
复制代码
文章分类
前端
文章标签