fix(gatsby-remark-embed-snippet): readme - add example sources (#24874)

muescha · Aisha Blake · web-flow · commit 592801b7c95a · 2020-06-19T21:10:09.000-04:00
* add example sources

* Wrap full code blocks in no-highlight blocks

Co-authored-by: Aisha Blake &lt;aisha@gatsbyjs.com&gt;
diff --git a/packages/gatsby-remark-embed-snippet/README.md b/packages/gatsby-remark-embed-snippet/README.md
@@ -190,6 +190,23 @@ You can specify specific lines for Prism to highlight using
 
 **JavaScript example**:
 
+````no-highlight
+```jsx
+import React from "react"
+import ReactDOM from "react-dom"
+
+const name = "Brian" // highlight-line
+
+ReactDOM.render(
+  <div>
+    {/* highlight-range{1-3} */}
+    <h1>Hello, ${name}!</h1>
+  </div>,
+  document.getElementById("root")
+)
+```
+````
+
 ```jsx
 import React from "react"
 import ReactDOM from "react-dom"
@@ -207,6 +224,20 @@ ReactDOM.render(
 
 **CSS example**:
 
+````no-highlight
+```css
+html {
+  /* highlight-range{1-2} */
+  height: 100%;
+  width: 100%;
+}
+
+* {
+  box-sizing: border-box; /* highlight-line */
+}
+```
+````
+
 ```css
 html {
   /* highlight-range{1-2} */
@@ -222,6 +253,20 @@ html {
 **HTML example**:
 
 <!-- prettier-ignore-start -->
+````no-highlight
+```html
+<html>
+  <body>
+    <h1>highlight me</h1> <!-- highlight-line -->
+    <p>
+      <!-- highlight-next-line -->
+      And me
+    </p>
+  </body>
+</html>
+```
+````
+
 ```html
 <html>
   <body>
@@ -237,6 +282,16 @@ html {
 
 **YAML example**:
 
+````no-highlight
+```yaml
+foo: "highlighted" # highlight-line
+bar: "not highlighted"
+# highlight-range{1-2}
+baz: "highlighted"
+quz: "highlighted"
+```
+````
+
 ```yaml
 foo: "highlighted" # highlight-line
 bar: "not highlighted"
