アップグレードのアイデア

vue で markdown-it ライブラリを使用する

Vue ページで Markdown ドキュメントを使用する

markdown-it をインストールします。

Vue プロジェクトでは、markdown-it ライブラリを使用して Markdown ドキュメントを解析およびレンダリングします。npm または Yarn を使用してライブラリをインストールできます。

npm install markdown-it

または

yarn add markdown-it

Markdownコンポーネントを作成する

Vue プロジェクトでは、Markdown ドキュメントの解析とレンダリングを担当するカスタム Markdown コンポーネントを作成できます。これを実現するには、コンポーネントで markdown-it ライブラリを使用できます。簡単な例を次に示します。

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

上記のスキームは、Markdown の形式で完成および解釈できます。

上記の例では、まず markdown-it ライブラリが導入され、次にコンポーネント内でMarkdown ドキュメントを保存するdata変数が定義されます。markdownフックでは、メソッドmountedが呼び出されます。このメソッドは、markdown-it を使用して Markdown ドキュメントを解析およびレンダリングし、結果を変数に保存します。最後に、コンポーネントのテンプレートでディレクティブを使用して、解析された Markdown ドキュメントをページ上にレンダリングします。renderMarkdownrenderedMarkdownv-html

コンポーネント開発を使用する

Vue ページで Markdown コンポーネントを使用する: Vue ページでカスタム Markdown コンポーネントを使用して、Markdown ドキュメントを表示できるようになりました。

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

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

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

上記の例では、importカスタム Markdown コンポーネントがステートメントを通じて導入され、<markdown></markdown>Vue ページのテンプレートでタグがコンポーネントを呼び出すために使用されます。

上記の方法を使用する場合は、バインドして値を割り当てる必要があるため、注意が必要です。！！

シンプルなページ関数 - および迅速な実装

上記のように、対応する依存関係をダウンロードします。

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

            </div>


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


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

完璧に機能します！仕事を辞めてください！

Adan Qianqian vue ページのアップグレード - Markdown を使用して回答を表示する -- markdown-it ライブラリ