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

* add example sources * Wrap full code blocks in no-highlight blocks Co-authored-by: Aisha Blake <[email protected]>
gatsbyjs · Jun 20, 2020 · 592801b · 592801b
1 parent bed5dc4
commit 592801b
Showing 1 changed file with 55 additions and 0 deletions.
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"