HTML 是超文本标记语言的缩写，可能是当今网络上使用最多的标记语言。Markdown 在我们程序界也是一个必备的技能。我们可以使用 makrdown 来渲染文本，它实际上是一种更快的写作方式，因为它学习成本很低，不需要掌握很多知识就可以开始。如果你的想写博客，甚至想作为技术作家写作时，Markdown 是你首先的写作工具。
本文主要介绍如果在 Vue 中使用 Markdown，废话说了很多了，我们就这开始安排。
为什么使用 Marked.js 库
Vue 没有像 React 那么多 MD 的插件。如 markdown-it、Remark.js、marked.js。希望在未来，会有更多好用的库来支持我们的 Vue ，经过一番调研，我选择了marked.js，因为它的星星最多，bug 少。
创建项目
我们使用 vue-cli 来创建项目，运行如下命令：
vue create marked-example
这里我们选择最简单的 Vue2 模板创建项目，创建完后的项目结构如下：
+-- src/i | +-- assets/ | +-- components | +-- HelloWorld.vue | +-- App.vue | +-- main.js
现在我们在 MD 语法写个标题：
<template>
<div>
{{ markdown }}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
markdown: " # hello world ",
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
全局引入
当我们不想每个组件都 引入一次时，就可以声明成全局的。怎么做？
实现 marked 库全局化的方法是使用 Mixins。Mixins 只是 Vue 组件中可重复使用的功能的一个分布。
重构一下我们的 main.js 代码，如下所示：
import {createApp} from 'vue';
import App from './App.vue';
import marked from 'marked';
const markedMixin = {
methods: {
md: function (input) {
return marked (input);
},
},
};
createApp(App).mixin(markedMixin).mount('#app')
当想转换 md 时，直接在组件中调用 this.md 就可以将 md 转成 html 了。