Adan Qianqian vue page upgrade - use Markdown to display answers -- markdown-it library

Adam:

        Adan Qianwen developed before

It is found that the reply article format uses Markdown format. So I want to use Markdown to upgrade the page.

The following is the upgrade and development process.

Upgrade ideas

Use the markdown-it library in vue

Use Markdown documents in Vue pages

Install markdown-it:

In Vue projects, use the markdown-it library to parse and render Markdown documents. You can install the library using npm or yarn:

npm install markdown-it

 or

yarn add markdown-it

Create a Markdown component

In a Vue project, you can create a custom Markdown component responsible for parsing and rendering Markdown documents. You can use the markdown-it library in your components to achieve this. Here is a simple example:

<template>
  <div>
    <div v-html="renderedMarkdown"></div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it';

export default {
  data() {
    return {
      markdown: '# Hello, World!',
      renderedMarkdown: ''
    };
  },
  mounted() {
    this.renderMarkdown();
  },
  methods: {
    renderMarkdown() {
      const md = new MarkdownIt();
      this.renderedMarkdown = md.render(this.markdown);
    }
  }
};
</script>

The above scheme can be completed and interpreted in the form of Markdown.

In the above example, the markdown-it library is first introduced, and then dataa variable is defined in the component markdownto store the Markdown document. In the hook, the method mountedis called , which uses markdown-it to parse and render the Markdown document, and saves the result in a variable. Finally, in the component's template, use directives to render the parsed Markdown document onto the page.renderMarkdownrenderedMarkdownv-html

Use component development

Use Markdown components in Vue pages: Now, you can use custom Markdown components in Vue pages to display Markdown documents

<template>
  <div>
    <markdown></markdown>
  </div>
</template>

<script>
import Markdown from '@/components/Markdown.vue';

export default {
  components: {
    Markdown
  }
};
</script>

In the above example, importa custom Markdown component is introduced through a statement, and <markdown></markdown>a tag is used in the template of the Vue page to call the component.

If you want to use the above methods, you need to bind and assign values, so you must pay attention! ! !

Simple Page Functions - and Quick Implementations 

Download the corresponding dependencies as above.

 

 

 

//使用函数解析markdown
 <div class="message-content" v-html="parsedContent(message.content)">

            </div>


 //初始化md对象
      md: new MarkdownIt(),


//具体转换函数
 parsedContent(message) {
      return this.md.render(message+"");
    },

 It works perfectly! get off work!