主に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 接続数を設定する方法 (接続数が多すぎる)
Mysql5.7.19バージョンは今年リリースされた新しいバージョンです。最近のMySQLのバージ...
Nginxのproxy_cacheを使用してキャッシュサーバーを構築する1: ngx_cache_...
目次序文文章パラメータ例Lodash 実装:トーキー機能: castPath関数: stringTo...
この記事は、2018 年 9 月 19 日に Adobe Systems Inc で開催された ...
EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...
目次リナックス1. crontabの基本的な使い方2. ログを有効にする3. スケジュールされたタス...
今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...
バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...
序文この記事は私自身の製作過程の簡単な記録です。練習中に質問があれば、一緒に話し合うことができます。...
以下の属性はブラウザとの互換性があまりありません。 1.transform:rotate(45度) ...
この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...
Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...
1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...
1.Tomcatの最適化構成(1)Tomcatのcatalina.batを変更するJavaをサーバー...
1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...