Code-block line numbers

Theme component
1
:information_source: Summary Adds line numbers to multi-line code-blocks in posts
:hammer_and_wrench: Repository https://github.com/Lillinator/code-block-line-numbers
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Description

This is a simple theme component that adds line numbers to code blocks in Discourse posts. It will not add line numbers for inline code or blocks of less than 2 lines.

ie:

1 this code will
2 have line numbers

ths code will not

and neither will this code

There are currently no settings, but I may add some formatting options later. Suggestions welcome. :slight_smile:

Works in desktop and mobile views. :desktop_computer: :iphone: :white_check_mark:

Screenshots

Desktop view, light theme

Screenshot 2024-10-09 at 10.31.50 AM
Screenshot 2024-10-09 at 10.31.50 AM1414×1114 94.3 KB

Mobile view, dark theme

This image appears to be a screenshot of a coding environment, featuring a code editor with a Python script open. The script includes a function called "event_type_text_discourse_plugin" and references various variables and elements, such as "EventTarget" and "Node.Element". The script is designed to perform text-based discourse analysis on event types. The code editor also has a user interface element visible in the screenshot. There is an avatar of a person named Lilly in the top left corner of the image, indicating the profile of the user who is using the code editor. (Captioned by AI)
This image appears to be a screenshot of a coding environment, featuring a code editor with a Python script open. The script includes a function called "event_type_text_discourse_plugin" and references various variables and elements, such as "EventTarget" and "Node.Element". The script is designed to perform text-based discourse analysis on event types. The code editor also has a user interface element visible in the screenshot. There is an avatar of a person named Lilly in the top left corner of the image, indicating the profile of the user who is using the code editor. (Captioned by AI)1290×2062 108 KB

Todo: add line numbers to expanded window view.

:warning: Note: if you are using CSS to wrap code-blocks on your forum, this component will count the wrap. Also, quoted code blocks will not show the line numbers.

10 Likes
2

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

1 Like
3

yea no they don’t work in quoted codeblocks.

2 Likes
4

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

Current Status
Current Status693×274 13 KB

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

terminar like macos
terminar like macos754×219 12.6 KB

/*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.

5
6

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.

7

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

2 Likes
8

@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.

1 Like
9

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.

10

@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.

2 Likes
12

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

2 Likes
13

@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):

The image is a screenshot of a computer interface showing line numbering. (Captioned by AI)
The image is a screenshot of a computer interface showing line numbering. (Captioned by AI)850×350 16.7 KB

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.

14

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 image is a screenshot of a GitHub repository, showing a message about implementing a Sankey plotting of oemof results in a long-time simulation. (Captioned by AI)
The image is a screenshot of a GitHub repository, showing a message about implementing a Sankey plotting of oemof results in a long-time simulation. (Captioned by AI)970×984 71.8 KB

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

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.

1 Like
15

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!

3 Likes