コードブロックのハイライトをコピーして表示できる js プラグイン highlight.js + clipboard.js 統合

主に2つの側面から:

1. ハイライト/改行

2. コードのコピーボタン

これら両方には既製のプラグインがあります。

コードハイライトプラグイン - highlight.js

1. ハイライト js ファイルをダウンロードします。

https://highlightjs.org/

バージョン取得ボタンをクリックして言語選択に入ります

よく使われる言語を確認してください。通常は一般的な言語で十分です。

「ダウンロード」をクリックし、ダウンロードして解凍すると、js ファイルと css ファイルが作成されます。

jsファイルはどの部分をハイライトするかを決定し、cssはコードの色を決定します。

2. 解凍したファイルから highlight.pack.js ファイルを見つけ、使用時にこの js ファイルをインポートします。

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

3. 多くの CSS ファイルが含まれるスタイルファイルを開きます。これらのファイルを使用すると、ハイライト色や背景色 (テーマ色) など、表示コードの CSS スタイルを変更できます。

そのスタイルを使用する場合は、そのスタイルの CSS ファイルをインポートするだけで済みます。これらの英語の単語が何を表しているか分かりません。この URL は各 CSS ファイルの効果を示しています: https://highlightjs.org/static/demo/

ここでは dark.css ファイルを選択しました。

<link rel="スタイルシート" type="text/css" href="css/dark.css" rel="外部 nofollow" />

jsファイルとcssファイルをインポートしたら使用可能になります。

使用する際は、表示したいコードを必ず <pre><code></code></pre> タグで囲んでください。！！

コードにタグが含まれている場合は、タグの「<」を「&lt」に、「>」を「&gt」に置き換えることを忘れないでください。

コピープラグイン - clipboard.js

最初は、execCommand を直接使用してコピーを実現したいと考えました。コードは次のとおりです。コピーされたコンテンツには、改行やスペースなどの関連フォーマットがなく、互換性の問題があります。多数のプラグインを検索する過程で、既製のコピープラグインclipboard.jsが使用され、より便利かつ迅速に機能を実現できます。

<script type="text/javascript">
関数コピーリンク(){
var e = document.getElementById("コピー");
e.select(); // オブジェクトを選択 document.execCommand("Copy"); // ブラウザのコピー コマンドを実行 alert("リンクのコピーに成功しました!");
}
</スクリプト>

clipboard.js は、ブラウザからシステムクリップボードにテキストをコピーする機能を純粋な JS で実現できます。

使用中、フロントエンドブラウザにクリップボードが定義されていないというメッセージが表示されます。

最初は未定義かソースコードのエラーかと思いましたが、長い間検索した結果、jsファイルを導入する際のパスにエラーがあったことがわかりました（今後プラグインを使用する際に未定義の問題が発生した場合は、必ずF12を使用してデバッグし、404エラーがないか確認してください）

1. clipboard.jsをダウンロードします。 clipboard.js ダウンロードアドレス: https://github.com/zenorocha/clipboard.js

2. プラグインを導入する

ダウンロードしたファイルclipboard.js-master\clipboard.js-master\demoにサンプルがあり、直接使用できます。

以下は、id=copyCode の div を使用する例です。

1) jsファイルをインポートする

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

2) クリップボードオブジェクトをインスタンス化する

<スクリプト>
var クリップボード = 新しい ClipboardJS('.btn');
clipboard.on('成功', 関数(e) {
   コンソールログ(e);
});
clipboard.on('エラー', 関数(e) {
コンソールログ(e);
});
</スクリプト>

3) コピーボタンとコンテンツを定義します (注: ここでは、コピー時間をトリガーするボタンに 2 つの属性 (data-clipboard-action と data-clipboard-target) を追加する必要があります。data-clipboard-target の属性値は、ターゲットテキストの ID 値です)