Two methods of highlighting with highlight.js code in React

Recently, I was writing a theme based on WP Test API with React+Material UI, and encountered the problem of code highlighting. Here are two solutions.

problem

The data returned by the request API contains code blocks. The front-end should call the code highlighting plug-in to "render" it.

In ordinary html, the highlight method of highlight.js can be called when the page is loaded. However, there are some differences in React. Of course, the actual content is similar.

resolvent

Use highlight.js npm package (not recommended)

Install first highlight.js Package:

 yarn add highlight.js

Introduce packages and styles where necessary:

 import hljs from 'highlight.js'; import 'highlight.js/styles/default.css';

Then call in the corresponding component:

• Use in function component

   //function component //Cataloged/miao/ out /no/blog/guest  (@/azimiao. com) function component1(props){ React.useEffect(()=>{ document.querySelectorAll("pre code").forEach(block => { try{hljs.highlightBlock(block);} catch(e){console.log(e);} }); }); return( <div>{…………}</div> ); }

• Use in class component

   class Preview extends Component { ComponentDidMount() {//Edit/miao/Out /Not/Blog/Guest  (@/azimiao. com) this.highlightCallBack(); } componentDidUpdate() { //Cataloged/miao/haunted/blog/guest  (@/azimiao. com) this.highlightCallBack(); } highlightCallBack = () => { document.querySelectorAll("pre code").forEach(block => { try{hljs.highlightBlock(block);} catch(e){console.log(e);} }); }; render(){ Return (/* Press/Meow/ Out /Not/Blog/Guest  (@/azimiao. com)*/ <div>{……}</div> ); } }

  This method has a very obvious disadvantage: when webpack is packaged, highlight.js will be packaged into mian.js by default, resulting in an increase of about 900 KiB in the entire file.

Use CDN library

In the webpack template file index.html CDN code base introduced in:

 <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/ cdn-release@10.1.1 /build/styles/github.min.css"> <script src="//cdn.jsdelivr.net/gh/highlightjs/ cdn-release@10.1.1 /build/highlight.min.js"></script>

Because the variable names in the cdn library are the same as those in the npm package above, you can directly use hljs 。

The method used in the component is the same as above:

• Use in function component

   //function component function component1(props){ React.useEffect(()=>{ document.querySelectorAll("pre code").forEach(block => { try{hljs.highlightBlock(block);} catch(e){console.log(e);} }); }); return( <div>{…………}</div> ); }

• Use in class component

   class Preview extends Component { componentDidMount() { this.highlightCallBack(); }/*@Cataloged @ miao @ out @ no @ (@/azimiao. com)*/ componentDidUpdate() { this.highlightCallBack(); }/*Cataloged/miao/ out /no/blog/guest  (@/azimiao. com)*/ highlightCallBack = () => { document.querySelectorAll("pre code").forEach(block => { try{hljs.highlightBlock(block);} catch(e){console.log(e);} }); }; render(){ Return (/* Press/Meow/ Out /Not/Blog/Guest  (@/azimiao. com)*/ <div>{…………}</div> ); } }