css预览-Vue3显示Markdown内容

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

原因

我想建立一个个人网站，然后在网站上展示个人信息以及平时学习或者使用框架的一些内容。 所以需要一个将markdown内容转换到页面上进行展示（类似github或者各大博客网站）。 个人网站是vue3，由vite.first重构的

在npm上搜索markdown找到对应的框架，尝试了几个，比如：

标记下载器

这是搜索markdown后首先想到的。 打开看了一下webpack2+css预览，我个人没有尝试。

vue-markdown

这个框架只支持首页上比较完整的东西，最后一个版本已经是四年前了。 恐怕不支持vue3，所以没有尝试。

降价它

与前两者相比，该框架首先具有

Livedemo好评：thumbup：，但是看完livedemo后，我个人不太喜欢这种风格，所以就将其纳入了替代框架中，然后再看下一个。

Markdown-it-vue

这个框架看起来和之前的框架类似，首先是一个

恶魔线，不过实际的诠释风格和上一部差不多。

v-md-编辑器

这个框架是打开一看最舒服的一个。 除了在线演示之外，还有英文文档，深受好评。 其次，文档中明确描述了支持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页面配置完成后，就可以在对应页面使用

	


    export default{
        data() {
            return {
                str: '# 标题'
            }
        }
    }

这样的md预览页面就算完成了css预览，就可以开始自由写作了。

扩展一些插件

由于个人写markdown的工具是typora，所以我选择了typora支持的一些插件

表情符号

虽然简单的文字看起来很单调，但是如果在里面穿插一些: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());

美人鱼（流程图等）

首先必须在根目录的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());

疗效如下：

代码行号

具有代码行数显示，代码更清晰。

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风格的疗效如下：

快速复制代码

这个功能极其不实用，方便自己查询指南，也方便别人。

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());

实际使用效果如下，鼠标放置在代码区域，会出现复制按钮：

以上插件代码的总和

<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')