主に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 ファイルを選択しました。
jsファイルとcssファイルをインポートしたら使用可能になります。
コードにタグが含まれている場合は、タグの「<」を「<」に、「>」を「>」に置き換えることを忘れないでください。 コピープラグイン - 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ファイルをインポートする
2) クリップボードオブジェクトをインスタンス化する <スクリプト> var クリップボード = 新しい ClipboardJS('.btn'); clipboard.on('成功', 関数(e) { コンソールログ(e); }); clipboard.on('エラー', 関数(e) { コンソールログ(e); }); </スクリプト> 3) コピー ボタンとコンテンツを定義します (注: ここでは、コピー時間をトリガーするボタンに 2 つの属性 (data-clipboard-action と data-clipboard-target) を追加する必要があります。data-clipboard-target の属性値は、ターゲット テキストの ID 値です)
data-clipboard-target の値はタグにすることもできますが、タグが複数ある場合は失敗しますので、ご注意ください。 2 つのプラグインを使用する場合、競合は発生せず、適切に統合できます。 以下もご興味があるかもしれません:
|
<<: CentOS 7.5 に Python 3.6.6 を最初からインストールするための詳細なチュートリアル
>>: MySQL 接続数を設定する方法 (接続数が多すぎる)
この記事では、MySQL 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...
問題の説明:最近、rsyncで毎回同期するデータ量が多いが、データベースのbakファイルを保持する必...
以下のように表示されます。 LOCATE(部分文字列、文字列)文字列 str 内の部分文字列 sub...
取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...
目次マルチアプリケーションの展開1-Tomcat 構成1.1- プロジェクト構成1.2-サービス構成...
質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...
目次1. 手順1. ボタンの権限を定義する2. ストアを定義する3. 権限指示を作成する4. パーミ...
目次メイントピック1. UbuntuにDockerをインストールする2. DockerにROS2-F...
ダウンロード参考:ダウンロードするコアパッケージを選択してくださいダウンロード後、ファイルをサーバー...
1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...
私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...
フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...
序文テーブルを削除するには、無意識に思い浮かぶコマンドは、DROP TABLE "テーブル...
1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...
MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...