인라인 코드 블록의 스타일을 변경하여 더 눈에 띄게 만드세요

Teams 고객 중 한 명이 더 눈에 띄는 인라인 코드 블록을 요청하고 있습니다. 현재 다크 모드든 라이트 모드든 코드 블록의 색상이 다른 텍스트와 크게 다르지 않습니다. Discourse에서 기본적으로 텍스트 색상을 변경하여, 예를 들어 빨간색처럼 더 눈에 띄는 색상을 사용할 수 있을까요?

대부분의 고객은 사이트의 CSS를 변경할 수 있는 테마 커스터마이징을 통해 이 문제를 해결할 수 있어 큰 문제가 아니지만, Discourse for Teams에서는 이러한 수준의 커스터마이징이 불가능합니다. 반면 코드를 다루는 팀들에게는 코드가 다른 텍스트와 매우 명확하게 구별되는 것이 매우 중요합니다.

2개의 좋아요

토비아스, 감사합니다. 기록을 위해 말씀드리자면, 저는 고객이며 인라인 블록에 대해서만 이야기하고 있습니다. 여러 줄(multiline)에 대해서는 전혀 우려가 없습니다.

2개의 좋아요

네, 멀티라인 블록이 꽤 멋지네요.

다른 방법으로 텍스트를 강조할 수도 있지만, 당연히 백틱이 가장 빠릅니다.

2개의 좋아요

기록을 위해 말하자면, 나처럼 HTML에 익숙하지 않은 분들을 위해 (검색해서 찾았거든요):

  1. Fancy!는 <kbd>Fancy!</kbd>로 만듭니다.
  2. Ohhhh!는 <ins>Ohhhh!</ins>로 만듭니다.

알아두면 유용하네요, @tobiaseigen 감사합니다.
this의 CSS를 조정하는 것이 더 합리적이라고 여전히 생각합니다. 백틱을 많이 사용하는 기술 관련 게시글들이 몇 개 있는데, 두 가지 대안을 모두 사용하는 것은 분명히 사용자 친화적이지 않거든요.

3개의 좋아요

다음에 쓸 팁: 어떻게 하는지 알고 싶은 포스트를 인용(quote)하면, 그 방법을 바로 확인할 수 있습니다.

3개의 좋아요

죄송합니다! 보통은 그 요령을 알려드리겠지만, 제가 휴대폰으로 보고 있어 급한 상황이었습니다.

게시글이 어떻게 작성되었는지 확인하는 또 다른 유용한 요령은 원본 URL을 사용하는 것입니다. 예: https://meta.discourse.org/raw/57255/7

4개의 좋아요

오, 내가 자꾸 잊어버리는 또 다른 좋은 하이라이트 방법이 하나 더 있어요. 이렇게 생겼고 이 HTML 마크업 <mark>text</mark>을 사용해서 구현됩니다. 커뮤니티에서 기여한 테마 컴포넌트(Teams에서는 사용할 수 없음)가 있어서 ==text==를 대신 사용할 수 있는데, 꽤 편리합니다. 왜인지 바로 찾지 못하고 있네요.

아무튼, 코드 블록의 기본 스타일을 더 눈에 띄게 업데이트하는 문제에 대해 동료들과 논의할 예정입니다. 아마도 코드 블록 배경색만 더 뚜렷하게 변경해도 충분할 것 같습니다.

3개의 좋아요

코어에서 인라인 코드 블록을 변경하는 PR이 있습니다: PR: Inline code block styling edits - Pull Request #16394 - discourse/discourse - GitHub

6개의 좋아요

죄송합니다… 일단 롤백하겠습니다.

3개의 좋아요

인라인 코드는 항상 일반 코드처럼, 코드(모노스페이스) 폰트로 표시되었습니다. 실제로 매우 밝고 눈에 거슬리는 스타일은 커뮤니티에 크게 의존할 것이며, 웹에서 대부분의 장소에서 code가 사용되는 방식과 확실히 일치하지 않을 것입니다.

구문 강조(syntax highlighting) 문제는 다릅니다. 어떤 구문을 다루고 있는지 결정하려면 여러 줄의 코드가 필요합니다. 아마 이것이 문제의 근원이었을 것입니다 – 구문 강조를 원한다면 코드의 블록이 필요합니다. 예를 들어

var x, y, z;  // 3개의 변수 선언
x = 5;    // x에 값 5를 할당
y = 6;    // y에 값 6을 할당
z = x + y;  // x와 y의 합을 z에 할당

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";

단일 code 요소는 구문 강조에 필요한 모든 컨텍스트와 분리되어 있습니다. 하지만 JavaScript의 단일 줄은 수행할 수 있습니다:

"the value of z is " + z + ".";

이는 다음과 같이 보입니다

``` javascript
"the value of z is " + z + ".";
```

따라서 이것은 코드 블록과 단어 하나짜리 코드에 관한 문제라고 추측할 수 있습니다.

3개의 좋아요

@jordan.vidrine 님, 여기서 진행 지시가 있는 것 같습니다. 그냥 해당 변경 사항을 완전히 되돌려야 할 것 같아요. "대체 코드 스타일"을 위한 테마 컴포넌트를 만들어서, 인라인 코드를 슬랙처럼 붉은색으로 표시하는 방식도 괜찮을 것 같습니다. 컴포넌트이니까요.

3개의 좋아요

최근 반복된 변경 사항은 Meta에서 활성화된 테마 컴포넌트였으며, 실제 변경 사항은 아니었기 때문에 해당 항목을 비활성화했습니다.

4개의 좋아요

이 변경 사항을 하지 않는 것도 괜찮습니다. :+1:

여기서 실제로 원했던 것은 토론에서 텍스트를 강조하는 빠르고 쉬운 방법이었을 것입니다. 많은 사람들이(저도 포함해서) 텍스트를 강조하기 위해 백틱(`)을 사용하곤 합니다. 정말 쉬우니까요. 쉬프트 키를 누를 필요도 없고, 메뉴에서도 쉽게 찾을 수 있습니다. 하지만 단락 내 나머지 텍스트와 구분이 잘 되지 않습니다.

굵게와 기울임도 메뉴에 있지만, 이 역시 눈에 잘 띄지 않습니다. 인라인으로 텍스트를 강조하는 다른 방법들은 더 많은 키 입력을 요구합니다. 또한 잘 문서화되어 있지 않아 내부 지식이 필요합니다.

제가 아는 범위 내에서 가장 좋은 것들은 다음과 같습니다:

Button <kbd>Button</kbd>
Green underline <ins>Green underline</ins>
Red strikethrough <del>Red strikethrough</del>
Highlight <mark>Highlight</mark>
Strikethrough <strike>Strikethrough</strike>

플러그인을 설치할 수 있는 사용자를 위해 공식 Discourse BBCode color 플러그인이 있습니다. 그리고 플러그인을 설치할 수 없는 사용자를 위해 @merefield 님이 Discourse Coloured Text 테마 컴포넌트를 만들었습니다.

==highlight==를 highlight로 변환하던 테마 컴포넌트도 마음에 들었지만, 메타에서 그踪迹를 잃어버렸습니다.

3개의 좋아요

현재로서는 플러그인에서 처리해야 합니다. 단순히 클라이언트 사이드 변환만 수행하는 것이 아니라 HTML에 직접 반영(bake)하고 싶을 것이기 때문입니다.

https://markdown-it.github.io/ 를 보면, markdown-it에서 비엄격(non-strict) 모드일 경우 기본적으로 활성화되어 있는 것으로 보입니다. @Vitaly ?

3개의 좋아요

흥미롭네요. 설명해 주셔서 감사합니다.

오늘 Customization > Plugin 카테고리를 스크롤하다가 우연히 이 기능을 수행하는 플러그인을 찾았습니다. 어떤 경우에는 플러그인을 찾기 위한 적절한 키워드가 생각나지 않는 경우가 있죠. :rofl:

2개의 좋아요

아, 그렇군요… 루트 구현체는 여기 있습니다:

1개의 좋아요

해결책과 무관하게, 현재 코드 블록 디자인에는 명확한 UX 문제가 있다고 생각합니다. 대비가 거의 없습니다.

@codinghorror를 인용하자면, 오히려 "웹의 대부분"은 이러한 문제를 보이지 않는다고 말할 수 있습니다.

GitHub를 참고해 보세요:

또는 Slack:
image

심지어 Notion도 마찬가지입니다.
image

저는 초록색 밑줄과 하이라이트가 불필요하게 대비가 너무 높은 정확히 반대편 문제에 직면해 있다고 주장하고 싶습니다. 하지만 이는 UX 문제라기보다는 취향의 문제입니다.

더 어두운 회색 배경과 패딩을 적용하여 GitHub 방식을 구현하는 것은 어떨까요?

2개의 좋아요

여기서 복잡해지는 점은, 현재 은은한 스타일에 익숙한 수많은 Discourse 인스턴스마다 거대한 변경을 주장해야 한다는 것입니다. 이는 상당한 무리한 요구입니다.

대부분의 설치 환경에서는 이미 CSS를 추가하는 우회 방법이 존재합니다.

1개의 좋아요