highlight.js is a plug-in for highlighting code
Download address: https://highlightjs.org/downl...
Color reference: https://highlightjs.org/stati...
usage method:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Highlight</title> <link rel="stylesheet" type="text/css" href="a11y-light.css"> <style> * { margin: 0; padding: 0; } .box { margin: 50px auto; width: 400px; border: 1px solid green; } </style> </head> <body> <div class='box'> <pre><code class="html"><div>Hello</div> </code></pre> </div> <script src="highlight.pack.js"></script> <script> hljs.initHighlightingOnLoad(); </script> </body> </html>
Result:
Picture description
You can see that using highlight.js only requires three steps: introducing css, introducing JS, and calling the initHighlightingOnLoad function.
However, sometimes we don't want to compile code blocks as soon as we come out, for example, we need to click the mouse button and then compile. Calling the initHighlightingOnLoad function at this time is to find that it cannot be compiled. You can try it yourself, and you can't compile it in onload.
At this point, you can call the initHighlighting function.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="a11y-light.css"> <style> * { margin: 0; padding: 0; } .box { margin: 50px auto; width: 400px; border: 1px solid green; } </style> </head> <body> <div class='box'> <pre><code class="html"><div>Hello</div> </code></pre> </div> <script src="highlight.pack.js"></script> <script> window.onload = function () { hljs.initHighlighting(); } </script> </body> </html>