Forem Creators and Builders 🌱

Cover image for Code blocks with line numbers
Luis Velásquez
Luis Velásquez

Posted on

Code blocks with line numbers

#features #discuss #backend #frontend

Why is it needed?

  1. Compared to current markdown code blocks:

    • Explaining specific lines of code would be much easier.

  2. Compared to screenshots of our editor:

    • It would be just plain text, instead of a bunch of bytes. This means a lower carbon footprint 🌎 and a cheaper bill.
    • It has faster rendering.
    • It's responsive.
    • You can copy the code.
    • In Forem posts tall images are scaled, so large snippets doesn't work.

  3. Compared to other Liquid tag-based solutions, like GitHub Gist or CodePen:

    • It would inherit FOREM's CSS theme, for greater consistency.
    • There is a bug in the Gist tag.

Suggested solution(s)

I was thinking of a new Liquid tag:

{% snippet lang=vue %}
   // ...
{% endsnippet %}
Enter fullscreen mode Exit fullscreen mode

But maybe changing images' max-height would be a quicker fix.

What do you think?

Top comments (3)

Collapse
 
michaeltharrington profile image
Michael Tharrington •

Good thing to point out!

I can totally see the extra value in adding line numbers to coding blocks... like ya said, it makes it way easier to reference specific lines in the code.

Collapse
 
link2twenty profile image
Andrew Bone •

Glad to see this request back. Here's the discussion we had a couple of years back.

Feature Request: Add the option to include line numbers in code blocks #1236

Some-Dood avatar
Some-Dood posted on

I currently enjoy the benefits of having syntax-highlighted code blocks in my articles or comments. It makes the code stand out from the rest of the text. However, there may be times when it is necessary to reference a line number in a code block for a clearer explanation of a particular line.

In that case, I open this issue to request for an option to add line numbers in code blocks. I believe this is possible with Jekyll? Knowing that Hofstadter's Law exists, I hope that it wouldn't be too hard to implement.

Perhaps line numbers can be globally enabled through the front matter?

---
title: Line numbers in code blocks are cool!
tags: meta
linenos: true
---
Enter fullscreen mode Exit fullscreen mode

Or perhaps it can be enabled inline with each code block?

---
title: Individual Code Block Activation
tags: meta
---

# Example of Unactivated Code Block
```javascript
console.log('I have no line numbers... 😟');
```

# Example of Inline Activation
```javascript linenos
console.log('I have inline line numbers! Yay! 🎉');
```
Enter fullscreen mode Exit fullscreen mode

Perhaps it could even be globally enabled by default?

Anyway, that's pretty much this entire feature request. Looking forward to the day this becomes possible! Thanks for reading!

View on GitHub
Collapse
 
luvejo profile image
Luis Velásquez •

I'm glad it wasn't just me. Thanks for bring it up, Andrew!

Read next

networkict profile image

IT Networking in dubai

networkict1 -

booms profile image

CBD Kaufen – Eine natürliche Alternative bei Stress und Schlafproblemen

SHEER -

smartchoiceuniforms profile image

Uniform manufacturers dubai

smartchoiceuniforms -

statementtuxedos profile image

tuxedo jacket

statementtuxedos -