Vue シングルページ アプリケーションで Markdown レンダリングを実装する

// vue.config.js
モジュール.エクスポート = {
 ランタイムコンパイラ: true
}

npm install markdown-it --save # Markdown-it 本体 npm install markdown-it-highlightjs --save # コードのハイライト npm install markdown-it-katex --save # Latex サポート

<link rel="スタイルシート" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css" rel="外部 nofollow" >
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>

npm で github-markdown-css をインストール --save

'github-markdown-css/github-markdown.css' をインポートします。

<link rel="スタイルシート" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css" rel="外部 nofollow" >

<テンプレート>
 <components :is="html" class="markdown-body"></components>
</テンプレート>

<スクリプト>
'markdown-it' から MarkdownIt をインポートします
'markdown-it-highlightjs' から hljs をインポートします。
'markdown-it-katex' から LaTeX をインポートします
エクスポートデフォルト{
 名前: 'マークダウン'、
 小道具: {
  内容: 文字列
 },
 データ: () => ({
  : ヌル
 }）、
 計算: {
  // 動的バインディング中にHTMLを動的に更新するにはcomputedを使用します: function () {
   res = this.md.render(this.content) とします。
   // 正規表現を使用して、サイト内リンクを router-link タグに置き換えます res = res.replace(/<a href="(?!http:\/\/|https:\/\/)(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<router-link to="$1">$2</router-link>')
   // 正規表現を使用して外部リンクを新しいウィンドウで開きます res = res.replace(/<a href="(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<a href="$1" rel="external nofollow" target="_blank">$2</a>')
   戻る {
    テンプレート: '<div>' + res + '</div>'
   }
  }
 },
 作成された（）{
  this.md = 新しい MarkdownIt()
  this.md.use(hljs).use(ラテックス)
 }
}
</スクリプト>

<テンプレート>
  <div>
    <マークダウン:content="content"/>
  </div>
</テンプレート>

<スクリプト>
'@/components/Markdown.vue' から Markdown をインポートします。
エクスポートデフォルト{
 名前: 'ホーム'、
 コンポーネント:
  マークダウン
 },
 データ: () => ({
  コンテンツ： ''
 }）、
 作成された（）{
  this.content = '# テスト'
 }
}
</スクリプト>