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

[DSchau]

Summary

Our docs currently use a line highlighting mechanism that is not necessarily ideal. See #9235 for further detail of the general issue. We've since fixed this in #9696, which enables improved functionality that is more maintainable.

Basic example

Given the following (existing) highlighted code snippet, we can re-factor with the changes in this new release.

Note: the following snippet indicates that line 6 is being highlighted, e.g. the plugins array

```javascript{6}
module.exports = {
  siteMetadata: {
    title: `Your Name - Blog`,
    author: `Your Name`,
  },
  plugins: ["gatsby-plugin-catch-links", "gatsby-plugin-react-helmet"],
}
```

to the following new variant

```javascript
module.exports = {
  siteMetadata: {
    title: `Your Name - Blog`,
    author: `Your Name`,
  },
  plugins: ["gatsby-plugin-catch-links", "gatsby-plugin-react-helmet"], // highlight-line
}
```

Motivation

This will be much more maintainable (e.g. resistant to things like prettier messing up line order, code changes, etc.) and a lot easier to use.

Consider using any of the following directives to accomplish this task:

• highlight-line - highlights the current line
• highlight-next-line - highlights the next line
• highlight-start & highlight-end - highlight all lines until highlight-end is encountered

Additionally things like highlight-range are still supported, but I'd recommend using the previously mentioned directives to accomplish this task, as highlight-range does suffer from several of the same issues as the existing functionality.

[DSchau]

Note: for some help in identifying the files:

Consider this regular expression

```(\w+)?\{.+}

this will identify any code fenced blocks with a {} block. I've used it in VSCode like so:

[nero2009]

Can I take this

[DSchau]

@nero2009 absolutely! I'll mark it as assigned. Looking forward to the PR! Please feel free to reach out to any of us @gatsbyjs/core with any questions!