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

…highlight-end (gatsbyjs#10202)

* migrated line highlighting to highlight-line, highlight-start, highlight-end

* Changed highlighting to use valid commenting syntax

* Minor changes

* Update authenication-tutorial.md

Updated this file to workaround changes made by prettier.

* Update using-unstructured-data.md

docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md

@@ -93,14 +93,16 @@ After installing each of these functional plugins, we'll edit
 `gatsby-config.js`, which Gatsby loads at build-time to implement the exposed
 functionality of the specified plugins.
 
-```javascript{6-9}:title=gatsby-config.js
+```javascript:title=gatsby-config.js
 module.exports = {
   siteMetadata: {
     title: `Your Name - Blog`,
     author: `Your Name`,
   },
+  // highlight-start
   plugins: ["gatsby-plugin-catch-links", "gatsby-plugin-react-helmet"],
 }
+// highlight-end
 ```
 
 Without any additional work besides a `yarn install` and editing a config file,
@@ -127,19 +129,21 @@ into our `gatsby-config.js`, like so:
 yarn add gatsby-source-filesystem
 ```
 
-```javascript{6-12}:title=gatsby-config.js
+```javascript:title=gatsby-config.js
 module.exports = {
   // previous configuration
   plugins: [
     "gatsby-plugin-catch-links",
     "gatsby-plugin-react-helmet",
+    // highlight-start
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         path: `${__dirname}/src/pages`,
         name: "pages",
       },
     },
+    // highlight-end
   ],
 }
 ```
@@ -178,7 +182,7 @@ yarn add gatsby-transformer-remark
 
 and editing `gatsby-config.js`
 
-```javascript{13-18}:title=gatsby-config.js
+```javascript:title=gatsby-config.js
 module.exports = {
   // previous setup
   plugins: [
@@ -191,12 +195,14 @@ module.exports = {
         name: "pages",
       },
     },
+    // highlight-start
     {
       resolve: "gatsby-transformer-remark",
       options: {
         plugins: [], // just in case those previously mentioned remark plugins sound cool :)
       },
     },
+    // highlight-end
   ],
 }
 ```
@@ -294,7 +300,7 @@ very simply the pieces of data that we want to display for our blog post. Each
 piece of data our query selects will be injected via the `data` property we
 specified earlier.
 
-```javascript{23-32}:title=src/templates/blog-post.js
+```javascript:title=src/templates/blog-post.js
 import React from "react"
 import Helmet from "react-helmet"
 import { graphql } from "gatsby"
@@ -317,6 +323,7 @@ export default function Template({ data }) {
   )
 }
 
+// highlight-start
 export const pageQuery = graphql`
   query BlogPostByPath($path: String!) {
     markdownRemark(frontmatter: { path: { eq: $path } }) {
@@ -329,6 +336,7 @@ export const pageQuery = graphql`
     }
   }
 `
+// highlight-end
 ```
 
 If you're not familiar with GraphQL, this may seem slightly confusing, but we can
@@ -398,14 +406,15 @@ query, which will fetch all of our Markdown posts.
 
 ### Querying for posts
 
-```javascript{8-31}:title=gatsby-node.js
+```javascript:title=gatsby-node.js
 const path = require("path")
 
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
 
   const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
 
+  // highlight-start
   return graphql(`
     {
       allMarkdownRemark(
@@ -427,6 +436,7 @@ exports.createPages = ({ actions, graphql }) => {
     }
   })
 }
+// highlight-end
 ```
 
 We're using GraphQL to get all Markdown nodes and making them available under
@@ -447,7 +457,7 @@ pages (with the `createPage` action creator). Let's do that!
 
 ### Creating the pages
 
-```javascript{28-34}:title=gatsby-node.js
+```javascript:title=gatsby-node.js
 const path = require("path")
 
 exports.createPages = ({ actions, graphql }) => {
@@ -475,13 +485,15 @@ exports.createPages = ({ actions, graphql }) => {
       return Promise.reject(result.errors)
     }
 
+    // highlight-start
     result.data.allMarkdownRemark.edges.forEach(({ node }) => {
       createPage({
         path: node.frontmatter.path,
         component: blogPostTemplate,
         context: {}, // additional data can be passed via context
       })
     })
+    // highlight-end
   })
 }
 ```

docs/blog/2018-10-25-unstructured-data/index.md

@@ -56,17 +56,18 @@ That's it!
 
 By [exporting `createPages`](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L21) from our example Gatsby site's `gatsby-node.js` file, we're saying, "at this point in the bootstrapping sequence, run this code".
 
-```javascript{1,3}:title=gatsby-node.js
+```javascript:title=gatsby-node.js
+// highlight-next-line
 exports.createPages = () => {
   // Run this code
-}
+} // highlight-line
 ```
 
 #### 2. [Fetch the data](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L22) from the PokéAPI.
 
-```javascript{2}:title=gatsby-node.js
+```javascript:title=gatsby-node.js
 exports.createPages = async () => {
-  const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"])
+  const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"]) // highlight-line
 }
 ```
 
@@ -76,24 +77,27 @@ _Note: [`getPokemonData`](https://github.com/jlengstorf/gatsby-with-unstructured
 
 When you hook into a Gatsby API (like `createPages` from step one), you are passed a collection of actions. In this example, we're extracting the [`createPage` action](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L21) using ES6 object destructuring:
 
-```javascript{1}:title=gatsby-node.js
+```javascript:title=gatsby-node.js
+// highlight-next-line
 exports.createPages = async ({ actions: { createPage } }) => {
   const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"])
 }
 ```
 
 #### 4. Create a page that [lists all Pokémon](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L25).
 
-```javascript{4-9}:title=gatsby-node.js
+```javascript:title=gatsby-node.js
 exports.createPages = async ({ actions: { createPage } }) => {
   const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"])
 
+  // highlight-start
   // Create a page that lists all Pokémon.
   createPage({
     path: `/`,
     component: require.resolve("./src/templates/all-pokemon.js"),
     context: { allPokemon },
   })
+  // highlight-end
 }
 ```
 
@@ -105,21 +109,23 @@ The [`createPage` action](/docs/actions/#createPage) is passed an object contain
 
 In our example, we're accessing the context as [props to the component](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/src/templates/all-pokemon.js#L4). This allows us to completely circumvent Gatsby’s data layer; it’s just props.
 
-```jsx{1,3,5,12-14}:title=src/templates/all-pokemon.js
-export default ({ pageContext: { allPokemon } }) => (
+```jsx:title=src/templates/all-pokemon.js
+export default ({ pageContext: { allPokemon } }) => (// highlight-line
     {...}
-        {allPokemon.map(pokemon => (
+        {allPokemon.map(pokemon => ( // highlight-line
             <li
-                key={pokemon.id}
+                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>
         ))}
@@ -129,7 +135,7 @@ export default ({ pageContext: { allPokemon } }) => (
 
 #### 5. Create a page [for each Pokémon](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L32).
 
-```javascript{11-18}:title=gatsby-node.js
+```javascript:title=gatsby-node.js
 exports.createPages = async ({ actions: { createPage } }) => {
   const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"])
 
@@ -140,6 +146,7 @@ exports.createPages = async ({ actions: { createPage } }) => {
     context: { allPokemon },
   })
 
+  // highlight-start
   // Create a page for each Pokémon.
   allPokemon.forEach(pokemon => {
     createPage({
@@ -148,12 +155,13 @@ exports.createPages = async ({ actions: { createPage } }) => {
       context: { pokemon },
     })
   })
+  // highlight-end
 }
 ```
 
 #### 6. Create a page [for each ability of each Pokémon](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L40).
 
-```javascript{19-26}:title=gatsby-node.js
+```javascript:title=gatsby-node.js
 exports.createPages = async ({ actions: { createPage } }) => {
   const allPokemon = await getPokemonData(["pikachu", "charizard", "squirtle"])
 
@@ -172,6 +180,7 @@ exports.createPages = async ({ actions: { createPage } }) => {
       context: { pokemon },
     })
 
+    // highlight-start
     // Create a page for each ability of the current Pokémon.
     pokemon.abilities.forEach(ability => {
       createPage({
@@ -180,6 +189,7 @@ exports.createPages = async ({ actions: { createPage } }) => {
         context: { pokemon, ability },
       })
     })
+    // highlight-end
   })
 }
 ```

docs/docs/add-page-metadata.md

@@ -28,20 +28,21 @@ npm install --save gatsby-plugin-react-helmet react-helmet
 
 3.  Use `React Helmet` in your pages:
 
-```jsx{8-12}
+```jsx
 import React from "react"
 import { Helmet } from "react-helmet"
 
 class Application extends React.Component {
   render() {
     return (
       <div className="application">
+        {/* highlight-start */}
         <Helmet>
           <meta charSet="utf-8" />
           <title>My Title</title>
           <link rel="canonical" href="http://mysite.com/example" />
         </Helmet>
-        ...
+        {/* highlight-end */}
       </div>
     )
   }

docs/docs/adding-pagination.md

@@ -13,7 +13,7 @@ The information needed to query for those specific items (i.e. values for [`limi
 
 ### Example
 
-```js{20-25}:title=src/templates/blog-list-template.js
+```js:title=src/templates/blog-list-template.js
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
@@ -33,12 +33,14 @@ export default class BlogList extends React.Component {
 }
 
 export const blogListQuery = graphql`
+// highlight-start
   query blogListQuery($skip: Int!, $limit: Int!) {
     allMarkdownRemark(
       sort: { fields: [frontmatter___date], order: DESC }
       limit: $limit
       skip: $skip
     ) {
+// highlight-end
       edges {
         node {
           fields {
@@ -54,7 +56,7 @@ export const blogListQuery = graphql`
 `
 ```
 
-```js{34-47}:title=gatsby-node.js
+```js:title=gatsby-node.js
 const path = require("path")
 const { createFilePath } = require("gatsby-source-filesystem")
 
@@ -88,6 +90,7 @@ exports.createPages = ({ graphql, actions }) => {
         // ...
 
         // Create blog-list pages
+        // highlight-start
         const posts = result.data.allMarkdownRemark.edges
         const postsPerPage = 6
         const numPages = Math.ceil(posts.length / postsPerPage)
@@ -102,6 +105,7 @@ exports.createPages = ({ graphql, actions }) => {
             },
           })
         })
+        // highlight-end
       })
     )
   })