sox icon indicating copy to clipboard operation
sox copied to clipboard

Add line numbers to code blocks (use existing script)

Open SmartManoj opened this issue 5 years ago • 4 comments

Not maintained 5 years old, https://greasyfork.org/en/scripts/1781-so-code-line-nums

Updated one https://raw.githubusercontent.com/SmartManoj/SmartUserScripts/master/SO_Lines.user.js

SmartManoj avatar Jun 26 '19 11:06 SmartManoj

I'd be happy to accept a pull request for this, if you want to include it in SOX :)

shu8 avatar Jun 26 '19 20:06 shu8

Any reason for the removal of that label? @mezmi

SmartManoj avatar Sep 16 '20 04:09 SmartManoj

Does this look good? Partly inspired from Stacks.

[...document.querySelectorAll('.s-prose pre')].forEach(codeBlock => {
    codeBlock.classList.add('s-code-block'); // add the stacks class in case it doesn't already exist
    // the last item of the array is just a newline and not an actual line of code
    const lineNumber = codeBlock.innerText.split(/\r?\n/).length - 1;
    // index is zero-based, so we need to increase by 1
    const lineDivs = [...Array(lineNumber).keys()].map(number => `<div>${number + 1}</div>`).join('');
    codeBlock.insertAdjacentHTML('afterbegin', `<code class="s-code-block--line-numbers">${lineDivs}</code>`);
});

double-beep avatar May 29 '21 16:05 double-beep

@double-beep that looks perfect! would you mind making a quick PR to add that in as a feature? :) /cc @SmartManoj!

shu8 avatar May 29 '21 19:05 shu8