Introduction to the methods of implementing code highlighting and syntax coloring in vue

How to highlight and syntax color in Vue?

1. Use code highlighting and syntax coloring

It is a lightweight code highlighting and syntax shading library that supports multiple languages ​​and themes. We can use it in Vue to implement code highlighting and syntax shading.

Install

We can use npm to install:

npm install prismjs --save

Introduced

In Vue's entry file:

import 'prismjs'
import 'prismjs/themes/'

Here we introduce and, the latter is the theme style file, we can select different themes according to our needs.

use

Used in Vue components for code highlighting and syntax coloring, we need to use it in templates<pre>and<code>Tags and addlanguage-xxxxClass name, of whichxxxxfor code language, e.g.language-javascriptRepresents JavaScript language.

<template>
  <div>
    <pre>
      <code class="language-javascript">
        var message = 'Hello, world!'
        (message)
      </code>
    </pre>
  </div>
</template>

In this example, we use<pre>and<code>Tags to wrap code snippets and addlanguage-javascriptThe class name means that this is a piece of JavaScript code. This class name will be automatically recognized and code highlighted and syntax colored.

Custom theme

If the default theme does not meet your needs, you can use the provided custom tools to generate a custom theme.

First, we need to install the prism-themes tool:

npm install prism-themes --save-dev

Then, run the following command on the command line:

./node_modules/.bin/prism-themes --format css --themes tomorrow --out-file 

This command will generate aFile, containing multiple topics. We can introduce this file into the Vue entry file:

import 'prismjs'
import './'

Here we name the custom theme fileand put it in the root directory of the Vue project. You can modify the file name and file path according to your needs.

Custom language

If the default language list does not meet your needs, you can use the provided custom tools to generate a custom language.

First, we need to install the prismjs/components tool:

npm install prismjs/components --save-dev

Then, run the following command on the command line:

./node_modules/.bin/prismjs --show-languages

This command lists all supported languages. You can introduce the required language modules in Vue's entry file.

import 'prismjs'
import 'prismjs/components/prism-javascript'

Here we have introduced the JavaScript language module.

2. Use code highlighting and syntax coloring

is another popular code highlighting and syntax shading library that supports multiple languages ​​and themes. We can use it in Vue to implement code highlighting and syntax shading.

Install

We can use npm to install:

npm install  --save

Introduced

In Vue's entry file:

import hljs from '/lib/core'
import '/styles/'

Here we have introduced the core module and github theme style files, and you can choose different themes according to your needs.

use

Used in Vue components for code highlighting and syntax coloring, we need to use it in templates<pre>and<code>Tags and addhljsandxxxClass name, of whichxxxfor code language, e.g.javascriptRepresents JavaScript language.

<template>
  <div>
    <pre>
      <code class="hljs javascript">
        var message = 'Hello, world!'
        (message)
      </code>
    </pre>
  </div>
</template>

In this example, we use<pre>and<code>Tags to wrap code snippets and addhljsandjavascriptThe class name means that this is a piece of JavaScript code. This class name will be automatically recognized and code highlighted and syntax colored.

Custom theme

If the default theme does not meet your needs, you can use the provided custom tools to generate a custom theme.

First, we need to install custom tools:

npm install -tools --save-dev

Then, run the following command on the command line:

./node_modules/.bin/hljs -t atom-one-light -d themes

This command will generate athemesFolders, containing a variety of themes. We can introduce this folder into the Vue entry file:

import hljs from '/lib/core'
import '/styles/'
import '/lib/languages/javascript'
import './themes/'

Here we name the custom theme folderthemesand put it in the root directory of the Vue project. You can modify the folder name and file path according to your needs.

Custom language

If the default language list does not meet your needs, you can use the provided custom tools to generate a custom language.

First, we need to install custom tools:

npm install -tools --save-dev

Then, run the following command on the command line:

./node_modules/.bin/hljs -L

This command lists all supported languages. You can introduce the required language modules in Vue's entry file.

import hljs from '/lib/core'
import '/styles/'
import '/lib/languages/javascript'
import './languages/my-language'

Here we have introduced JavaScript language modules and custom language modules.

in conclusion

It is very simple to use and do code highlighting and syntax coloring in Vue. You can choose different libraries and themes according to your needs, and you can also customize the themes and languages. If you want better code presentation, it is recommended to use one of these two libraries.

The above is the detailed introduction to the methods of implementing code highlighting and syntax coloring in vue. For more information about vue code highlighting and syntax coloring, please pay attention to my other related articles!