One line of code can make my website support the tool library of code highlighting, and also support the use in Vue. It is highly recommended to everyone.
About highlight.js
highlight.js is a tool library for developing code highlighting using javascript , which can make the code on the web page display the highlight style close to the code editor we use, so that it looks more comfortable and enhances the reading experience.
Technical features of highlight.js
- Supports 197 development languages and 246 code highlighting themes
- Automatic development language detection
- Support multi-language mixed code highlighting at the same time
- Supports any HTML tag, not just
- Support npm installation, can be used in Vue.js, can also be used in node.js
- No dependencies, compatible with any js framework
Why use highlight.js
Friends who often come to my website know that my article has a column called "front-end", which mainly recommends practical front-end open source projects or component libraries. When writing technical articles, it is inevitable to paste code. My website is built based on wordpress. I have always been troubled by finding a code highlighting plugin, but most of the wordpress code highlighting plugins are too bloated and the styles are not beautiful. Most of the time, I take a screenshot of the code interface of VsCode, and I even used the tool codepng to turn the code into a picture and paste it in the article, but this is beautiful, but there are two problems:
- Pictures of long code will be zoomed, and the reading experience is not good
- Not recognized by search engines, not friendly to SEO
In the end, I found highlight.js, which perfectly solved the above two problems, and the configuration is simple, the demonstration is beautiful, and the customization is simple. I can't help but sigh: Only by solving it in a pure front-end way can it be precisely controlled and the desired effect can be achieved.
Tutorial: Add code highlighting to my website
Here's an example from my website to show how highlight.js can be used in our project. First of all, highlight.js supports direct introduction from cdn and npm installation. My website is developed based on wordpress, and the theme is written by myself. The easiest way is to introduce highlight.js and theme styles on the article details page.
Although highlight.js supports hundreds of development languages, in order to minimize the file size, we can click the "get version" button to enter the download page, and build the lightest library by checking the development language we need.
The highlight.min.js obtained after downloading and decompressing is the js file we need to import. The theme styles are all in the style folder. I chose a favorite monokai-sublime theme, only need a css file, and then initialize:
It's that simple, highlight.js will automatically recognize the language and highlight the code in the article, it's that simple. In order to make the code display more coordinated, I used a few lines of CSS to control the rounded corners of the wrapping layer, as well as the background color, font size, etc., and you're done.
Of course highlight.js can also be used in vue projects, install:
Use in Vue file (via highlight.js for Vue):
It should be noted that the automatic recognition mode cannot 100% recognize the development language to which the code belongs, and the recognition error will cause the highlight style to be in another language. In this case, you can manually set a class for precise control:
The official website provides detailed documentation and more control over code highlighting, but the downside is that highlight.js does not support displaying line numbers. You need to introduce another library (highlightjs-line-numbers.js) or implement it yourself.
Free Open Source Instructions
highlight.js is an open source javascript tool library based on the BSD license , which can be downloaded by any individual and company for free for their own projects, including commercial projects.
Original link: https://www.thosefree.com/highlight-js