이 의견에 매우 공감합니다.
기본 글꼴 크기를 15px에서 16px로 늘렸습니다. 코드 블록의 글꼴 크기를 13px로 줄이는 것은 큰 변화입니다. 한 줄당 몇 자 더 들어가는 것이 가독성 저하와 맞바꿀 만한 거래일까요?
인라인 코드 스타일링도 업데이트될 예정인가요? 현재 인라인 코드는 배경색, 글꼴 색, 글꼴 패밀리가 모두 다릅니다. 일반 텍스트, 인라인 코드 요소, 코드 블록이 많이 섞인 게시물에서는 이것이 매우 두드러집니다. 인라인 코드와 블록 스니펫을 서로 참조하는 것이 약간 더 어려워집니다.
변경 사항과는 무관하지만(코드 블록과 관련은 있음) - 마우스를 올리면 나타나는 버튼 아이콘을 개선할 아이디어가 있을까요? 12px 크기와 0.7의 투명도로 설정되어 있어 거의 보이지 않습니다(특히 코드와 겹칠 때).
좋은 관찰이네요. 버튼이 너무 잘 보여서 변경한 것이었습니다. btn-flat으로 변경했지만, 아마도 너무 과한 변경이었을 수 있습니다. 코드 블록에 적용할 맞춤형 스타일이 필요한 것 같습니다.
글자 크기를 키워야 할까요? 어제 로컬에서 14px로 실험해 봤는데, 기본 글꼴보다는 덜 거슬립니다.
// 이것은 주석 처리된 코드입니다
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="리더 모드 전환 (ctrl + alt + r)"
class={{concatClass
"icon"
"btn-default"
"reader-mode-toggle"
(if this.readerMode.readerModeActive "active")
}}
/>
{{#if this.readerMode.readerModeActive}}
<ReaderModeOptions />
{{/if}}
</template>
}
최신 업데이트입니다 
이번 최신 버전을 정말 좋아해요, @jordan.vidrine!
나에게는 최신 업데이트가 훨씬 더 좋아 보인다. 색상도 마음에 들고, 텍스트의 16px 폰트와 크기가 충돌하지 않는 것도 좋다.
def hello
puts "hello world"
end
조금 아쉬운 점은 회색 배경이 여전히 다소 칙칙하게 느껴진다는 것인데, 아주 약간 더 밝은 색을 선호한다. 하지만 전반적으로는 꽤 만족스럽다.
@cvx 현재 의견은 어떤가?
테마 색 팔레트의 색상을 사용하는 것도 생각해보았지만, 그 색상이 무엇일지 예측할 수 없어요. 최악의 선택이 될 수도 있거든요 
그래도 파란색은 좋긴 해요
다크 모드인가요, 라이트 모드인가요?
제가 선택한 회색은 이전 것보다 더 밝은 색입니다 (그렇게 생각합니다). var(--primary-50)을 사용했습니다.
개인적으로 이걸 코어에 병합하는 게 좋다고 생각해. 지금은 훨씬 좋아 보이거든.
기존 색상 스킴은 옛날 사이트에서 보면 눈이 아플 정도야 
코어에 있는 것보다 현재 상태가 훨씬 낫다고 생각합니다.
다만, 커밋 98b2763에서 max-height에 대한 변경 사항이 사라졌습니다. 이는 의도된 것일까요? 주석 처리된 후, 이후 커밋에서 삭제된 것을 확인했습니다.
만약 의도된 것이라면, 로컬에서 오버라이드하는 방식으로 대응할 수 있습니다.
네, 현재 코드 블록 크기에 최대한 가깝게 유지하기 위해 삭제했습니다.
병합은 이 PR에서 진행됩니다 → UX: Codeblocks experiment merge - Pull Request #29870 - discourse/discourse - GitHub
네, 괜찮습니다.
새 패딩이 .hljs 요소에만 적용되는 것 같습니다. 즉, 하이라이팅이 없는 단순한 코드 블록에는 패딩이 적용되지 않습니다:
hello
console.log("test")
또한 하이라이팅(따라서 .hljs 클래스)이 비동기적으로 적용되기 때문에 초기 로드 시 게시글 높이가 점프하는 문제도 발생합니다.
.hljs 클래스가 없더라도 코드 블록에 패딩 변경 사항이 적용되도록 수정할 수 있을까요?
일관성을 위해 더 어두운 배경도 적용할 수 있을까요?
이 부분을 알아봐 주셔서 감사합니다. 해당 스타일을 hljs 블록뿐 아니라 code에도 적용되도록 업데이트했습니다.
여기에도 또 다른 수정이 필요합니다. 제가 추가한 수정 사항으로 인해 인라인 코드 블록이 이제 잘못되어 별도의 줄에 렌더링되고 있습니다.
이것은 잘못 렌더링되는 인라인 코드 블록의 예시입니다.
링크가 이제 404를 반환합니다. PR을 가리키는 것이 더 합리적일 수 있습니다.
UX: Codeblocks experiment merge by jordanvidrine · Pull Request #29870 · discourse/discourse · GitHub
또한, 저와 팀은 이 변경 사항을 정말 좋아합니다. 정말 멋져 보입니다! 