How to use the highlight.js Code highlight plug-in

This article mainly introduces "how to use highlight.js code highlight plug-in". In daily operation, I believe many people have doubts about how to use highlight.js code highlight plug-in. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to answer your doubts about "how to use highlight.js code highlight plug-in"! Next, please follow the small series to learn together!

In the process of using web pages, code display is often used. Different color codes can make the code look more intuitive and beautiful.

Found a few different plug-ins, think highlight plug-in is more practical, and use up fried chicken simple.

For example:

First, we download a js file for highlight.

https://highlightjs.org/

Click on the get version button to access the language selection

Check your favorite language, and when using the plugin, it will automatically detect the language of the code you want to display and automatically highlight the code. Common is usually enough.

Then click the download button below, download, extract, there will be js files and css files.

JS files determine which parts of your code will be highlighted, CSS files determine what color your code will become ~

Find a highlight.pack.js file in the extracted file and import this js file when you use it.

Open the styles file inside, there are many CSS files inside. These files allow you to change the CSS style of your presentation code, including highlight colors and background colors (theme colors).

When you want to use that style, you just need to import the css file of this style. Can't understand what style these English represent? This website has the effect of various css files: highlightjs.org/static/demo/

Here I chose a dark.css file:

After importing js files and css files, you can use them.

When using, be sure to include the code you want to display in the label!!!

For example:

In principle, the system will automatically detect the content of your code, but if you are worried, you can use a class name in the label with the language used in the code.

For example:

All right, let's see how this works:

This is just dark.css this style of color, want to change the other color yourself ~

If your code contains tags, remember to replace the tag "" with ">"

At this point, the study of "how to use highlight.js code highlight plug-in" is over, hoping to solve everyone's doubts. Theory and practice can better match to help you learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!