코드 블록 줄 번호

[Lilly (Lillian)]

	요약	게시물 내 여러 줄 코드 블록에 줄 번호를 추가합니다
	미리보기	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 (Jakke Flemming)]

Without trying, but when copying, those line numbers don’t follow, right?

[Lilly (Lillian)]

yea no they don’t work in quoted codeblocks.

[hoangphuctran93 (Hoàng Phúc Trần)]

Please add the option to choose dark or light theme, because my discussion page defaults to light theme but in the code block it is dark theme customization in github style.

This is the state when the discourse page uses a light theme and the codeblock is set to display in dark github style

---

Here I also share some customizations about codeblock display on my discourse page.
Hope it will be useful to someone, and make their discourse page more interesting

/*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);
        }
    }
    
}

You can refer to more here.

[Lilly (Lillian)]

Codeblock Theme Picker

Summary Codeblock Theme Picker will allow you to easily change the theme used in code blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/hljs-theme-picker New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features [Some examples of the colors available] This is just a handful of the available options. This component incl…

[robbie.morrison]

Any chance of this feature being added to the discourse main line? The budget hosting plan I use does not support discretionary plugins and such. And this looks very useful. My thanks to @Lilly and other devs and testers.

[merefield (Robert)]

It’s not a plugin. It’s a Theme Component. I don’t believe you are restricted from using Theme Components?

[robbie.morrison]

@merefield Tx. I have just filed a request for clarification from my provider and been issued a ticket. If anything notable arises, I will report back.

[robbie.morrison]

This is indeed a matter for admins! I went to https://meta.discourse.org/t/code-block-line-numbers/330130, clicked the blue “Install this theme component” button, entered the name of my forum, and then confirmed that action from my forum interface. So far so good.

This feature was then listed as a Component (I guess that is technically a Theme Component) and reports version 0.0.2. But the dialog suggests that this artifact is currently considered an “Unused component”. And simple trials using the three ``` back‑ticks syntax did not render line numbers.

Is there something else I need to do? TIA.

[Lilly (Lillian)]

@robbie.morrison please read the topic post (first post in this topic) because it contains all the information you need, and also refer to these instructions if you are installing theme components on your instance.

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

[merefield (Robert)]

@robbie.morrison

Is there something else I need to do?

Yes. Add the Component to a Theme(s) (Otherwise it will remain “Unused”) and make the Theme active if it isn’t already.

[robbie.morrison]

@merefield @Lilly Many tx. I needed to add this theme component to my “default” theme. As covered here: adding components to a theme. And it works (noting I had earlier added the wrong screenshot):

A couple of comments about the documentation. The correct location is, I believe: Components ▸ Customise ▸ Themes. And the section on adding to themes (see URL above) sounds somewhat more discretionary than it is. Perhaps this wording would be better: "You will need to explicitly add your theme competent to a theme before it will become operational. That includes the “default” theme.

Thanks to everyone for their interest and time. I also have a small bug report for my next posting.

[robbie.morrison]

My bug report as promised. The following code block from GitHub was already line numbered. After installing the theme component titled Discourse Code Block Line Numbers, the alternating blank lines were included.

The original posting is here. And the information came in via a simple URL. More on Sankey diagrams on Wikipedia EN for those interested!

Clarification; by alternating blank lines I mean the fully blank lines without any text whatsoever. The earlier rendering was not spaced out in this manner.

[Lilly (Lillian)]

ah yes the github line number issue. I’ll have a look later this week when I get some time and put a conditional in there. thanks!

[Lilly (Lillian)]

I made some improvements to this component and also added a couple of settings for adding a header title to code blocks and changing the font size. Fixed the Github onebox formatting issues too (thanks for the PR @gormus! ). Updated OP and added new screenshots and a link to theme creator preview.

[Lilly (Lillian)]

This component has been updated again - I fixed a bug where the title was showing on Mermaid diagrams.

Also, @Don did a bit of a refactor of the js, cleaned some code, and also added nicer formatting, including a border and the code language in the header if it is specified in the post. (Thanks Don ).

Updated OP description and screenshots.

[Yt.w]

Hello, This theme component report me error like this

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

[Arkshine]

sticky mixin has been removed from core in a recent PR.
I will make a PR!

---

There we go:
https://github.com/Lillinator/code-block-line-numbers/pull/17

[Lilly (Lillian)]

merged. thanks @Arkshine