Vue3 がマークダウンを解析し、コードのハイライトを実装する方法

Vue はブログ フロントエンドを実装しており、マークダウン解析を実装する必要があります。コードがある場合は、コードのハイライトを実装する必要があります。
Vue には、markdown-it、vue-markdown-loader、marked、vue-markdown など、多くのマークダウン解析ライブラリがあります。これらのライブラリはすべて非常に似ています。ここではMarkedが使用され、コード強調表示ライブラリとしてhighlight.jsが使用されます。

具体的な実装手順は次のとおりです:

1. 依存ライブラリをインストールします

vue プロジェクトの下でコマンド ウィンドウを開き、次のコマンドを入力します

npm install marked -save    // marked 用于将markdown转换成html
npm install highlight.js -save   //用于代码高亮显示

コマンドが実行されます。コンソールまたは package.json ファイルで、インストールされているバージョン番号を確認できます。

# 2. main.js ファイルに、highlight.js とstyles を導入します。そして、カスタマイズされたグローバル ディレクティブを作成します

import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css' //样式

//创建v-highlight全局指令
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

これにより、v-highlight を使用して、vue コンポーネントのコード ハイライト メソッドを参照できます。

3. Vue コンポーネントにマークされた解析とコードのハイライトを適用します

コード例は次のとおりです:

 <!-- 正文输出 -->
<div class="entry-content">
  <div v-highlight v-html="article"  id="content"></div>
</div>

<script>
    // 将marked 引入
  import { marked }from &#39;marked&#39;;
    export default {
        name: &#39;articles&#39;,
        data(){
          return{
              article:&#39;&#39;
          }
        },
        methods: {
          getPostDetail() {
            console.log(&#39;getPostDetail()&#39;+this.id)
            fetchPostDetail(this.id).then(res => {
               this.postdetail=res.data
               // 调用marked()方法，将markdown转换成html
               this.article= marked(this.postdetail.content);
               console.log(res.data)
              }).catch(err => {
                  console.log(err)
              })

          },
        created() {
          //调用获取文章内容的接口方法
          this.getPostDetail()
        },
    }
 </script>

4. 表示効果

マークダウン解析とコード強調表示効果

例で参照されているスタイルはimport 'highlight.js/styles/atom-one-dark.css'
実際、highlight.js/styles には多くのスタイルが用意されており、好みに応じて選択できます。

以上がVue3 がマークダウンを解析し、コードのハイライトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。