Adan Qianqian vue mise à niveau de la page - utiliser Markdown pour afficher les réponses - bibliothèque markdown-it

Adam:

        Adan Qianwen s'est développé avant

Il s'avère que le format d'article de réponse utilise le format Markdown. Je veux donc utiliser Markdown pour mettre à jour la page.

Voici le processus de mise à niveau et de développement.

Idée de mise à niveau

Utiliser la bibliothèque markdown-it dans vue

Utiliser des documents Markdown dans les pages Vue

Installez markdown-it :

Dans les projets Vue, utilisez la bibliothèque markdown-it pour analyser et rendre les documents Markdown. Vous pouvez installer la bibliothèque en utilisant npm ou yarn :

npm install markdown-it

 ou

yarn add markdown-it

Créer un composant Markdown

Dans un projet Vue, vous pouvez créer un composant Markdown personnalisé responsable de l'analyse et du rendu des documents Markdown. Vous pouvez utiliser la bibliothèque markdown-it dans vos composants pour y parvenir. Voici un exemple simple :

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

Le schéma ci-dessus peut être complété et interprété sous la forme de Markdown.

Dans l'exemple ci-dessus, la bibliothèque markdown-it est d'abord introduite, puis dataune variable est définie dans le composant markdownpour stocker le document Markdown. Dans le hook, la méthode mounteds'appelle , qui utilise markdown-it pour analyser et rendre le document Markdown, et enregistre le résultat dans une variable. Enfin, dans le modèle du composant, utilisez des directives pour afficher le document Markdown analysé sur la page.renderMarkdownrenderedMarkdownv-html

Utiliser le développement de composants

Utiliser les composants Markdown dans les pages Vue : vous pouvez désormais utiliser des composants Markdown personnalisés dans les pages Vue pour afficher les documents Markdown

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

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

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

Dans l'exemple ci-dessus, importun composant Markdown personnalisé est introduit via une instruction et <markdown></markdown>une balise est utilisée dans le modèle de la page Vue pour appeler le composant.

Si vous souhaitez utiliser les méthodes ci-dessus, vous devez lier et attribuer des valeurs, vous devez donc faire attention ! ! !

Fonctions de page simples - et implémentations rapides 

Téléchargez les dépendances correspondantes comme ci-dessus.

 

 

 

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

            </div>


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


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

 Cela fonctionne parfaitement ! finir son travail!