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

コードブロックのハイライトをコピーして表示できる 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 値です)

<div id="copyCode">こんにちは</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyCode">コピー</button>

data-clipboard-target の値はタグにすることもできますが、タグが複数ある場合は失敗しますので、ご注意ください。

2 つのプラグインを使用する場合、競合は発生せず、適切に統合できます。

以下もご興味があるかもしれません:
  • Highlight.js JSライブラリの使い方の詳細な説明
  • jsはhighlight.jsを使用してコードを強調表示します
  • JavaScript 構文強調プラグイン highlight.js の詳細な使用方法 [highlight.js サイトのダウンロードに添付]
  • highlight.jsコードハイライトプラグインの使い方の詳しい説明

<<:  CentOS 7.5 に Python 3.6.6 を最初からインストールするための詳細なチュートリアル

>>:  MySQL 接続数を設定する方法 (接続数が多すぎる)

推薦する

MySQL 5.7.25 圧縮版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...

Centos7 で crontab + シェル スクリプトによる定期的な自動ファイル削除の問題を解決する

問題の説明:最近、rsyncで毎回同期するデータ量が多いが、データベースのbakファイルを保持する必...

mysql indexof関数の使用手順

以下のように表示されます。 LOCATE(部分文字列、文字列)文字列 str 内の部分文字列 sub...

MySQL シリーズ: redo ログ、undo ログ、binlog の詳細な説明

取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...

tomcat+nginx を使用してマルチアプリケーション デプロイメントを実装するためのサンプル コード

目次マルチアプリケーションの展開1-Tomcat 構成1.1- プロジェクト構成1.2-サービス構成...

制限およびオフセット ページング シナリオを使用すると速度が遅くなるのはなぜですか?

質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...

Vue ボタンの権限制御の導入

目次1. 手順1. ボタンの権限を定義する2. ストアを定義する3. 権限指示を作成する4. パーミ...

dockerにros2をインストールするための詳細な手順

目次メイントピック1. UbuntuにDockerをインストールする2. DockerにROS2-F...

tomcat8の最新のLinuxインストールプロセス

ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...

CSS変数がJSインタラクティブコンポーネント開発にもたらす改善と変更のサンプルコードの詳細な説明

1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...

DockerコンテナのIPアドレスを表示する方法

私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...

flexとは何か、flexレイアウト構文の詳細なチュートリアル

フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...

MySQLで大きなテーブルを正常に削除する方法の詳細な説明

序文テーブルを削除するには、無意識に思い浮かぶコマンドは、DROP TABLE "テーブル...

Linux bzip2 コマンドの使用

1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...

MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル

MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...