コードブロックのサイジングと配色を改善

私もこの意見に強く同意します。

デフォルトのフォントサイズを15pxから16pxに引き上げました。コードブロックのフォントサイズを13pxに下げるのは大きな変更です。数文字行が増えることと、可読性の向上は良いトレードオフでしょうか?


インラインコードのスタイルも更新されますか?現在、それらは異なる背景色、フォントの色、フォントファミリーを持っています。これは、通常のテキスト、インラインコード要素、コードブロックが多く混在する投稿で非常に顕著です。これにより、インラインコードとブロックのコードスニペットの相互参照が少し難しくなります。


変更とは関係ありませんが(コードブロックに関連しています)- ホバー時のボタンアイコンを改善するアイデアはありますか?12pxと0.7の不透明度では、ほとんど見えません(特にコードと重なっている場合)。

「いいね!」 4

素晴らしい観察です。これは、ボタンが見えすぎたために変更されました。btn-flatに変更されましたが、それが過剰だったことは理解できます。これはコードブロックにカスタムスタイルを適用することを意味するでしょうか?

「いいね!」 1

フォントサイズを大きくしますか?昨日ローカルで14pxを試したのですが、デフォルトのフォントに比べて少しだけ目に優しくなりました。

「いいね!」 3
// これはコメントアウトされたコードです

import Component from "@glimmer/component";
import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
import { service } from "@ember/service";
import DButton from "discourse/components/d-button";
import bodyClass from "discourse/helpers/body-class";
import concatClass from "discourse/helpers/concat-class";
import ReaderModeOptions from "./reader-mode-options";

export default class ReaderModeToggle extends Component {
  @service readerMode;

  get bodyClassText() {
    if (this.readerMode.isTransitioning) {
      return "reader-mode-transitioning reader-mode";
    } else if (this.readerMode.readerModeActive) {
      return "reader-mode";
    } else {
      return "";
    }
  }

  handleDocumentKeydown(e) {
    if (e.ctrlKey && e.altKey && (e.key === "r" || e.key === "®")) {
      this.readerMode.toggleReaderMode();
    }
  }

  @action
  addEventListener() {
    document.addEventListener("keydown", this.handleDocumentKeydown.bind(this));
  }

  @action
  cleanUpEventListener() {
    document.removeEventListener("keydown", this.handleDocumentKeydown);
  }

  <template>
    {{bodyClass this.bodyClassText}}
    <DButton
      {{didInsert this.addEventListener}}
      {{didInsert this.readerMode.setupWidth}}
      {{willDestroy this.cleanUpEventListener}}
      @action={{this.readerMode.toggleReaderMode}}
      @icon="book-reader"
      @preventFocus={{true}}
      title="Toggle Reader Mode (ctrl + alt + r)"
      class={{concatClass
        "icon"
        "btn-default"
        "reader-mode-toggle"
        (if this.readerMode.readerModeActive "active")
      }}
    />
    {{#if this.readerMode.readerModeActive}}
      <ReaderModeOptions />
    {{/if}}
  </template>
}

こちらが最新のアップデートです :point_up_2:

「いいね!」 8

この最新版、@jordan.vidrine さん、とても気に入りました!

「いいね!」 2

最新のアップデートはかなり良くなったと感じています。色合いも気に入っていますし、テキストの16pxフォントとのサイズ競合もなくなりました。

def hello
   puts "hello world"
end

マイナーな点としては、グレーの背景がまだ少し地味に感じられるので、もう少し明るい方が好みです。しかし、全体的にはかなり良い感触です。

@cvx、現在の見解はいかがですか?

「いいね!」 1

三次色の薄いバージョンを使用してみてはどうでしょうか。

rgba(var(--tertiary-rgb), 0.058)

「いいね!」 2

テーマカラーパレットの色を使おうかとも思ったのですが、それが何になるか予測できません。ひどく間違った結果になるかもしれません :grimacing:

でも、青は好きです。

「いいね!」 1

ダークモードですか、それともライトモードですか?
私が選んだグレーは、以前のものより明るい(そう思います)です。var(--primary-50)を使用しています。

「いいね!」 1

@sam / @fitzy この1週間の変化について、どのように感じていますか?

IMO、これをコアにマージすべきです。見た目がずっと良くなりました。
古い配色だと古いサイトで目が痛くなります :slight_smile:

「いいね!」 3

現在の状況はコアのものと比較して、私は間違いなく賛成です。

しかし、コミット 98b2763 の max-height の変更を失いました。これは意図的でしたか?コメントアウトされ、その後のコミットで削除されたのを確認しました。

もしそうなら、ローカルオーバーライドで対応できます。

「いいね!」 1

はい、現在のコードブロックサイズにできるだけ近づけるために削除されました。

「いいね!」 1

マージはこちらのPRで行われます → UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

「いいね!」 1

わかりました、心配いりません。

「いいね!」 1

新しいパディングは .hljs 要素にのみ適用されているようで、単純なコードブロック(ハイライトなし)には適用されません。

hello
console.log("test")

これにより、ハイライト(したがって .hljs クラス)が非同期に適用されるため、初期ロード時に投稿の高さがジャンプすることもあります。

パディングの変更が .hljs クラスがなくてもコードブロックに適用されるように修正できますか?

「いいね!」 6

一貫性を保つために、暗い背景も適用できますか?

「いいね!」 5

これらに気づいていただきありがとうございます!これらのスタイルをhljsブロックだけでなくcodeにも適用されるように更新しました。

「いいね!」 4

さらに修正を追加する必要があります。追加した修正により、インラインコードブロックが独自の行にレンダリングされるようになりました。

これは正しくレンダリングされないインラインコードブロックの例です。

「いいね!」 2

リンクが現在404を返します。PRを指す方が良いかもしれません。
UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub

また、チーム一同、この変更を大変気に入っています。とても素晴らしい出来栄えです!:heart_eyes:

「いいね!」 3