fix(gatsby-remark-prismjs): Use gatsby-highlight class to calculate line numbers

[miles-crighton]

Description

The output of the line highlighting parser is now passed to the line number generator to calculate the required line number spans to be created. Before, these two procedures were being run independently from one another. This change results in the line number generation now being dependent on the line highlighting parser apposed to the raw code-block markdown.

The line number generator now uses the newline (\n) delimiter in combination with matches of the HTML class gatsby-highlight-code-line to calculate the required line number count.

This solution was generated with the help of @pieh's suggestion on #22962.

Documentation

Shouldn't affect documentation as this attempts to fix a bug preventing expected behaviour.

Related Issues

Fixes #22962

[pieh]

This looks nice!

Can we add some test cases to https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-prismjs/src/__tests__/index.js that would use both line numbers and some additional directives and make sure there are no empty lines produced?

[miles-crighton]

Sure I'll work on a few test cases.

[miles-crighton]

@pieh I've pushed a snapshot + unit test for the new functionality, check them out and let me know if that's what you're looking for. (They pass for me on my local environment) If they look good, I can create a few larger tests with multiple directives.

[pieh]

Ah, I missed the fact how exactly line numbers are implemented - the empty <span></span> is pretty unfortunate (in terms of testing it in nice way). I will experiment a bit to see it's feasible to write nicer assertions, because I feel like checking just html output is confusing here - as in - if there are any changes that will happen in the future to that html markup - it will pretty hard to unpack what that means.

For now I have no further actionable comments for you, and this is waiting on me

[pieh]

@miles-crighton Take a look at miles-crighton#1 (PR against this PR :) ) as attempt at making nicer assertions

[miles-crighton]

That looks great - much more explicit and understandable :) Where do you want to go from here?

[pieh]

I think we are good for now. Given that line numbering and using directives was completely broken and this fixes this (at least for cases we tested) I'd say this is good to go in. If there will be further problems discovered we can iterate (and we have structure/assertion for line numbers tests so we can add problematic cases to tests as we discover them to make sure we don't regress in the future).

One thing that I'll do right now is to update branch to sync with master (we very recently upgraded prettier, so need to make sure that PR branch is on the same version of prettier as master)

[pieh]

Looks great, let's get this in! Thanks @miles-crighton!

[gatsbot]

Holy buckets, @miles-crighton — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[miles-crighton]

Pleasure working with you @pieh :)!