Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how vue3 introduces highlight.js to highlight the code. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Background description:

In project development, there are often some log previews, as well as previews of files, which require code highlighting. This can make the text content appear more friendly and easy to read.

The code with an effect similar to markdown syntax is highlighted as follows:

False true false 1. Installation dependency:

Note: there are two dependencies we need to install, the blog posts on the Internet, both of which are written, which are relatively cramped.

Npm install-save highlight.js

Npm install-- save @ highlightjs/vue-plugin

The command line is as follows

# # this is the highlight.js basic dependency npm install-- save highlight.js## installation supports vue3 @ highlightjs/vue-plugin dependency npm install-- save @ highlightjs/vue-plugin 2. Introduce and register highlight in the main file in the main entry of vue3:

What needs to be introduced are

Style, introduce style in the main main entry for global uniform use this style, can also be introduced in a separate page, the style you want. Style effect reference official website: https://highlightjs.org/static/demo/

Change import 'highlight.js/styles/atom-one-dark.css' to change the value after styles to the style you want to depend on the package component #-File src/main.ts | src/main.js # style, dependent package The component import 'highlight.js/styles/atom-one-dark.css'import' highlight.js/lib/common'import hljsVuePlugin from'@ highlightjs/vue-plugin'import {computed, createApp} from 'vue'import App from'. / App.vue'const app = createApp (App) / / introduces the code highlight and registers app.use (hljsVuePlugin) app.mount ('# app') globally. Third, the page uses:

Examples are as follows:

You can use language to specify specific languages, such as javascript, xml, etc.

This value is omitted, and highlightjs automatically recognizes the corresponding language.

Fourth, let's take a look at the effect display:

5. Some optimizations: 1. problem

You can see that the generated code is wrapped in pre, and there will be a margin-bottom of 1rem, which is not very effective.

two。 Solution method

On the corresponding page, use the style tag to rewrite the style, and be careful not to add scoped

Pre {margin-bottom: 0;}

3. The effect after treatment

This is an example, of course, you can modify the style according to the actual project.

Code words are not easy. If it is helpful to you, give me a like ☻ (✿◠ likes ◠).

For more details, please refer to the official documentation

Official website link: https://highlightjs.org/

Official website github link: https://github.com/highlightjs/vue-plugin

These are all the contents of the article "how to introduce highlight.js for code highlighting in vue3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.