Home > Developer > Web Develop
Highlight is an easy-to-use web-code highlighting plugin that automatically detects programming languages and highlights, compatible with a variety of frameworks, which can be said to be very powerful. Here's a quick introduction to how to use this plugin.
Two ways to use:
1. Manually select the theme, download the highlight library file, and refer to the JS and CSS files on the page respectively.
2. Use the CDN link.
For ease of use, the second method is used here.
CDN Address: http://www.bootcdn.cn
Highlight Cdn:https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js
Highlight Highlight Theme cdn:http://www.bootcdn.cn/highlight.js/(specific topics can be entered in the page keyword search)
Come on, on the code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <Linkhref= "Https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css"rel= "stylesheet"> <Scriptsrc= "Https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></Script> <Script>hljs.inithighlightingonload ();</Script> </Head><Body> <Pre> <Codeclass= "JavaScript">//This is required to highlight the code import React, {Component} from ' React ' class Errorboundary extends Component { State = {error:null, errorinfo:null,} componentdidcatch (Error, errorinfo) { This.setstate ({error, ErrorInfo, Haserror:true,})} render () { if (This.state.errorInfo) {return (<Details> <Summary>Something went wrong.</Summary> <P>{json.stringify (This.state.errorInfo)}</P> </Details>)} return This.props.children}} export default Errorboundary </Code> </Pre> </Body></HTML>
Analysis
First introduce the Highlight library file and the desired theme CSS file in the page, and add the code below:
Use <pre><code> Your code ... </code></pre > Label package, highlight automatically detects the code language type and performs a highlight operation. If the recognition fails, you can manually add the class name of the language type in code
<code class= "JavaScript" >...</code>
The test results in the browser are as follows:
Try changing the class name manually modify the language type to CSS, refresh the page, and see the following highlights:
So that's the simple way to use it. More ways to use the website:
Highlight official website: https://highlightjs.org
How to use highlight:https://highlightjs.org/usage/
Highlight Theme list: https://highlightjs.org/static/demo/
How to use Highlight.js highlighting code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
