Codeblock-Hervorhebung kann kopiert und angezeigt werden js Plugin highlight.js + clipboard.js Integration

Vor allem aus zwei Gründen:

1. Hervorhebung/Zeilenumbruch

2. Schaltfläche „Code kopieren“

Für beides gibt es fertige Plugins.

Plugin zur Codehervorhebung – highlight.js

1. Laden Sie die Highlight-JS-Datei herunter.

https://highlightjs.org/

Klicken Sie auf die Schaltfläche „Version abrufen“, um zur Sprachauswahl zu gelangen

Prüfen Sie die häufig verwendeten Sprachen. Normalerweise reicht die Sprache „häufig“ aus.

Klicken Sie auf „Download“, laden Sie herunter und entpacken Sie es. Es werden JS- und CSS-Dateien vorhanden sein.

Die JS-Datei bestimmt, welche Teile hervorgehoben werden, und die CSS-Datei bestimmt die Codefarbe

2. Suchen Sie in der entpackten Datei nach einer Datei „highlight.pack.js“ und importieren Sie diese JS-Datei, wenn Sie sie verwenden.

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

3. Öffnen Sie die Styles-Datei, die viele CSS-Dateien enthält. Diese Dateien können den CSS-Stil Ihres Anzeigecodes ändern, einschließlich Hervorhebungsfarbe und Hintergrundfarbe (Designfarbe).

Wenn Sie diesen Stil verwenden möchten, müssen Sie nur die CSS-Datei dieses Stils importieren. Ich verstehe nicht, was diese englischen Wörter darstellen? Diese URL zeigt die Auswirkungen jeder CSS-Datei: https://highlightjs.org/static/demo/

Hier habe ich eine dark.css-Datei ausgewählt:

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

Nach dem Importieren der JS- und CSS-Datei können Sie sie verwenden.

Achten Sie bei der Verwendung darauf, den anzuzeigenden Code in die Tags <pre><code></code></pre> einzuschließen! ! !

Wenn Ihr Code Tags enthält, denken Sie daran, das "<" des Tags durch "&lt" und das "">" durch "&gt" zu ersetzen.

Plugin kopieren - clipboard.js

Zuerst wollte ich execCommand direkt zum Kopieren verwenden. Der Code lautet wie folgt. Der kopierte Inhalt weist keine relevanten Formate wie Zeilenumbrüche und Leerzeichen auf und es treten Kompatibilitätsprobleme auf. Bei der Suche nach einer großen Anzahl von Plug-Ins wurde das vorgefertigte Kopier-Plug-In clipboard.js verwendet, mit dem die Funktion bequemer und schneller realisiert werden kann.

<Skripttyp="text/javascript">
Funktion Link kopieren () {
var e = document.getElementById("kopieren");
e.select(); // Objekt auswählen document.execCommand("Kopieren"); // Browser-Kopierbefehl ausführen alert("Link erfolgreich kopiert!");
}
</Skript>

clipboard.js kann die Funktion zum Kopieren von Text vom Browser in die Systemzwischenablage in reinem JS realisieren.

Während der Verwendung fordert der Front-End-Browser die Zwischenablage nicht definiert auf

Zuerst dachte ich, es sei undefiniert oder ein Quellcodefehler. Nach längerer Suche stellte ich fest, dass beim Einfügen der js-Datei ein Pfadfehler auftrat (wenn bei der zukünftigen Verwendung des Plug-Ins ein undefiniertes Problem auftritt, verwenden Sie unbedingt F12 zum Debuggen und prüfen Sie, ob ein 404-Fehler vorliegt).

1. Laden Sie clipboard.js herunter. clipboard.js Download-Adresse: https://github.com/zenorocha/clipboard.js

2. Plug-Ins einführen

Das Beispiel finden Sie in der heruntergeladenen Datei clipboard.js-master\clipboard.js-master\demo, die direkt verwendet werden kann

Nachfolgend sehen Sie ein Beispiel für die Verwendung des Div mit der ID=copyCode:

1) JS-Datei importieren

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

2) Instanziieren des Zwischenablageobjekts

<Skript>
var Zwischenablage = neues ZwischenablageJS('.btn');
clipboard.on('Erfolg', Funktion(e) {
   konsole.log(e);
});
clipboard.on('Fehler', Funktion(e) {
konsole.log(e);
});
</Skript>

3) Definieren Sie die Kopierschaltfläche und den Inhalt (Hinweis: Hier müssen Sie der Schaltfläche, die den Kopierzeitpunkt auslöst, zwei Attribute hinzufügen: data-clipboard-action und data-clipboard-target. Der Attributwert von data-clipboard-target ist der ID-Wert des Zieltexts.)

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

Der data-clipboard-target-Wert kann auch ein Tag sein. Bitte beachten Sie jedoch, dass dies fehlschlägt, wenn mehrere Tags vorhanden sind.

Bei der Verwendung der beiden Plugins kommt es zu keinen Konflikten und sie lassen sich gut integrieren.