如何在Vuejs中解析和渲染Markdown

Markdown是超文本标记语言的缩写，可能是当今网络上使用最多的标记语言。Markdown已经发展成为一种为网络用户简化标记的方式。你可以使用makrdown来渲染文本，而不需要牺牲质量，它实际上是一种更快的写作方式，因为它的重量很轻，你不需要学习很多东西就可以开始。通过本教程后，当你下次想创建博客文章或网站，甚至想作为技术作家写作时，Markdown可能就会变成你最喜欢的工具。

在本教程中，我们将探讨一些简单的基本步骤，这些步骤应该能帮助你在Vue项目中开始使用标记。

## 为什么使用Marked.js库

Vue没有像React那样有很多支持。例如markdown-it、Remark.js、marked.js。但希望在未来，应该会有更多的支持，经过大量的研究，我选择了marked.js，因为它有最多的星星，而且是零漏洞。marked.js不对HTML文档进行消毒（意味着它不能保证HTML文档免受跨站脚本（XSS）等攻击），因为该功能已被废弃，并且有漏洞，但是，它支持使用其他库来保证输出HTML的安全，如DOMPurify（推荐），sanitize-html或insane。

## 设置我们的Vue应用程序

在本节中，我们将使用Vue演示应用程序来演示如何在我们的Vue应用程序中安全地呈现标记。在我们深入了解标记上下文之前，让我们创建一个新项目并安装marked.js库。

**从CLI创建一个Vue项目**
-----------------

CLI是创建Vue项目的标准方式，尽管你也可以使用CDN（内容交付网络），但在本教程中，推荐使用CLI，因为它更方便用户使用。如果你没有安装Vue CLI，你可以使用下面的代码来安装Vue CLI。

```
sudo npm i -g @vue/cli
```
接下来，让我们来看看如何设置我们的Vue项目以及我们的文件结构应该是什么样子。要创建一个新的Vue项目，我们需要使用下面的代码
```
vue create marked-example
```
之后，我们会被提示选择如何创建我们的项目，要么使用Vue团队绘制的默认结构，要么手动选择我们的项目所需的功能。在本教程中，我们将手动创建我们的项目并选择我们的功能。设置好我们的项目后，我们的文件结构应该是这样的
```
+-- src/i
|   +-- assets/
|   +-- components
|       +-- HelloWorld.vue
|       +-- App.vue
|   +-- main.js
```
然后我们在本地启动我们的服务器，方法是
```
npm run serve
```
执行上述命令后，它应该给你一个链接，指向项目建立的地方。

现在我们的项目已经准备好了，让我们用markdown显示一个简单的文本标题。
```
<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>
```

基于上面的代码，我们已经创建了一个携带动态属性的数据入口点，尽管在我们的案例中，它携带的是一个字符串，我们希望在输出时显示为一个标题。当渲染时，绑定到markdown属性的字符串值并不是预期的结果，所以我们不想把这个输出显示为纯文本，而是想让它显示它应该代表的标题，因为 "#"标签在HTML中被用于标题，所以让我们看看如何在我们的Vue应用程序中实现这一点
<a href="http://guobacai.com/usr/uploads/2021/11/4262096831.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src="http://guobacai.com/usr/uploads/2021/11/4262096831.png"></a>

**设置Marked.js**
---------------

Marked或marked.js是一个低级别的编译器，帮助你将Markdowns转换成HTML。Markdown是一种简单的文本格式，被设计成非常容易阅读和书写。让我们把marked放到我们的Vue应用中。要将marked.js库安装到我们的Vue应用中，请使用下面的命令
```
npm install marked
```

之后，更有可能将该库导入项目，这样你就可以将其复制到下面，并将其添加到你的app.vue组件的脚本标签内。
```
import marked from 'marked';
```
渲染实时标记
让我们在数据输入下方创建一个计算属性，其功能是在我们的Vue应用程序中重新渲染标记

![](http://www.guobacai.com/usr/uploads/2021/11/4013268491.png)

```javascript
import marked from 'marked';
export default {
	name: 'App',
	data(){
		return {
			markdown:  "# Hello World",
		};
	},
	computed: {
		markdownToHtml(){
			return marked(this.markdown);
		}
	}
}
```

```css
#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;
}
```

对于涉及反应性数据的复杂逻辑，使用计算属性。也就是说，每当用户在文本框中输入一个文本时，它就会被传递到标记库中的标记函数中，该函数会将markdown编译成HTML，而计算属性会在它发生变化时立即将其重新呈现给我们的应用程序。

所以我们接下来要做的就是在我们的项目中渲染这个标记，在Vue中这样做是非常直接的，或者说是非常简单的。我们将把下面这行代码添加到我们的模板中，创建一个可以输入文本的文本框。记得我们提到过，文本将被传递给在计算属性中创建的函数。

```html
<textarea v-model="markdown">
```

这行代码只是简单地说明文本区应该跟踪markdown模型，所以每次有新的文本被输入，计算函数就会被运行，但让我们对它进行修改，这样我们就可以只把它绑定到计算函数上，而不是把它绑定到数据点和函数上。

让我们也给我们的模板添加一个div标签，就在文本区的下面，并添加属性[v-html](https://v3.vuejs.org/api/directives.html#v-html)，这只是一个Vue指令，当它收到一个文本时，它会将其渲染成HTML。

```html
<div v-html="markdownTohtml"></div>
```

上面这行代码只是说明被传入markdown的值应该被转换为html并显示在屏幕上，一旦它被保存，我们应该让它像HTML标题一样显示在屏幕上，而不是像上面第一个结果那样显示。我们还可以让你在你的Vue应用程序中使用一个文本区创建一个实时编辑器，所以当你写下文本区时，实时变化会立即发生
<a href="http://guobacai.com/usr/uploads/2021/11/49871812.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src="http://guobacai.com/usr/uploads/2021/11/49871812.png"></a>
几乎是我们需要的正确结果，比我们第一次得到的要好得多。
<a href="http://guobacai.com/usr/uploads/2021/11/3791982704.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src="http://guobacai.com/usr/uploads/2021/11/3791982704.png"></a>
所以上面的图片显示了一个文本区，它接受文本并立即渲染它们，而不需要写那么多的代码。

**为什么要进行全局导入**
--------------

这里的问题是，当你想使用一个库的时候，你不希望总是一次又一次地导入它。比方说，你有十个不同的组件文件，你不想每次想使用标记的库时都要把标记的库导入到这些组件中，让我们看看是否有办法可以绕过这个问题。

**如何在全局范围内导入标记的**
-----------------

我们在这里要做的就是把marked变成一个全局函数，这样做是非常直接的，可以在我们位于src/main.js的main.js中添加这个函数，实现marked库全局化的方法是使用Mixins。Mixins只是Vue组件中可重复使用的功能的一个分布。

让我们继续重构代码 进入你的main.js @ src/main.js文件并粘贴以下代码

```javascript
import marked from 'marked';
const markedMixin = {
	methods: {
		md: function (input) {
			return marked (input);
		},
	},
};

createApp(App).mixin(markedMixin).mount('#app')
```

要在任何一个组件中访问这个混合器，我们将使用关键字this.md，它的功能应该与我们在不同组件中分别导入该库时完全一样。

下面这行代码将允许我们在Vue应用程序的任何部分使用md功能

```javascript
createApp(App).mixin(markedMixin).mount('#app')
```

**总结**
------

在本教程中，我们看了一些提示，这些提示可以帮助你基本了解markdown的工作原理以及如何在你的Vue组件中使用它们。我们首先简单解释了markdown的意图是什么（并不是要取代HTML的实现），然后是手动创建Vue项目的几个步骤，我们还学习了如何设置marked.js库，这将有助于新手和经验丰富的开发者减少工作压力。

如何在Vuejs中解析和渲染Markdown

评论已关闭