Would there be a chance to get this change upstream? It would make it much easier when upgrading highlight.js in the future :)

Otherwise, the overall approach looks good :)

I'll try to merge the event part on upstream and maintaing a rebased fork with our modifications to simplify bumping on upstream updates.

I'll update this with the result

May I suggest another option? It's a bit different, and I don't know if it is working for everybody, but it leaves highlightjs-line-numbers as-is, so no need to keep a fork and the event listener can also be removed.

I just created a setTimeout of 100 ms and then run the function. This worked quite well for me at least :grinning: . Put below https://pagure.io/fork/jlanda/pagure/blob/6ae7898dcf9580704bac3a6cb9bfa0e915776c1d/f/pagure/templates/file.html#_270

let cls = "highlighted-line";
setTimeout(function() {
  if (location.hash !== '') {
    let lines = location.hash.substr(2).split('-').map((line) => { 
      $('[data-line-number=' + line + ']').closest('tr').addClass(cls);
      return line
    });
    $("#_" + lines[0]).get(0).scrollIntoView();
  }      
}, 100);

If this is working, you can even think of calling the updateHighlight() function. The only code you then have to add:

setTimeout(function() {
  lines = updateHighlight();
  if ( lines ) {
    $("#_" + lines[0]).get(0).scrollIntoView();
  }
}, 100);

Sorry for the late reply, didn't saw this

May I suggest another option? It's a bit different, and I don't know if it is working for everybody, but it leaves highlightjs-line-numbers as-is, so no need to keep a fork and the event listener can also be removed.

We already maintain a fork, the line link thing is pagure's customization :)

I just created a setTimeout of 100 ms and then run the function. This worked quite well for me at least 😀 . Put below https://pagure.io/fork/jlanda/pagure/blob/6ae7898dcf9580704bac3a6cb9bfa0e915776c1d/f/pagure/templates/file.html#270
let cls = "highlighted-line";
setTimeout(function() {
if (location.hash !== '') {
let lines = location.hash.substr(2).split('-').map((line) => {
$('[data-line-number=' + line + ']').closest('tr').addClass(cls);
return line
});
$("#" + lines[0]).get(0).scrollIntoView();
}
}, 100);

If this is working, you can even think of calling the updateHighlight() function. The only code you then have to add:
setTimeout(function() {
lines = updateHighlight();
if ( lines ) {
$("#_" + lines[0]).get(0).scrollIntoView();
}
}, 100);

The timeout works unless the user's navigator needs more than 100msecs to replace all the line, otherwise it will try to scroll to a non existent html id.

I would prefer a more deterministic solution than waiting a fixed time.

The big problem here to include our changes on upstream right now is that we are using an tag and an html id that are not on upstream.