feat: Support hide lines in remark-embed-snippet

docs/docs/gatsby-style-guide.md

@@ -296,17 +296,21 @@ designed for scientific communication but might help avoid overspecialized
 wording.
 
 ## Best practices
+
 ### Support software versions
+
 When Gatsby commits to support a specific version of software (e.g. Node 6 and up), this is reflected in documentation. Gatsby documentation should be usable by all people on supported software, which means we don't introduce any commands or practices that can't be used by people on versions we've committed to support. In rare circumstances, we'll consider mentioning a newly introduced command or practice as side notes.
 
 For example, npm 5.2.0 (which comes with Node 8) introduced a command called `npx` that is not available for versions of Node below 8. Since Gatsby supports Node 6 and up, documentation should only introduce `npx` as an optional command in a note like so:
 
 > npm 5.2.0--bundled with Node 8--introduced a command called `npx`. Gatsby supports Node 6 and up, so we introduce `npx` here as an optional command for users of npm 5.2.0 or greater.
 
 ### Share best practices whenever possible
+
 When there are multiple ways to complete a task, the docs should explain the following:
+
 1. The most fundamental way of completing the task
-2. The most common way of completing a task 
+2. The most common way of completing a task
 3. The best way to complete the task on the lowest supported versions of software
 4. The best practice and why is it the best (if different than 3)
 5. Any tips on how to pick an option
@@ -320,6 +324,7 @@ The main tutorial at `/tutorial/` is optimized for users who are not experts in
 ## Tutorial
 
 ### Tutorial audience
+
 Through research, it's clear that developers of all skill levels read the tutorial and go back to reference it later.
 
 The tutorial should prioritize helping users with the following attributes and goals.
@@ -337,6 +342,7 @@ Looking for:
 - a way to start a site and/or app project that uses React
 
 ### Tutorial purpose
+
 By following the steps in the tutorial, a user should:
 
 - Experience the value of Gatsby as quickly as possible. With Gatsby, a user typically values that it takes fewer steps (and is therefore easier) to:

examples/using-remark/gatsby-config.js

@@ -52,6 +52,13 @@ module.exports = {
               dashes: `oldschool`,
             },
           },
+          {
+            resolve: `gatsby-remark-embed-snippet`,
+            options: {
+              // Example code links are relative to this dir.
+              directory: `${__dirname}/src/code-examples/`,
+            },
+          },
           `gatsby-remark-prismjs`,
           `gatsby-remark-autolink-headers`,
           `gatsby-remark-katex`,

examples/using-remark/package.json

@@ -16,6 +16,7 @@
     "gatsby-plugin-typography": "^2.2.0",
     "gatsby-remark-autolink-headers": "^2.0.5",
     "gatsby-remark-copy-linked-files": "^2.0.5",
+    "gatsby-remark-embed-snippet": "^3.1.2",
     "gatsby-remark-images": "^2.0.1",
     "gatsby-remark-katex": "^2.0.5",
     "gatsby-remark-prismjs": "^3.0.0",

examples/using-remark/src/code-examples/hide-and-highlight-lines.js

@@ -0,0 +1,16 @@
+/* hide-range{1-3} */
+import React from "react"
+import ReactDOM from "react-dom"
+
+// highlight-next-line
+const name = `Brian`
+
+// highlight-range{4-5}
+// hide-next-line
+ReactDOM.render(
+  <div>
+    <h1>Hello, ${name}!</h1>
+    <h2>Welcome to this example</h2>
+  </div>,
+  document.getElementById(`root`) // hide-line
+) // hide-line

examples/using-remark/src/code-examples/hide-lines.js

@@ -0,0 +1,14 @@
+/* hide-range{1-3} */
+import React from "react"
+import ReactDOM from "react-dom"
+
+const name = `Brian`
+
+// hide-next-line
+ReactDOM.render(
+  <div>
+    <h1>Hello, ${name}!</h1>
+    <h2>Welcome to this example</h2>
+  </div>,
+  document.getElementById(`root`) // hide-line
+) // hide-line

examples/using-remark/src/code-examples/highlight-lines.js

@@ -0,0 +1,13 @@
+import React from "react"
+import ReactDOM from "react-dom"
+
+const name = `Brian` // highlight-line
+
+ReactDOM.render(
+  <div>
+    {/* highlight-range{1-2} */}
+    <h1>Hello, ${name}!</h1>
+    <h2>Welcome to this example</h2>
+  </div>,
+  document.getElementById(`root`)
+)

examples/using-remark/src/code-examples/plain.js

@@ -0,0 +1,12 @@
+import React from "react"
+import ReactDOM from "react-dom"
+
+const name = `Brian`
+
+ReactDOM.render(
+  <div>
+    <h1>Hello, ${name}!</h1>
+    <h2>Welcome to this example</h2>
+  </div>,
+  document.getElementById(`root`)
+)

examples/using-remark/src/pages/2017-04-05---embed-snippets/index.md

@@ -0,0 +1,117 @@
+---
+title: "Embed file contents within PrismJS blocks"
+date: "2017-04-05"
+draft: false
+author: Daisy Buchanan
+tags:
+  - remark
+  - Code Highlighting
+  - embed snippets
+---
+
+You can embed the contents of existing files within your Markdown using the [`gatsby-remark-embed-snippet`][1] with [`gatsby-remark-prismjs`][2].
+
+Let's start by displaying file contents as a highlighted code block, then see how to control line highlighting and visibility from within the source file.
+
+## Embedding files
+
+After installing the required plugins you can embed a file within your Markdown by using `embed` snippets. To embed the file `src/code-examples/plain.js` you could write the following:
+
+<pre>`embed:plain.js`</pre>
+
+This will look like:
+
+`embed:plain.js`
+
+## Highlight lines
+
+You can highlight specific lines by adding special comments to the source file. Let's see how this works in `src/code-examples/highlight-lines.js`.
+
+Take a look at the `highlight-line` comment on line 4 and the `highlight-range` comment on line 8:
+
+```{numberLines: true}
+import React from "react"
+import ReactDOM from "react-dom"
+
+const name = `Brian` // highlight-line
+
+ReactDOM.render(
+  <div>
+    {/* highlight-range{1-2} */}
+    <h1>Hello, ${name}!</h1>
+    <h2>Welcome to this example</h2>
+  </div>,
+  document.getElementById(`root`)
+)
+```
+
+When the file is embedded with:
+
+<pre>`embed:highlight-lines.js`</pre>
+
+it will display like this:
+
+`embed:highlight-lines.js`
+
+## Hide lines
+
+You can use similar comments to hide specific lines. Here's another example, this time using `src/code-examples/hide-lines.js`. Check out the `hide-line` comments on lines 1, 7, 13 and 14:
+
+```{numberLines: true}
+/* hide-range{1-3} */
+import React from "react"
+import ReactDOM from "react-dom"
+
+const name = `Brian`
+
+// hide-next-line
+ReactDOM.render(
+  <div>
+    <h1>Hello, ${name}!</h1>
+    <h2>Welcome to this example</h2>
+  </div>,
+  document.getElementById(`root`) // hide-line
+) // hide-line
+```
+
+Which will display like this:
+
+`embed:hide-lines.js`
+
+## All together now
+
+You can mix line highlighting and hiding in the same file. This is from `src/code-examples/hide-and-highlight-lines.js`
+
+```
+/* hide-range{1-3} */
+import React from "react"
+import ReactDOM from "react-dom"
+
+// highlight-next-line
+const name = `Brian`
+
+// highlight-range{4-5}
+// hide-next-line
+ReactDOM.render(
+  <div>
+    <h1>Hello, ${name}!</h1>
+    <h2>Welcome to this example</h2>
+  </div>,
+  document.getElementById(`root`) // hide-line
+) // hide-line
+```
+
+It'll look like this:
+
+`embed:hide-and-highlight-lines.js`
+
+## Related info
+
+You've learnt how to embed the contents of existing files into your Markdown using [`gatsby-remark-embed-snippet`][1] with [`gatsby-remark-prismjs`][2]. Hurray!
+
+If you'd prefer to write your code blocks directly within your Markdown, take a look at the example [Code and Syntax Highlighting with PrismJS][4].
+
+[1]: https://www.gatsbyjs.org/packages/gatsby-remark-embed-snippet/
+[2]: https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/
+[3]: http://prismjs.com/
+[4]: /code-and-syntax-highlighting/

examples/using-remark/src/pages/excerpt-example.js

@@ -1,5 +1,6 @@
 import React from "react"
 import { Link, graphql } from "gatsby"
+import Layout from "../layouts"
 import styles from "../styles"
 import presets from "../utils/presets"
 import { rhythm, scale } from "../utils/typography"
@@ -9,7 +10,7 @@ class Index extends React.Component {
     const posts = this.props.data.allMarkdownRemark.edges
 
     return (
-      <div>
+      <Layout location={this.props.location}>
         <div>
           <h1
             css={{
@@ -51,7 +52,7 @@ class Index extends React.Component {
             ))}
           </ul>
         </div>
-      </div>
+      </Layout>
     )
   }
 }

examples/using-remark/src/pages/index.js

@@ -78,7 +78,7 @@ export const pageQuery = graphql`
   query {
     allMarkdownRemark(
       limit: 2000
-      sort: { fields: [frontmatter___date], order: DESC }
+      sort: { fields: [frontmatter___date], order: ASC }
       filter: { frontmatter: { draft: { ne: true }, example: { ne: true } } }
     ) {
       edges {

packages/gatsby-remark-embed-snippet/README.md

@@ -110,6 +110,53 @@ baz: "highlighted"
 quz: "highlighted"
 ```
 
+### Hide Lines
+
+It's also possible to specify a range of lines to be hidden.
+
+#### JavaScript example
+
+```js
+// hide-range{1-2}
+import React from "react"
+import ReactDOM from "react-dom"
+
+function App() {
+  return (
+    <div className="App">
+      <ul>
+        <li>Not hidden</li>
+        <li>Not hidden</li>
+        {/* hide-range{1-2} */}
+        <li>Hidden</li>
+        <li>Hidden</li>
+        {/* hide-next-line */}
+        <li>Hidden</li>
+      </ul>
+    </div>
+  )
+}
+
+// hide-range{1-2}
+const rootElement = document.getElementById("root")
+ReactDOM.render(<App />, rootElement)
+```
+
+Will produce something like this:
+
+```js
+function App() {
+  return (
+    <div className="App">
+      <ul>
+        <li>Not hidden</li>
+        <li>Not hidden</li>
+      </ul>
+    </div>
+  )
+}
+```
+
 ## Installation
 
 `npm install --save gatsby-remark-embed-snippet`
@@ -118,7 +165,7 @@ quz: "highlighted"
 
 **Important**: This module must appear before `gatsby-remark-prismjs` in your plugins array, or the markup will have already been transformed into a code block and this plugin will fail to detect it and inline the file.
 
-```javascript
+```js
 // In your gatsby-config.js
 module.exports = {
   plugins: [