コードブロックのテーマコンポーネントをコピー

:warning: このテーマコンポーネントは、コア機能である コードブロックの内容をクリップボードにコピー に置き換えられ、現在非推奨となっています。

:sun_with_face: テーマクリエーターでプレビュー
:computer: Git リポジトリ: https://github.com/discourse/discourse-copy-codeblocks
:bulb: テーマまたはテーマコンポーネントのインストール方法

このテーマコンポーネントは、Discourse の投稿内のコードブロックにコピーボタンを追加します。コードサンプルやテキストのコピーが必要なナレッジベースの記事を共有するコミュニティに最適です。

デスクトップでは、ブロックにカーソルを合わせた際にコピーボタンが表示されます。

モバイルでは、コードボタンは常に表示されますが、コードが長すぎて最初の行が隠れてしまうのを防ぐため、ブロック内のコードを押し下げて表示します。

なお、これは ``` で生成されたコードブロックでのみ機能し、インラインコードブロックでは機能しません。

これはコードブロックです。
このテキストをコピーしてください。

これは インラインコードブロック です。ここではコピーは機能しません。

この機能の初期開発の大部分を手伝ってくださった @j.jaffeux さんに心から感謝いたします。

「いいね!」 24

これと https://meta.discourse.org/t/copy-option-for-code-blocks-in-discourse/60961?u=falco の違いは何ですか?

「いいね!」 7

複数の点:

  • クリップボードライブラリ全体をベンダーしない
  • jQuery に依存しない
  • イベントリスナーがリークしない
  • 複数のイベントに依存しない
  • 最新のコーディング標準を採用している
  • 引用符のバグがない

モバイルでも正しく動作しているか確信がありません。

「いいね!」 15

素晴らしいです!

「コピー」や「コピー済み」というローカライズされたテキストをアイコンに置き換えることに賛成かどうか気になります。「コピー」にはコピーアイコンを、「コピー済み」にはチェックマークアイコンを使用するのはどうでしょうか?

「いいね!」 3

コンポーネントに設定を追加することに賛成です。ローカライズされたテキストを選んだ理由は、何が起こっているかが明確であることに加え、テキストは高さを短くしても読みやすいためです。また、その見た目がこのユースケースに最も適しているように思えました。

「いいね!」 7

片方を削除または非推奨とし、取り組みを統合すべきでしょうか?:thinking:

「いいね!」 7

Minor issue: iPhoneでのコピー表示の遅延が短すぎます。コピー完了のメッセージは、元のテキストに戻るまで約3秒間表示されるべきです。

見た目は良いです :+1:

「いいね!」 8

ここで変更されました:

https://github.com/discourse/discourse-copy-codeblocks/commit/d1af36a4a5197dab4ca1dd62a05930088882de45

また、@ember/runlooprsvp ライブラリからの Promise が利用できない古いバージョンの Discourse に関連するいくつかのバグを修正しました(これらの報告をしてくれた @jomaxro に感謝します)。

「いいね!」 7

申し訳ありませんが、今回は :heart: だけでは足りません。

素晴らしい!これは最高です。これと Placeholder Forms を組み合わせると、本当にクールですね。

私がこれを使って行ったこと

sfdisk -d /dev/=gooddev= | sfdisk /dev/=newdev=
mdadm --manage /dev/md1 --add /dev/=newdev=
mdadm --detail /dev/md1

動作を確認しよう!

while true; do mdadm --detail /dev/md1|grep "Rebuild Status" ; sleep 10;done

全ドライブの稼働時間を取得

for x in a b c d ; do smartctl -a /dev/sd$x|grep Power_On; done
「いいね!」 12

とても気に入っています!:heart_eyes: ただし、モバイル端末ではコピーボタンをタップしたときだけ表示されるようにすることはできますか?モバイルでは画面スペースが常に失われるのが少し残念です。コードブロックごとに余分な行が追加されてしまいます:

でも考えてみると、

  • コードブロックはそれほど一般的ではない
  • オプトイン機能なので、実際にコードブロックをコピーする行為が一般的なサイトでのみ有効にすればよい

…とはいえ、任意のコードブロックがモバイルでコピーされる確率は極めて低いため、UI と使用頻度のバランスが崩れていると感じます。モバイルではタップ時のみ表示されるようにする方がよいと思います。

緊急ではありません。

「いいね!」 3

はい、全くもって妥当なご要望ですね :+1: 私も同様の懸念を抱いております。解決策を見つけてまいります。

「いいね!」 1

モバイルでもこれが優先されると思います。配置は少しずれていますが、コンセプトはご理解いただけるでしょう:

(テキストと重なっていても、タップ表示よりも難しいのか簡単なのかはわかりませんね:thinking:)

当初はその機能がありましたが、テキストと重なって見えなくなっていました。タップすると表示されるというアイデアは気に入っています。検討してみます。

「いいね!」 1

モバイルでは、その方がはるかに良いトレードオフです。ラップトップ、デスクトップ、タブレットでは、消費される追加スペースは全く問題ありません。

「いいね!」 1

こんにちは、

これを使いたいのですが、Grey Amber テーマで有効にした瞬間、サイトを無効にするまで、サイトがもたつき、時折応答しなくなるようになりました。

同じ現象を経験された方や、これを有効にすると VPS に負荷がかかりすぎることはあるでしょうか?

当サイトは 99.9% が単一行のコードで構成されており、これをコードブロックに変換したいと考えていました。既存のコードを変換するためにフェッチしているわけではないと思っていたのですが、実際にはそうなのでしょうか?

正常化するために時間を置く必要があるのでしょうか?サイトが一時的にダウンし続け、ページが読み込まれた時にはエラーメッセージが表示され、Discourse の「もう一度お試しください」というメッセージが出ていました。

よろしくお願いいたします。

「いいね!」 2

おっと、それは本当に深刻なバグのようですね!

「いいね!」 1

軽微なバグ:引用内に「コピー」テキストが表示されてしまいます。(前の投稿よりはるかに軽微です。)

button.copy-cmd は引用から除外する必要があります。CSS で user-select: none を適用すると、Ctrl-C は修正されますが、引用機能は修正されません。

「いいね!」 3

あなたのサイトのリンクはありますか?テーマがこれを引き起こすとはとても奇妙に思えます。ページにはいくつのコードブロックがありますか?

ここで複数の変更を行いました。私たちが直面していた問題は以下の通りです:

  • モバイル画面のスペース不足
  • 引用文のコピーテキストバグ
  • テキストの代わりにアイコンを表示したいというリクエスト

これらすべてを解決する明らかな解決策は、アイコンを使用することでした。

モバイルでは、スペースを節約し、テキストに適切なパディングを設けることで、右側に配置しても問題ありません。

わずかな不都合として、長い最初の行の場合、ボタンに隠れてしまうことがありますが、スクロール可能なので許容範囲だと考えられます。

デスクトップでは、引用バグを修正した上で、これまで通り動作します。

パフォーマンス関連のバグの可能性については、数十個のコードブロックを含むページを試しましたが、問題は発生しませんでした。何か対策を講じるためには、再現手順が必要です。@lcestou さん、ご協力ください。

新しいコードブロックをここでお試しください:

rsync -a file.txt file_backup.txt
rsync -a /var/www/public_html/ /var/www/public_html_backup/
「いいね!」 7

この機能はもはや Discourse コアに含まれています :tada:

そのため、このテーマコンポーネントは非推奨となりました。古い Discourse インスタンスでは引き続き動作しますが、今後の更新は行われません。

この情報を反映させるため、元の投稿を更新しました。

「いいね!」 5