コードブロックのハイライトをコピーして表示できる 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 接続数を設定する方法 (接続数が多すぎる)

推薦する

mysql5.7.19 解凍版の詳細なインストール チュートリアル (純粋なクラックされた中国語版 SQLYog を使用)

Mysql5.7.19バージョンは今年リリースされた新しいバージョンです。最近のMySQLのバージ...

Nginx で CDN サーバーを構築する方法の詳細な説明 (画像とテキスト)

Nginxのproxy_cacheを使用してキャッシュサーバーを構築する1: ngx_cache_...

Js でオブジェクトのディープ オブジェクトを安全に取得するメソッドの例

目次序文文章パラメータ例Lodash 実装:トーキー機能: castPath関数: stringTo...

2018 年にリリースされる Apache Spark 2.4 の新機能は何ですか?

この記事は、2018 年 9 月 19 日に Adob​​e Systems Inc で開催された ...

mysql explain(分析インデックス)の使い方の詳しい説明

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

Linux と Windows でスケジュールされたタスクを設定する方法

目次リナックス1. crontabの基本的な使い方2. ログを有効にする3. スケジュールされたタス...

Web アプリ開発時間を短縮する 10 の時間を節約するヒント (グラフィカル チュートリアル)

今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...

docker --privileged=true パラメータの役割についての簡単な説明

バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...

docker-swarm をベースにした継続的インテグレーション クラスタ サービスの構築の詳細な説明

序文この記事は私自身の製作過程の簡単な記録です。練習中に質問があれば、一緒に話し合うことができます。...

HTML におけるいくつかの特殊属性タグの使用法の紹介

以下の属性はブラウザとの互換性があまりありません。 1.transform:rotate(45度) ...

Docker デプロイメント Springboot プロジェクト例の分析

この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...

Linux で同じバージョンの R を使用して Seurat2 と Seurat3 を同時にインストールするチュートリアル

Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...

mysql データ型変換の実装

1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...

Tomcat+Mysql の高同時実行構成の最適化の説明

1.Tomcatの最適化構成(1)Tomcatのcatalina.batを変更するJavaをサーバー...

フローティングをクリアするいくつかの方法(推奨)

1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...