highlight: improve copy to clipboard

[ChristopherBarrington]

Using the highlight shortcode with linenos=true gives line numbers. When the copy to clipboard button is used on a code block, the line numbers are prepended to the code, exactly as-is from the code block.

{{% highlight bash "linenos=true" %}}
#! /bin/bash

some command
123 test
123







another command
  some space indented text
  123 indented numbers
  123
{{% /highlight %}}

Will put the following into my clipboard:

 1some command
 2123 test
 3123
 4
 5
 6
 7
 8
 9
10
11another command
12  some space indented text
13  123 indented numbers
14  123

---

I'm not good with JavaScript but wanted to have a try at making a solution. In my website it seems to work, but I don't know if this solution may break other things in your code or if there is a better way to solve the problem (I'd be keen to know).

hugo-theme-relearn/static/js/theme.js

Line 482 in a135b2a

text: function( trigger ){

There are lots of possibilities as to what highlight blocks could contain. I think the below is quite generic but it is based on an assumption that line numbers are the first non-space on every line (which fails if every line of code has numbers at the start?!).

I noticed that the elements for line numbers and code content are different but could not find a way to extract only the code-containing span elements so came up with this (mess).

                text: function( trigger ){
                    var text = trigger.previousElementSibling && trigger.previousElementSibling.matches( 'code' ) && trigger.previousElementSibling.textContent;
                    // remove a trailing line break, this may most likely
                    // come from the browser / Hugo transformation
                    text = text.replace( /\n$/, '' );

                    // removes leading $ signs from text in an assumption
                    // that this has to be the unix prompt marker - weird
                    text = text.replace( /^\$\s/gm, '' );

                    // if every line starts with optional space(s) and numbers, assume they are line numbers and remove them
                    var proabaly_has_line_numbers = text.split(/\n/).map((x) => /^\s*\d+/.test(x)).every(Boolean);
                    if(proabaly_has_line_numbers) {
                        var nchars = text.split( /\n/ ).slice(-1).toString().replace(/^(\s*\d+).*/, '$1').length;
                        text = text.replace(RegExp(`^.{${nchars}}`, 'gm'), '');
                    }

                    // console.log(text);
                    return text;
                }

[McShelby]

Well, I've never used the highlight shortcode myself and with every thing you don't test, you can be sure that there are issues.

The usage of the highlight shortcode currently suffers from the following issues:

• if used with inline linenos, the line-numbers are added to the clipboard (your observed issue)
• if used with table linenos, the copy-to-clipboard marker is unintentionally added to the line-number-column
• if used with table linenos, the table is not streched to the available width (as it is done for codefence syntax)
• nesting the highlight shortcode inside a tab ignores collapsed margins in some circumstances

[McShelby]

The trick for line numbers is, to filter out the line number nodes before you run regexes on the pure text content.

The fixes for all issues are now pushed to main - check 'em out!

[ChristopherBarrington]

I knew there had to be a way! That is a much nicer solution. Thanks!

[ChristopherBarrington]

I have pulled the theme using git submodule update --remote and saw the new JavaScript in the theme. But it was not working. The attached image shows the website and html associated. Hopefully that is clear. (I'm also trying to work through the warnings!)

This puts the following in the clipboard:

1module load CellRanger-ARC/2.0.1
2module load CellRanger/7.1.0
3conda activate /nemo/stp/babs/working/barrinc/conda/envs/scamp

---

My interpretation of the code you committed is that it filters the nodes for elements that contain a "ln" class. But in my rendered site the class of the line numbers is "highlight", I think. I modified the line to the following and the clipboard no long included the leading numbers. I wonder if there is a setup difference that I have that means these classes are different? I tried updating to Hugo 0.113 just in case but that didn't change the class.

code.querySelectorAll( '.highlight' )

Hopefully you have a better insight than me but if there is anything I can do to help diagnose further please let me know.

[McShelby]

Thanks for reporting. I've found the culprit. In the configuration of the exampleSite I am using

[markup]
  [markup.highlight]
    noClasses = false

If I comment this out, it results in a completly different DOM and my fix doesn't work.

I can hopefully fix this although it is a really messy DOM soup.

[McShelby]

@ChristopherBarrington Please update and give it another try. LGFM

[ChristopherBarrington]

Looks good to me too (d62e47f). I tried in a variety of pages contexts (in tabs, on the page alone etc) and all worked as-expected. thank you very much!