The code sample block with line number


(drawyan) #1

It would be the best if we could get the line numbers along with the code snippets using code sample block.
Sometimes the code gets long and it’s very hard to refer to when multiple users are talking about it.

Here’s what it looks like right now:

        for (var i=0; i<len; i++) {
            console.log('here comes some testing code');
            console.log('It would be awesome if we got line numbers for reference');
        }

Thanks!


(Nicholas Perry) #2

This sounds like a great thing for a plug-in to do since not all discourses would need to talk about code.

I’d barrow stuff from git/gist, their syntax highlighting engine is fantastic!

According to this blog post, they use Ace for the gist editor.


(drawyan) #3

That looks really awesome, hope gist editor would be a possibility as a plugin to Discourse.


(Nicholas Perry) #4

I think that it at least does some pretty nifty stuff if you link directly to an entry on gist. I think it uses oneboxing.

It would be nice if it loaded in some of the formatting that is used on the main site somehow.

This is what happens if I paste -this link- on a line of its own:

https://gist.github.com/Nicholas-Perry/3984159


(drawyan) #5

oneboxing is just awesome! Looks like we could use CSS to add line numbers:
http://bililite.com/blog/2012/08/05/line-numbering-in-pre-elements/


(Nicholas Perry) #6

I think they implemented line numbering over a PRE entirely in CSS over at the /r/learnprogramming.

The css code is a complete hack, but I love it.

Really though, it should be using some javascript.


(Jeff Atwood) #7

Line numbers do appear now in github oneboxes thanks to @lid!


#8

Github support is nice, but please note that not everyone is using github for code. It is niche. Non-coders (majority of world’s population) also use Discourse but they don’t use Github. Yet they sometimes need to post some code. Line numbers help making discussion better because you can refer to line number in the response.

Line numbering of code sections should be considered as core functionality, IMHO, of course as an option switchable in Admin area.

Since Discourse uses Highlight.js would it be much work to just include the version that supports line numbering like this one for example in the default Discourse install?


(Sam Saffron) #9

http://highlightjs.readthedocs.io/en/latest/line-numbers.html

This feature is not going to find itself into highlight js ever, but you may be able to swing something with CSS rules, I encourage you to experiment in a theme component and share your result here.


#10

I put together a rough little javascript that can be run through the brower’s console for a proof of concept. Right now it’s not doing anything through CSS, but I can fairly easily modify it to utilize the methods shown in @drawyan’s link.

// Get each code block
$("code").each(function(){

   // Create an array that contains each code line
   var codeLine = $(this).text().split("\n");
   var codeWithLineNums = "";

   // Iterate through the code lines
   $.each(codeLine, function(lineNum, line) {

      // If the line of code is the last line in the code block 
      // and is just a newline, do nothing.
      if(codeLine.length == lineNum + 1 && line.length <= 1) {
         return;
      }

      // Format line numbers with padding (works up to 1000 lines)
      if(codeLine.length >= 100 && lineNum < 9) {
         codeWithLineNums += "  ";
      }
      else if(codeLine.length >= 10 && lineNum < 9) {
         codeWithLineNums += " ";
      }
      if(codeLine.length >= 100 && lineNum < 99 && lineNum >= 9) {
         codeWithLineNums += " ";
      }

      // Add the code line with line numbers to the new code 
      //block string.
      codeWithLineNums += (lineNum+1) + " | " + line + "\n";

   });

   // Replace the old code block with the newly generated one.
   $(this).text(codeWithLineNums);

});

If there’s enough interest, and if I can maybe get a little direction for what would be the most desirable in a feature like this, I"d be willing to work on it.

Edit: Here’s what the current code produces when run with this reply in view: