Code-block line numbers

[Lilly]

	Summary	Adds line numbers to multi-line code-blocks in posts
	Preview	Preview on Discourse Theme Creator
	Repository	https://github.com/Lillinator/code-block-line-numbers
	Install Guide	How to install a theme or theme component
	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, blocks of less than 2 lines, or to quoted code blocks. It also ignores Github onebox code. As well, the component will allow you to change the font size and add a header title that will appear before the code language (if it is specified after the first code fence).

Thanks to @Don for the great work on this too.

Works in desktop and mobile views.

Dark mode, with title:

Light mode, without title - in previewer:

Post result:

There are two settings.

Setting	Description
code-block header title	adds a text header title to code blocks before the code language if it’s specified (leave blank for none)
code-block text size	text size in px for code blocks (leave blank for default)

---

Note: if you are using CSS to wrap code-blocks on your forum, this component will count the wrap.

[Jagster (Jakke Lehtonen)]

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

[Lilly]

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]

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]

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

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]

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]

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.