How to parse and render Markdown in Vue

Author: Dmitri Pavlutin
Translator: Frontend Xiaozhi
Source: blog.openreplay

If you have dreams and dry goods, search on [Move to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

HTML is an abbreviation of Hypertext Markup Language, and may be the most used markup language on the web today. Markdown is also an essential skill in our program industry. We can use makrdown to render text. It is actually a faster way of writing because it has a low learning cost and does not require a lot of knowledge to start. If you want to blog or even write as a technical writer, Markdown is your first writing tool.

This article mainly introduces if you use Markdown in Vue, there is a lot of nonsense, let's start the massage.

Why use Marked.js library

Vue does not have as many MD plugins as React. Such as markdown-it , Remark.js , marked.js . I hope that in the future, there will be more useful libraries to support our Vue. After some research, I chose marked.js because it has the most stars and fewer bugs.

Create project

We use vue-cli to create the project and run the following command:

vue create marked-example

Here we choose the simplest Vue2 template to create the project. The structure of the project after creation is as follows:

+-- src/i
|   +-- assets/
|   +-- components
|       +-- HelloWorld.vue
|       +-- App.vue
|   +-- main.js

Now we write a title in MD grammar

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

run:

Based on the above code, we hope that the # hello world MD grammar can be rendered in Vue into title . How to do it, this requires the help of Marked.js library.

Install Marked.js

Marked or marked.js is a low-level compiler that helps us convert Markdowns into HTML. Install a wave of test water:

npm install marked

Then, introduced app.vue

import marked from 'marked';

Render markdown

The rendering method is very simple: pass our text to marked , and the result is the labeled text content. We v-html render.

<template>
<!-- {{ markdown }} -->
  <textarea v-model="markdown"></textarea>
  <div v-html="markdownToHtml"></div>

</template>
<script>
import marked from 'marked';
export default {
  name: 'App',
 data(){
   return {
     markdown:  "# Hello World",
   };
 },
 computed: {
   markdownToHtml(){
     return marked(this.markdown);
   }
 }
}
</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>

Here we write one more textarea tag, and then use the calculated attributes to render markdowns real time. The results after running are as follows

Then, enter some more MD syntax to verify:

Global introduction

When we don't want to introduce every component once, we can declare it as global. How to do it?

The way to achieve globalization of the marked library is to use Mixins. Mixins are just a distribution of reusable functions in Vue components.

Refactor our main.js code as follows:

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

When you want to convert md, this.md in the component to convert md to html.

~End, the content of this article is very simple, because a similar function has been used recently to search this library, so I will share it.

I'm going home to cook now, see you next time!

---

Forgive : 161492792ecc56 https://blog.openreplay.com/how-parse-and-render-markdown-in-vuejs

possible bugs that may exist after the 161492792ecca6 code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

comminicate

The article is continuously updated every week, and you can search for "Great Move World" on WeChat to read and update it at the first time (one or two earlier than the blog). This article has been included on https://github.com/qq449245884/xiaozhi I have sorted out a lot of my documents, welcome to Star and improve it. You can refer to the test site for review for interviews. In addition, pay attention to the account, and reply to 161492792eccec welfare background, you can see the welfare, you know.