Highly.js supports dozens of programming languages (click to download), including common C, Java, javascript, Ruby, Python, HTML, CSS, SQL, and apache, Nginx configuration file syntax.

In addition to the vue-highlight.js file, you also need to import the style file highlight.js. Vue-highlight.js only implements code highlighting. CSS style files are not included in the installation package, so we need to install a highlight.js to implement the actual style.

The installation

npm install --save vue-highlightjs
Copy the code

reference

Reference dependencies in our entry file main.js

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)
Copy the code

We use atom-one-dark. CSS to customize the display according to the color palette on highlight.js. You can also look at the files in highlight.js installed in your project to see if you have the stylesheet.

use

Vue is easy to use because it is already componentalized.

<! --1.If the code you need to highlight is a variable value, then you can use it this way. Sourcecode is the variable. --> <pre v-highlightjs="sourcecode"><code></code></pre> <! --2.If you need highlighted code fixed source code, then you can use it this way. --> <pre v-highlightjs><code>const s = new Date().toString()</code></pre>
Copy the code

Develop reading

  • Hignlight. Js’s official website
  • highlight.js demo
  • vue-highlightjs github
  • Custom plug-in official document
  • Official document of custom directives