コードブロックの行数を増やし、コードブロックの高さを増やすことで、より多くのコードを通常のビューポートで見えるように、テキストのサイズと行の高さを縮小する実験を行っています。これは、20行を超えるような大きなコードブロックで問題となります。
変更前
変更後
この変更は、以下の場所で行われました。
「いいね！」 16
インラインコードのようにこのようにフォントサイズを変更することは、おそらく意図しない副作用ですか？
「いいね！」 6
意図しないものでした。インラインコードではなく、ブロック全体が変更されるように修正する必要があります。
「いいね！」 2
インラインの等幅テキストのスタイル変更を削除し、<pre>ブロックの行の高さをわずかに増加させるPRを送信しました。
「いいね！」 2
これは残念ながら、短いスニペットの可読性を損なっています。
例：
フォントが小さく、行間が短くなっています。
これは非常に長いコードブロックにのみ影響するのでしょうか？これはコアな変更であるべきでしょうか @jordan.vidrine？
「いいね！」 6
ここで、この実験とStack Overflowの違いを強調したいと思います。
現在の実験
Stack Overflow
すぐに気づいた点がいくつかあります。
- 彼らのフォントはわずかに大きい
- 私たちは関数名が太字ですが、彼らはそうではありません
なぜ私たちのユースケースでタイトルが太字になるのか、hljsについてもっと調べる必要があります。
「いいね！」 2
Stack Overflow を確認してくれたのは嬉しいです。もしコードブロックの表示方法を誰かが理解したとしたら、それは彼らでしょう。\n\nもう一つの観察ですが、フォントサイズは変更しているにもかかわらず、変化していないようです（15px → 13px ですが、色はいくらか補われています）。\n\nビジュアルリズムと行の高さは、ここでずっと良くなったように感じます。\n\nStack Overflow\n\n
\n\n\n現在の実験\n\n\n\n\n\n行の高さは明らかに問題であり、私たちの「縮小」は行き過ぎました。なぜなら、私たちのベースフォントは Stack Overflow よりも大きく、ゆったりしているからです。\n\n— \n\n現在の実験での太字の解除と、サイズ、行の高さを増やすことを強く支持します。
「いいね！」 3
このPRでは、以下の変更が行われました: https://github.com/discourse-org/design-experiments/pull/77
「いいね！」 3
それは素晴らしいですね、ジョーダン。この場合、フォントの太さを一貫させることで読みやすさが向上すると思います。パディングが増加した点も気に入っています。
「いいね！」 3
ありがとうございます。同意します。また、色と、hljsがなぜその色を使用しているのかについても検討したいと思います。この色のパターンはオンラインではどこでも見たことがありません。
「いいね！」 2
タイポグラフィの変更は気に入っていますが、ダークバックグラウンドはやりすぎだと感じます。明るいバックグラウンドの方がずっと読みやすいです。
「いいね！」 2
「いいね！」 1
さらに調査したところ、現在使用している色は、おそらく10年前、あるいは4年前の古いGitHubの配色に基づいていることがわかりました。
デフォルトの色を最新のものに変更する余地はありますか？
GitHubはその後、更新された配色や、デフォルトのライトスキームとして使用できるその他のオプションを提供しています。
Stack Overflow
Atom One Light
New Github
hljs default 
「いいね！」 6
私の個人的な好みとしては、もっと落ち着いた色合いのものが良いです。例の中では、Stack Overflowが私の選択です。
「いいね！」 4
数日経っても小さいフォントサイズは少し目を細めないと読めず、スペースの節約に見合う価値はないと思います。
「いいね！」 4
Stack Overflow（例えば）でも同じように感じますか？ DiscourseとSOの間で、フォントサイズと行の高さの計算は現在同じです。
Discourseのmax-heightは、600pxに対して500pxとわずかに低くなっています。
「いいね！」 3
ええ、あなたの言いたいことはわかります。
私がアップロードしたPRのこれらの変更についてどう思いますか？https://github.com/discourse-org/design-experiments/pull/79
これは、プライマリまたはセカンダリに基づくものではなく、ダークモードの背景に黒を追加するオプションです。rgba(0,0,0,0.25)を介してこれを行います。
「いいね！」 6
コードブロックの行番号コンポーネント/テーマ機能も含まれている最新のテストを誰か行っていただけますか？よろしくお願いします。