docs: migrated line highlighting to highlight-line, highlight-start, highlight-end

[nero2009]

This Pull request closes #10134

[nero2009]

Side note: highlight-line doesn't work for html or jsx had to use highlight-next-line in the preceding line to highlight that line.

[DSchau]

@nero2009 could you provide some more information on this comment?

Side note: highlight-line doesn't work for html or jsx had to use highlight-next-line in the preceding line to highlight that line.

It appears like it does in my testing! Check out this example for an illustration of it working.

[nero2009]

@nero2009 could you provide some more information on this comment?

Side note: highlight-line doesn't work for html or jsx had to use highlight-next-line in the preceding line to highlight that line.

It appears like it does in my testing! Check out this example for an illustration of it working.

My bad, didn't use the jsx style for commenting code. used the double slash //

[DSchau]

Looking great! I'll do a more thorough review once the JSX comments are addressed, but this is an awesome start.

Thanks so much!

[DSchau]

Be careful of JSX here. We want these snippets to remain valid JSX, so it'll end up looking something more like this:

```jsx:title=src/templates/all-pokemon.js
export default ({ pageContext: { allPokemon } }) => ( // highlight-line
    {...}
        {allPokemon.map(pokemon => ( // highlight-line
            <li
                key={pokemon.id} // highlight-line
                style={{
                    textAlign: 'center',
                    listStyle: 'none',
                    display: 'inline-block'
                }}
            >
            {/* highlight-start */}
                <Link to={`/pokemon/${pokemon.name}`}>
                    <img src={pokemon.sprites.front_default} alt={pokemon.name} />
                    <p>{pokemon.name}</p>
            {/* highlight-end */}
                </Link>
            </li>
        ))}
    {...}
);
```

[DSchau]

Suggested change

	```jsx:title=src/template/all-pokemon.js
	```jsx:title=src/templates/all-pokemon.js

[DSchau]

Suggested change

	//highlight-end ...
	//highlight-end

[DSchau]

Suggested change

	// highlight-next-line
	{/* highlight-next-line */}

(I'm not going to comment on all of these, so if you're able, another look at the JSX snippets would probably be a good idea!)

[nero2009]

Alright, I'd do that

[DSchau]

If it helps, using VSCode (and possibly extensions in other editors) is really helpful as it will syntax highlight the snippets. So it's clear at a glance if a snippet is broken!

[DSchau]

Whoops - apparently not. Just need to spot check them!

[pieh]

I've started testing (so there are some valid inline comments from me), but I think first we need to sort out jsx comments, before doing full review, but this is awesome - is so much nicer to handle those inline comments for highlighting than ranges

[pieh]

this should be comment in line above:

exports.createPages = () => { // highlight-line

[pieh]

this should be comment in line above:

exports.createPages = async ({ actions: { createPage } }) => { // highlight-line

[nero2009]

Prettier moves it to the next line, when I make a commit.
#10202 (comment)

[pieh]

As @DSchau mentioned - please use:

<NavBar /> {/* highlight-line */}

Right now this is invalid JSX, so if people copy this from source or would be reading that on github they could copy not working code

[pieh]

Suggested change

	// highlight-start
	{/* highlight-start */}

[pieh]

Suggested change

	// highlight-end
	{/* highlight-end */}

[pieh]

Suggested change

	// highlight-end
	{/* highlight-end */}

[nero2009]

In the pre-commit hook prettier changes

exports.createPages = () => { // highlight-line

  // Run this code
} 

to

exports.createPages = () => {
  // highlight-line
  // Run this code
} 

how can i get prettier to ignore it.

[pieh]

Ahhhh, it was prettier that messed some things up :/ I think we would need to either let prettier know to ignore highlight comments (if possible) or use highlight-next-line as workaround :/

[nero2009]

Ahhhh, it was prettier that messed some things up :/ I think we would need to either let prettier know to ignore highlight comments (if possible) or use highlight-next-line as workaround :/

Ok I will use highlight-next-line

[phacks]

Sooo happy to see this! Thanks @nero2009, awesome work 🎉

[nero2009]

Hi @DSchau are there any problems with this PR so that I can resolve them over the weekend?
And I also noticed that the circleci check failed for my last two commits,Please how can I resolve that?

[DSchau]

@nero2009 looks like we have some merge conflicts, but presuming the suggestions were fixed, we can get this merged today! I think it's a big improvement 🎉

[gatsbot]

Holy buckets, @nero2009 — 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. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
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!