👅 마크다운 변형

[keegan (Keegan George)]

개요

이 테마 컴포넌트를 사용하면 게시물을 작성할 때 어떤 마크다운 스타일로 출력을 원하는지 선택할 수 있습니다. 각 마크다운 '플래버’는 웹에서 일반적으로 사용되는 마크다운 형식에서 영감을 받아 만들어졌습니다.

왜 이걸 원할까요?

이것은 순수하게 스타일적인 목적으로 설치하거나, 여기에서 언급된 것과 같은 문제를 해결하기 위해 설치할 수 있습니다.

예시

빠른 링크

코드 가져오기
설치 가이드
미리보기
문서

테마 컴포넌트 설치

[Ivan_Rapekas]

안녕하세요, 이 컴포넌트를 만들어 주셔서 감사합니다!

Windows 11의 다크 테마 환경에서 테스트해 보았습니다. Discourse는 기본 라이트 테마를 사용하고 있습니다.

설명대로 모두 잘 작동하지만, 다음과 같은 문제가 있습니다:

1. flavor=GitHub를 사용하면 테이블이 완전히 검게 보입니다.
2. flavor=Gitlab을 사용하면 헤더가 검게 보입니다.
3. flavor=Bitbucket은 정상적으로 작동합니다.

GitHub:

Gitlab:

[keegan (Keegan George)]

안녕하세요 @Ivan_Rapekas,

이 문제에 대해 알려주셔서 감사합니다. 사용자 시스템의 다크/라이트 모드 설정에 따라 자동으로 변경되는 커스텀 색상 변수를 사용하고 있었습니다. 하지만 Discourse에서 자동 다크 모드 전환이 꺼져 있으면 이 문제가 발생합니다. 특히 Discourse에서 라이트 테마를 사용 중인데 시스템은 다크 모드로 설정된 경우 더 그렇습니다.

간단한 해결책으로 자동 다크 테마 전환을 켜고 끌 수 있는 설정을 추가했습니다. 테마 설정에서 이 항목의 선택을 해제하면 문제가 해결될 것입니다.

[Ivan_Rapekas]

안녕하세요 @keegan 님!

답변과 빠른 수정 감사합니다! 덕분에 해결했습니다.

불행히도, 이 컴포넌트가 모든 경우에서 글꼴을 변경한다는 점을 지적해야 합니다:

a) 컴포넌트 비활성화 상태:

b) 컴포넌트 활성화 상태:

또한 테이블 셀 안의 <kbd> </kbd> 요소도 변경됩니다(비율은 동일함):
a) 원본:

b) 컴포넌트 적용 시:

이것은 단순한 알림일 뿐이며, 수정할 필요는 없다고 생각합니다 .

[keegan (Keegan George)]

@Ivan_Rapekas 네, 맞습니다. 각 마크다운 변형(flavor)에서 사용하는 폰트 선택을 그대로 따라 해보았습니다. (예: GitHub 변형을 선택하면 GitHub.com의 마크다운에 사용되는 폰트가 적용됩니다)

[Ivan_Rapekas]

아, 이해했어요. 정말로, 폰트는 Gitlab/GitHub과 비슷하네요. 설명해 주셔서 감사합니다! 정말 멋진 아이디어네요, "단순히 테마 컴포넌트"일 뿐이라고 기대했던 것보다 훨씬 좋습니다

[Ivan_Rapekas]

@Ivan_Rapekas

a) 원본:

b) 컴포넌트 적용 시:

드디어 Gitlab 레이아웃 위에 원본 코드 블록 포맷을 적용했습니다 (기본 테마에서 작동합니다):

/admin/customize/themes/1/common/scss/edit

// Gitlab 테마 컴포넌트 위에 적용된 원본 <kbd>

.cooked kbd {
    align-items: center;
    border: 1px solid var(--primary-low-mid);
    background: var(--primary-very-low);
    border-bottom-width: 2px;
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--primary);
    display: inline-flex;
    font-size: var(--font-down-1);
    justify-content: center;
    line-height: var(--line-height-large);
    margin: 0 0.15em;
    min-width: 24px;
    padding: 0.15em 0.6em;
}

이렇게 하면:

[Heliosurge (Dan DeMontmorency)]

안녕하세요. 이 컴포넌트가 색상 스키마(예: primary, secondary 등)를 사용하도록 업데이트될지 궁금합니다.

[keegan (Keegan George)]

아직 업데이트할 시간이 없었지만, 머지않아 시간을 내서 업데이트해 보겠습니다.

그동안 이 official 컴포넌트가 필요하신 용도에 맞을 수 있습니다.

사용자 지정 인라인 코드 블록

요약 Customized Inline Codeblocks를 사용하면 인라인 코드 블록의 스타일을 변경하여 코드와 다른 요소 간의 시각적 구분도를 높일 수 있습니다. 미리보기 Discourse Theme Creator에서 미리보기 저장소 링크 https://github.com/discourse/discourse-inline-codeblock-styles Discourse 테마가 처음이신가요? Discourse 테마 사용 입문가이드 이 테마 컴포넌트 설치 기능 컴포넌트 사용 시: [image] 컴포넌트 미사용 시: [image] 설정 이름 설명 인라인 코드 블록 색상 인라인 코드 블록 굵기 인라인 코드 블록 테두리 반경 우리가 호스팅을 하고 계신가요? 테마 컴포넌트는 St…

[Heliosurge (Dan DeMontmorency)]

그건 확실히 멋지긴 하죠. 사실 저는 여기서 더 테이블에 집중하고 있었어요. 이 컴포넌트가 코어 대비 테이블 가독성을 어떻게 향상시키는지 궁금했거든요. 세로 줄 구분선을 사용한 더 전통적인 테이블 레이아웃을 사용하니까요.

팀의 업무량이 얼마나 클지 충분히 이해합니다. 서두를 필요 없어요. 다만 TC를 아주 최근에 발견해서 한번 물어보게 되었을 뿐입니다.