How to highlight code in vue.js

How to highlight code in vue.js: First, you need to download the dependencies and import the package in the [main.js] file; then customize a command in the [main.js] file; finally, in vue Just use the relevant instructions in the file.

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

Code highlighting method in vue.js:

1. First, you need to download the dependencies:

npm install highlight.js --save

2. Import the package in the main.js file:

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

3. Also customize a command in the main.js file:

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

4. Use instructions in vue files:

<div class="article_content" v-highlight>
    <div class="head">
       <h2><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>

Above picture:

Related free learning recommendations: javascript(Video)

The above is the detailed content of How to highlight code in vue.js. For more information, please follow other related articles on the PHP Chinese website!