コマンドとその出力を同一コードブロック内に記載すると混乱を招く

[chvmvd]

現在、一部の箇所でコマンドとその出力が同一コードブロック内に記載されており、それにより混乱を招いている。

例えば、SSHの公開鍵を出力する場面においては、全学自由研究ゼミナールでコードブロックの内容全体をコマンドと勘違いした事例が散見された他、2026年3月3日にはコードブロック内のコマンドとその出力結果を分けていないことで混乱を招いているという指摘が報告された。
cf.

utcode-learn/docs/3-web-servers/10-git-github-init/index.mdx

Lines 119 to 122 in ca5b21a

	```shell
	$ cat ~/.ssh/id_ed25519.pub
	ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIEqE0cyVkFSFD/BlAwvJ9QejXwgyFppn5JDQc8iGW/Gp [ユーザー名]@[コンピューター名]
	```

以上のようなことを防ぐため、次の3つの対策案を考えた。

• コマンドと、コマンドとその出力結果を別のコードブロックに記載する。例えば、Node.jsがインストールされているかを確認する場面では、コマンドとその出力結果を別のコードブロックに分けている。cf.

  utcode-learn/docs/3-web-servers/03-node-js/index.mdx

  Lines 50 to 61 in ca5b21a

  	完了したら、Node.jsのインストールが完了しているか確認するため、次のコマンドを実行します。
  	```shell
  	node -v
  	```
  	次のように表示されたら成功です。
  	```shell
  	$ node -v
  	v22.15.0
  	```

• コマンドを記載したコードブロックは置かず、スクリーンショットのみを置く。スクリーンショットにすることで、どこがコマンドでどこが出力結果であるかが分かりやすいようにする。また、直接コマンドをコピーできなくなるため、出力結果ごとコピペしてしまうことを防ぐことができる。
• 教材中ではこれ以降$の後にコマンドを記載するようにするということを説明する。これにより、教材が冗長でなくなる。

以上の対策案のうち、教材内で冗長な表現になることを防ぐため一旦3つ目の案を採用することにする。1つ目の案では、コマンドと、コマンドとその出力結果を別のコードブロックに記載するため、教材が冗長になってしまうことなどが理由である。もし問題が生じた場合は、今後他の案を検討することにする。

[na-trium-144]

4. user-select: none でコマンドだけを選択可能にする (出力結果の部分を選択不能にする)
   という案もあると思いました。
   Gemini曰く個別のコードブロックに設定するならマジックコメントで、全コードブロックに対して一括で自動処理するならCodeBlockコンポーネントをカスタマイズすればよいらしいです
   https://gemini.google.com/share/c6cd572ee33e

関連する問題としてコードブロックについているコピーボタンが $ を含めてコードブロック全体をコピーしてしまうというのもあると思います。
コピーボタンを使うユーザーがどのくらいいるのかわかりませんが、もしこれも混乱の原因になっているのであれば案3では解決しません。

[chvmvd]

4. user-select: none でコマンドだけを選択可能にする (出力結果の部分を選択不能にする)
   という案もあると思いました。
   Gemini曰く個別のコードブロックに設定するならマジックコメントで、全コードブロックに対して一括で自動処理するならCodeBlockコンポーネントをカスタマイズすればよいらしいです
   https://gemini.google.com/share/c6cd572ee33e

関連する問題としてコードブロックについているコピーボタンが $ を含めてコードブロック全体をコピーしてしまうというのもあると思います。 コピーボタンを使うユーザーがどのくらいいるのかわかりませんが、もしこれも混乱の原因になっているのであれば案3では解決しません。

そうですね。コードブロックをうまくカスタマイズするという方法もあるかと思います。実際に、Pythonのドキュメントなどでもそのような方法が採用されており、コピーボタンを押した場合には出力結果などがコピーされないようになっています。cf. https://docs.python.org/3/tutorial/introduction.html#numbers

また、コピーボタンを押してすべてをコピーしてしまうという事例についてもかなりの数が確認されており、今回のIssueの内容はそれも含んでいる形になっています。このことについてミーティングをした際には、この事象のことも考慮した結果、教材内で冗長になることを防ぐために案3を一旦採用して様子を見るという結論になった形になります。今、コメントしていただいた内容をもとに、現在の結論のまま進めるかについてもう一度ミーティングの際に問題提起をしてみようと思います。