From aba8cf529812531d0417db90139875c5caf30e80 Mon Sep 17 00:00:00 2001
From: Muescha <184316+muescha@users.noreply.github.com>
Date: Mon, 8 Jun 2020 17:24:29 +0200
Subject: [PATCH 1/2] add example sources
---
.../gatsby-remark-embed-snippet/README.md | 49 +++++++++++++++++++
1 file changed, 49 insertions(+)
diff --git a/packages/gatsby-remark-embed-snippet/README.md b/packages/gatsby-remark-embed-snippet/README.md
index f1568b03c06fc..1d585cbeb615b 100644
--- a/packages/gatsby-remark-embed-snippet/README.md
+++ b/packages/gatsby-remark-embed-snippet/README.md
@@ -190,6 +190,21 @@ You can specify specific lines for Prism to highlight using
**JavaScript example**:
+```no-highlight
+import React from "react"
+import ReactDOM from "react-dom"
+
+const name = "Brian" // highlight-line
+
+ReactDOM.render(
+
+ {/* highlight-range{1-3} */}
+
Hello, ${name}!
+ ,
+ document.getElementById("root")
+)
+```
+
```jsx
import React from "react"
import ReactDOM from "react-dom"
@@ -207,6 +222,18 @@ ReactDOM.render(
**CSS example**:
+```no-highlight
+html {
+ /* highlight-range{1-2} */
+ height: 100%;
+ width: 100%;
+}
+
+* {
+ box-sizing: border-box; /* highlight-line */
+}
+```
+
```css
html {
/* highlight-range{1-2} */
@@ -221,6 +248,20 @@ html {
**HTML example**:
+
+```no-highlight
+
+
+ highlight me
+
+
+ And me
+
+
+
+```
+
+
```html
@@ -237,6 +278,14 @@ html {
**YAML example**:
+```no-highlight
+foo: "highlighted" # highlight-line
+bar: "not highlighted"
+# highlight-range{1-2}
+baz: "highlighted"
+quz: "highlighted"
+```
+
```yaml
foo: "highlighted" # highlight-line
bar: "not highlighted"
From a81cb1db2478cd7dc0d42401d650747083b7e8c8 Mon Sep 17 00:00:00 2001
From: Aisha Blake
Date: Fri, 19 Jun 2020 17:47:59 -0400
Subject: [PATCH 2/2] Wrap full code blocks in no-highlight blocks
---
packages/gatsby-remark-embed-snippet/README.md | 18 ++++++++++++------
1 file changed, 12 insertions(+), 6 deletions(-)
diff --git a/packages/gatsby-remark-embed-snippet/README.md b/packages/gatsby-remark-embed-snippet/README.md
index 1d585cbeb615b..0ffa6c7b8c320 100644
--- a/packages/gatsby-remark-embed-snippet/README.md
+++ b/packages/gatsby-remark-embed-snippet/README.md
@@ -190,7 +190,8 @@ You can specify specific lines for Prism to highlight using
**JavaScript example**:
-```no-highlight
+````no-highlight
+```jsx
import React from "react"
import ReactDOM from "react-dom"
@@ -204,6 +205,7 @@ ReactDOM.render(
document.getElementById("root")
)
```
+````
```jsx
import React from "react"
@@ -222,7 +224,8 @@ ReactDOM.render(
**CSS example**:
-```no-highlight
+````no-highlight
+```css
html {
/* highlight-range{1-2} */
height: 100%;
@@ -233,6 +236,7 @@ html {
box-sizing: border-box; /* highlight-line */
}
```
+````
```css
html {
@@ -249,7 +253,8 @@ html {
**HTML example**:
-```no-highlight
+````no-highlight
+```html
highlight me
@@ -260,9 +265,8 @@ html {
```
-
+````
-
```html
@@ -278,13 +282,15 @@ html {
**YAML example**:
-```no-highlight
+````no-highlight
+```yaml
foo: "highlighted" # highlight-line
bar: "not highlighted"
# highlight-range{1-2}
baz: "highlighted"
quz: "highlighted"
```
+````
```yaml
foo: "highlighted" # highlight-line