# Code-block line numbers
**URL:** https://meta.discourse.org/t/code-block-line-numbers/330130
**Category:** Theme component
**Tags:** code
**Created:** [October 9, 2024, 5:45pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130 "2024-10-09T17:45:25Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 9, 2024, 5:45pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/1 "2024-10-09T17:45:25Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Adds line numbers to multi-line code-blocks in posts |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Lilly/codeblock-line-numbering) |
| 🛠 | **Repository** | [https://github.com/Lillinator/code-block-line-numbers](https://github.com/Lillinator/code-block-line-numbers) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
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.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [October 9, 2024, 5:58pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/2 "2024-10-09T17:58:42Z")
Without trying, but when copying, those line numbers don’t follow, right?
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 9, 2024, 5:59pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/3 "2024-10-09T17:59:54Z")
yea no they don’t work in quoted codeblocks.
---
### Author:  [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [October 13, 2024, 2:07pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/4 "2024-10-13T14:07:02Z")
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
/*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
/*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_](https://businesslab.vn/t/trinh-t-x-ly-logic-c-a-cau-l-nh-select-trong-sql/212).
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 13, 2024, 2:09pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/5 "2024-10-13T14:09:39Z")
> [@Codeblock Theme Picker](https://meta.discourse.org/t/codeblock-theme-picker/146396):
>
> discourse2Summary Codeblock Theme Picker will allow you to easily change the theme used in code blocks.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/codeblock-theme-picker)hammer_and_wrenchRepository Link [https://github.com/discourse/hljs-theme-picker](https://github.com/discourse/hljs-theme-picker)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features This is just a handful of the available options. This component incl…
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [October 14, 2024, 11:19am UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/6 "2024-10-14T11:19:07Z")
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.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [October 14, 2024, 11:25am UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/7 "2024-10-14T11:25:07Z")
It’s not a plugin. It’s a Theme Component. I don’t believe you are restricted from using Theme Components?
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [October 14, 2024, 11:42am UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/8 "2024-10-14T11:42:13Z")
@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.
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [October 14, 2024, 5:35pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/9 "2024-10-14T17:35:38Z")
This is indeed a matter for admins! I went to [https://meta.discourse.org/t/code-block-line-numbers/330130](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.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 14, 2024, 5:39pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/10 "2024-10-14T17:39:15Z")
@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](https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand 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…
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [October 14, 2024, 6:01pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/12 "2024-10-14T18:01:01Z")
> [@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.
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [October 14, 2024, 6:19pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/13 "2024-10-14T18:19:39Z")
@merefield @Lilly Many tx. I needed to add this theme component to my “default” theme. As covered here: [adding components to a theme](https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682#adding-theme-components-to-a-theme-2). 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.
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [October 14, 2024, 6:30pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/14 "2024-10-14T18:30:35Z")
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](https://forum.openmod.org/t/tracking-the-source-of-allocated-energy-flows-in-energy-systems/4860/4). And the information came in via a simple URL. More on [Sankey diagrams](https://en.wikipedia.org/wiki/Sankey_diagram) 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.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 14, 2024, 6:52pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/15 "2024-10-14T18:52:28Z")
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!
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [November 3, 2024, 8:55pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/16 "2024-11-03T20:55:39Z")
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.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [November 9, 2024, 8:29pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/19 "2024-11-09T20:29:19Z")
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.
---
### Author:  [@Yt.w](https://meta.discourse.org/u/Yt.w)
#### Post date: [March 1, 2025, 7:21pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/20 "2025-03-01T19:21:32Z")
Hello, This theme component report me error like this
```plaintext
Error: Undefined mixin. ╷ 17 │ @include sticky; │ ^^^^^^^^^^^^^^^ ╵ line-numbers.scss 17:9 @import /var/www/discourse/common.scss 1:570 root stylesheet
```
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [March 1, 2025, 7:24pm UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/21 "2025-03-01T19:24:19Z")
`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](https://github.com/Lillinator/code-block-line-numbers/pull/17)
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [March 3, 2025, 6:41am UTC](https://meta.discourse.org/t/code-block-line-numbers/330130/22 "2025-03-03T06:41:00Z")
merged. thanks @Arkshine 🙂