vue.js でコードを強調表示する方法

vue.js でコードを強調表示する方法: まず、依存関係をダウンロードして [main.js] ファイルにパッケージをインポートし、次に [main.js] ファイルでコマンドをカスタマイズします。 、vue ファイル内の関連する指示を使用するだけです。

このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事: vue.js】

vue.js でのコードハイライト方法:

1. まず、依存関係をダウンロードする必要があります:

npm install highlight.js --save

2. main.js ファイルにパッケージをインポートします:

import hljs from 'highlight.js' //导入代码高亮文件
import 'highlight.js/styles/monokai-sublime.css'  //导入代码高亮样式

3. また、main.js ファイルのコマンドをカスタマイズします:

//自定义一个代码高亮指令
Vue.directive('highlight',function (el) {
  let highlight = el.querySelectorAll('pre code');
  highlight.forEach((block)=>{
      hljs.highlightBlock(block)
  })
})

4. vue ファイルの使用手順:

<div class="article_content" v-highlight>
    <div class="head">
       <h2 id="span-nbsp-class-article-type-article-type-span-title"><span class="article-type">{{article_type}}</span>{{title}}</h2>
       <span>{{time}}</span><span>作者:{{author}}</span>
       <span>阅读数:{{count_read}}</span><span>分类:{{blog_type}}</span>
    </div>
    <hr style="margin: 15px 0;">
    <div v-html="input"></div>
</div>

上の図:

関連する無料学習の推奨事項: javascript(ビデオ)

以上がvue.js でコードを強調表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。