MarkDown-IT プラグインの使用

目的

バックエンドがデータベースを返してコンテンツを返すようにし、フロントエンド ページにレンダリングされると、対応する MarkDown 構文を表示します。

実装メカニズム

バックエンド データベースは Markdown 構文で直接保存され、SQL データベース フィールドのデータ型は LongText を使用することが推奨され、バックエンドは一般的なデータを使用してフロントエンドに転送され、シリアル化する必要はありません

フロントエンドは通常どおり直接レンダリングされます。以下は、MarkDown-IT プラグインを使用したフロントエンド vue のメソッド フローです。

インストール

npm install markdown-it --save

コンポーネントで導入

どのコンポーネントが使用され、どのコンポーネントが参照されているか、メインで参照する必要はありません

import MarkdownIt from 'markdown-it'

MarkDwonIt オブジェクトのインポートと定義

//markdown-it
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt();

データモデルはプロパティを準備します

export default {
  data() {
    return {
      renderedMarkdown:'',
    }
  },
}

割り当て

this.renderedMarkdown = md.render(your sql content);

レンダリング

<!--显示单篇文章，div标签中可以写v-if来控制是否显示-->
<div>
  <div v-html="renderedMarkdown"></div>
</div>