코드 블록 줄 번호

Lilly · 10월 9, 2024, 5:45오후


	요약	게시물 내 여러 줄 코드 블록에 줄 번호를 추가합니다
	미리보기	Discourse Theme Creator에서 미리보기
	리포지토리	https://github.com/Lillinator/code-block-line-numbers
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	Discourse 테마 초보자?	Discourse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

설명

이것은 Discourse 게시물의 코드 블록에 줄 번호를 추가하는 간단한 테마 컴포넌트입니다. 인라인 코드, 2줄 미만의 블록, 인용된 코드 블록에는 줄 번호를 추가하지 않습니다. 또한 Github onebox 코드도 무시합니다. 이 외에도, 컴포넌트를 통해 글꼴 크기를 변경하고, 코드 언어가 지정된 경우(첫 번째 코드 펜스 뒤에 지정된 경우) 코드 언어 앞에 표시되는 헤더 제목을 추가할 수 있습니다.

이 작업에 대한 @Don 님의 훌륭한 기여에 감사드립니다.

데스크톱 및 모바일 뷰에서 작동합니다.

다크 모드, 제목 포함:

라이트 모드, 제목 없음 - 미리보기기에서:

게시물 결과:

설정 항목이 두 가지 있습니다.

설정	설명
`code-block header title`	지정된 경우 코드 언어 앞에 텍스트 헤더 제목을 추가합니다 (없으면 비워두세요)
`code-block text size`	코드 블록의 텍스트 크기(px) (기본값을 유지하려면 비워두세요)

참고: 포럼에서 CSS를 사용하여 코드 블록을 감싸고 있다면, 이 컴포넌트는 그 래핑을 계산에 포함시킵니다.

Jagster · 10월 9, 2024, 5:58오후

노력하지 않아도, 복사할 때 그 줄 번호는 따라오지 않죠?

Lilly · 10월 9, 2024, 5:59오후

아니, 인용 코드 블록에서는 작동하지 않아.

hoangphuctran93 · 10월 13, 2024, 2:07오후

어둡거나 밝은 테마를 선택할 수 있는 옵션을 추가해 주세요. 제 토론 페이지는 기본적으로 밝은 테마를 사용하지만, 코드 블록은 GitHub 스타일의 어두운 테마로 커스터마이징되어 있습니다.

다음은 디스코urs 페이지가 밝은 테마를 사용하고 코드 블록이 어두운 GitHub 스타일로 설정된 상태입니다.

여기 제 디스코urs 페이지의 코드 블록 표시에 대한 몇 가지 커스터마이징도 공유합니다.
누군가에게 유용하고, 디스코urs 페이지를 더 흥미롭게 만드는 데 도움이 되기를 바랍니다.

/*CSS Codeblock like terminar macos*/
.codeblock-buttons {
    box-shadow: 0px 0px 10px rgba(0,0,0,.4);
    border-radius: 7px 7px 0 0;
    display: flex;
    flex-direction: column;
    &:before{
        content:'Business Lab';
        display: grid;
        justify-content: center;
        font-family: var(--d-font-family--monospace);
        font-weight: bold;
        padding: 5px;
        background-color: #E8E6E8;
        color: black;
        order:1;
    }
    &:after{
        content:"";
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 15px;
        margin-left: 2px;
        border-width: 1px;
        border-style: solid;
        background: #EC6A5F;
        border-color: #D04E42;
        order:2;
        position: absolute;
        top: 10px;
        left: 5px;
    }
    & .codeblock-button-wrapper{
        right: .5rem !important;
        top: .25em !important;
        order:3;
        width: 100%;
        &:before{
            content:"";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 15px;
            margin-left: 2px;
            border-width: 1px;
            border-style: solid;
            background: #F5C04F;
            border-color: #D6A13D;
            position: absolute;
            top: 6.5px;
            left: 30px;
        }
        &:after{
            content:"";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 15px;
            margin-left: 2px;
            border-width: 1px;
            border-style: solid;
            background: #64CC57;
            border-color: #4EA73B;
            position: absolute;
            top: 6.5px;
            left: 48px;
        }
        & .btn.nohighlight{
            padding: .7em;
            float: right;
            &.copy-cmd{
                position: absolute;
                right: 0px;
            }
            &.fullscreen-cmd{
                position: absolute;
                right: 3.2em;
            }
            &.copy-cmd:not(.action-complete), &.fullscreen-cmd:not(.action-complete){
                opacity: 1;
                visibility: visible;
            }
        }
    }
    & code{
        order:4;
    }
}

/*CSS Discourse Code Block Line Numbers*/
code{
    &.lines-decorator{
        padding: 0px;
        &.lines-shadow{
            background-image: linear-gradient(to right, var(--github) 25%, transparent), linear-gradient(to left, var(--github) 25%, transparent), linear-gradient(to right, var(--github), transparent), linear-gradient(to left, var(--github), transparent);
        }
        &.lines-number:not(.lines-count-1):not(.lines-in-quote) span.lines-line::before{
            background-color: #263238;
            color: rgba(233, 237, 237, 1);
        }
    }
    
}

더 자세한 내용은 여기를 참고하세요.

Lilly · 10월 13, 2024, 2:09오후

코드 블록 테마 선택기 Theme component

요약 Codeblock Theme Picker를 사용하면 코드 블록에 사용할 테마를 쉽게 변경할 수 있습니다. 미리보기 Discourse Theme Creator에서 미리보기 레포지토리 링크 https://github.com/discourse/hljs-theme-picker Discourse 테마를 처음 접하는 분? Discourse 테마 사용 가이드 이 테마 컴포넌트 설치 기능 [사용 가능한 색상의 몇 가지 예시] 이것은 사용 가능한 옵션 중 일부일 뿐입니다. 이 컴포넌트에는 hljs 레포지토리에서 제공되는 모든 90가지 옵션이 포함되어 있습니다. 이 컴포넌트에는 모든 옵션이 포함되어 있지만, 사용자가 선택한 옵션만 로드됩니다. 따라서 오버헤드가 없습니다. 사용 방법 이 컴포넌트의 구성 방…

robbie.morrison · 10월 14, 2024, 11:19오전

이 기능이 discourse 메인 라인에 추가될 가능성이 있을까요? 제가 사용하는 예산형 호스팅 플랜은 임의의 플러그인 등을 지원하지 않습니다. 그런데 이 기능이 매우 유용해 보입니다. @Lilly 님과 다른 개발자, 테스터 분들께 감사드립니다.

merefield · 10월 14, 2024, 11:25오전

이것은 플러그인이 아닙니다. 테마 컴포넌트입니다. 테마 컴포넌트 사용에 제한이 있다고 생각하지는 않습니다만.

robbie.morrison · 10월 14, 2024, 11:42오전

@merefield 감사합니다. 방금 제 서비스 제공업체에 명확한 설명을 요청하는 티켓을 접수했습니다. 중요한 사항이 발생하면 다시 알려드리겠습니다.

robbie.morrison · 10월 14, 2024, 5:35오후

이 문제는 정말로 관리자만 처리할 수 있는 사안입니다! 저는 https://meta.discourse.org/t/code-block-line-numbers/330130으로 가서 파란색 “이 테마 컴포넌트 설치” 버튼을 클릭하고, 내 포럼 이름을 입력한 다음, 포럼 인터페이스에서 해당 작업을 확인했습니다. 지금까지는 순조롭습니다.

이 기능이 컴포넌트(기술적으로는 테마 컴포넌트일 것 같습니다) 목록에 표시되고 버전 0.0.2로 보고됩니다. 그러나 대화상자는 이 아티팩트가 현재 "미사용 컴포넌트"로 간주되고 있다고 제안합니다. 그리고 세 개의 ``` 백틱 구문을 사용한 간단한 테스트에서는 줄 번호가 렌더링되지 않았습니다.

다른 작업을 수행해야 하는 것이 있을까요? 미리 감사드립니다.

Lilly · 10월 14, 2024, 5:39오후

@robbie.morrison 이 토픽의 첫 번째 게시글(토픽 포스트)을 읽어보시기 바랍니다. 필요한 모든 정보가 포함되어 있습니다. 또한 인스턴스에 테마 구성 요소를 설치하는 경우 아래 지침도 참고해 주세요.

merefield · 10월 14, 2024, 6:01오후

네. 컴포넌트를 테마(들)에 추가해야 합니다(그렇지 않으면 “미사용” 상태로 남게 됩니다). 또한 해당 테마가 아직 활성화되어 있지 않다면 활성화해야 합니다.

robbie.morrison · 10월 14, 2024, 6:19오후

@merefield @Lilly 감사합니다. 이 테마 컴포넌트를 “기본” 테마에 추가해야 했습니다. 여기에 설명되어 있듯이요: 테마에 컴포넌트 추가. 그리고 작동합니다 (이전에 잘못된 스크린샷을 추가했음을 참고해 주세요):

문서에 대한 몇 가지 코멘트가 있습니다. 올바른 위치는 아마도 다음과 같을 것입니다: 컴포넌트 ▸ 사용자 정의 ▸ 테마. 그리고 테마에 추가하는 방법에 대한 섹션(위 URL 참조)은 실제보다 다소 임의적으로 들립니다. 다음 문구가 더 좋을 것 같습니다: “테마 컴포넌트가 작동하려면 테마에 명시적으로 추가해야 합니다. 여기에는 “기본” 테마도 포함됩니다.”

관심과 시간을 내어주신 모든 분께 감사드립니다. 다음 게시물에는 작은 버그 보고도 하나 올릴 예정입니다.

robbie.morrison · 10월 14, 2024, 6:30오후

약속대로 버그 리포트를 올립니다. GitHub의 다음 코드 블록에는 이미 줄 번호가 매겨져 있었습니다. Discourse Code Block Line Numbers라는 제목의 테마 구성 요소를 설치한 후, 빈 줄이 번갈아 나타나는 현상이 발생했습니다.

원래 게시글은 여기에 있습니다. 그리고 해당 정보는 단순한 URL을 통해 전달되었습니다. 관심 있는 분들을 위해 위키백과 영어판에서 산케이 다이어그램에 대해 더 자세히 알아볼 수 있습니다!

설명; 여기서 말하는 번갈아 나타나는 빈 줄이란 텍스트가 전혀 없는 완전히 빈 줄을 의미합니다. 이전 렌더링에서는 이러한 방식으로 간격이 벌어져 있지 않았습니다.

Lilly · 10월 14, 2024, 6:52오후

아, 네. GitHub의 줄 번호 문제였군요. 이번 주에 시간이 나면 확인해서 조건문을 추가해 보겠습니다. 감사합니다!

Lilly · 11월 3, 2024, 8:55오후

이 컴포넌트에 몇 가지 개선 사항을 적용하고, 코드 블록에 헤더 제목을 추가하고 글자 크기를 변경할 수 있는 설정도 두 가지 추가했습니다. GitHub 원박스(Onebox) 서식 문제도 수정했습니다(@gormus님의 PR 감사합니다! ). 원포스터(OP)를 업데이트하고 새로운 스크린샷과 테마 제작자 미리보기 링크를 추가했습니다.

Lilly · 11월 9, 2024, 8:29오후

이 컴포넌트가 다시 업데이트되었습니다. 메르maid 다이어그램에 제목이 표시되던 버그를 수정했습니다.

또한 @Don이 js를 일부 리팩토링하고 코드를 정리했으며, 게시물에서 지정된 경우 헤더에 언어 이름과 테두리를 포함하여 더 나은 포맷팅을 추가했습니다. (Don, 고마워요 ).

OP 설명과 스크린샷을 업데이트했습니다.

Yt.w · 3월 1, 2025, 7:21오후

안녕하세요, 이 테마 컴포넌트에서 다음과 같은 오류가 보고되었습니다.

Error: Undefined mixin. ╷ 17 │ @include sticky; │ ^^^^^^^^^^^^^^^ ╵ line-numbers.scss 17:9 @import /var/www/discourse/common.scss 1:570 root stylesheet

Arkshine · 3월 1, 2025, 7:24오후

sticky 믹신이 최근 PR을 통해 코어에서 제거되었습니다.
PR을 만들겠습니다!

여기 있습니다:

Lilly · 3월 3, 2025, 6:41오전

병합했습니다. @Arkshine 님 감사합니다

글		댓글	조회수
How to add line numbers to code blocks? Product Support	8	1463	10월 8, 2024
Is it possible to show line numbers in code block? Product Support	7	7860	12월 5, 2021
Codeblock Theme Picker Theme component official , codeblock-theme-picker	18	5305	1월 19, 2026
Change styling of inline code blocks so they stand out more UX	19	4200	6월 8, 2022
Click To Edit Plugin	26	1531	8월 10, 2025

코드 블록 줄 번호

설명

Related topics