Code block highlighting can be copied and displayed js plug-in highlight.js + clipboard.js integration

Mainly from two aspects:

1. Highlight/Line Break

2. Copy code button

There are ready-made plugins for both of these.

Code highlighting plugin - highlight.js

1. Download the highlight js file.

https://highlightjs.org/

Click the get version button to enter the language selection

Check the commonly used languages, usually common is enough.

Click download, download and unzip, there will be js files and css files.

The js file determines which parts are highlighted, and the css determines the code color

2. Find a highlight.pack.js file in the unzipped file and import this js file when using it.

<script src="js/jquery-3.1.1.js"></script> 
<script src="js/highlight.pack.js"></script>

3. Open the styles file, which contains many css files. These files can change the css style of your display code, including highlight color and background color (theme color).

If you want to use that style, you only need to import the css file of that style. I don't understand what these English words represent? This URL shows the effects of each CSS file: https://highlightjs.org/static/demo/

Here I chose a dark.css file:

<link rel="stylesheet" type="text/css" href="css/dark.css" rel="external nofollow" />

After importing the js file and css file, you can use it.

When using it, be sure to wrap the code you want to display in <pre><code></code></pre> tags! ! !

If your code contains tags, remember to replace the "<" of the tag with "&lt" and the "">" with "&gt"

Copy plugin - clipboard.js

At first, I wanted to use execCommand directly to achieve copying. The code is as follows. The copied content does not have relevant formats such as line breaks and spaces, and there are compatibility issues. In the process of searching for a large number of plug-ins, the ready-made copy plug-in clipboard.js was used, which can realize the function more conveniently and quickly.

<script type="text/javascript">
function copyLink(){
var e = document.getElementById("copy");
e.select(); // Select the object document.execCommand("Copy"); // Execute the browser copy command alert("Copy link successfully!");
}
</script>

clipboard.js can realize the function of copying text from the browser to the system clipboard in pure JS.

During use, the front-end browser prompts Clipboard is not defined

At first I thought it was undefined or a source code error. After searching for a long time, I found that there was an error in the path when introducing the js file (if there is an undefined problem when using the plug-in in the future, be sure to use F12 to debug and see if there is a 404 error)

1. Download clipboard.js. clipboard.js Download address: https://github.com/zenorocha/clipboard.js

2. Introduce plug-ins

You can see the example in the downloaded file clipboard.js-master\clipboard.js-master\demo, which can be used directly

The following is an example of using the div with id=copyCode:

1) Import js file

<script src="${ctx }/styles/js/clipboard.min.js" type="text/javascript" ></script>

2) Instantiate the clipboard object

<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
   console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>

3) Define the copy button and content (Note: Here you need to add two attributes to the button that triggers the copy time, data-clipboard-action and data-clipboard-target, the attribute value of data-clipboard-target is the id value of the target text)

<div id="copyCode">hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyCode">Copy</button>

The data-clipboard-target value can also be a tag, but if there are multiple tags, it will fail, please note.

There is no conflict when using the two plug-ins, and they can be well integrated.