From cdecba10b323a94fb10c18fbe2f979eda6f40253 Mon Sep 17 00:00:00 2001
From: Daniel Bird <danielsbird@gmail.com>
Date: Wed, 27 Dec 2017 16:36:33 -0500
Subject: [PATCH 1/2] Move examples of rendering elements from CodePen into
 ./examples

---
 content/docs/rendering-elements.md              |  6 +++---
 .../rendering-elements/render-an-element.js     |  5 +++++
 .../update-rendered-element.js                  | 17 +++++++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 examples/rendering-elements/render-an-element.js
 create mode 100644 examples/rendering-elements/update-rendered-element.js

diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md
index c5747a7f..d0c1caf0 100644
--- a/content/docs/rendering-elements.md
+++ b/content/docs/rendering-elements.md
@@ -43,7 +43,7 @@ ReactDOM.render(
 );
 ```
 
-[Try it on CodePen.](http://codepen.io/gaearon/pen/rrpgNB?editors=1010)
+[](codepen://rendering-elements/render-an-element)
 
 It displays "Hello, world" on the page.
 
@@ -72,7 +72,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[Try it on CodePen.](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[](codepen://rendering-elements/update-rendered-element)
 
 It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
 
@@ -86,7 +86,7 @@ It calls `ReactDOM.render()` every second from a [`setInterval()`](https://devel
 
 React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
 
-You can verify by inspecting the [last example](http://codepen.io/gaearon/pen/gwoJZk?editors=0010) with the browser tools:
+You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
 
 ![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
 
diff --git a/examples/rendering-elements/render-an-element.js b/examples/rendering-elements/render-an-element.js
new file mode 100644
index 00000000..2d4345ef
--- /dev/null
+++ b/examples/rendering-elements/render-an-element.js
@@ -0,0 +1,5 @@
+const element = <h1>Hello, world</h1>;
+ReactDOM.render(
+  element,
+  document.getElementById('root')
+);
diff --git a/examples/rendering-elements/update-rendered-element.js b/examples/rendering-elements/update-rendered-element.js
new file mode 100644
index 00000000..3ed32d25
--- /dev/null
+++ b/examples/rendering-elements/update-rendered-element.js
@@ -0,0 +1,17 @@
+function tick() {
+  const element = (
+    <div>
+      <h1>Hello, world!</h1>
+      <h2>
+        It is{' '}
+        {new Date().toLocaleTimeString()}.
+      </h2>
+    </div>
+  );
+  ReactDOM.render(
+    element,
+    document.getElementById('root')
+  );
+}
+
+setInterval(tick, 1000);

From 72e7547ef0fa69c5360cc4bd64c03a7ea8287ae4 Mon Sep 17 00:00:00 2001
From: Daniel Bird <danielsbird@gmail.com>
Date: Sat, 13 Jan 2018 13:50:24 -0500
Subject: [PATCH 2/2] Embed examples using gatsby-remark-embed-snippet

---
 content/docs/rendering-elements.md            | 25 ++-----------------
 .../update-rendered-element.js                |  1 +
 2 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md
index d0c1caf0..7ed7aed6 100644
--- a/content/docs/rendering-elements.md
+++ b/content/docs/rendering-elements.md
@@ -35,13 +35,7 @@ Applications built with just React usually have a single root DOM node. If you a
 
 To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
 
-```js
-const element = <h1>Hello, world</h1>;
-ReactDOM.render(
-  element,
-  document.getElementById('root')
-);
-```
+`embed:rendering-elements/render-an-element.js`
 
 [](codepen://rendering-elements/render-an-element)
 
@@ -55,22 +49,7 @@ With our knowledge so far, the only way to update the UI is to create a new elem
 
 Consider this ticking clock example:
 
-```js{8-11}
-function tick() {
-  const element = (
-    <div>
-      <h1>Hello, world!</h1>
-      <h2>It is {new Date().toLocaleTimeString()}.</h2>
-    </div>
-  );
-  ReactDOM.render(
-    element,
-    document.getElementById('root')
-  );
-}
-
-setInterval(tick, 1000);
-```
+`embed:rendering-elements/update-rendered-element.js`
 
 [](codepen://rendering-elements/update-rendered-element)
 
diff --git a/examples/rendering-elements/update-rendered-element.js b/examples/rendering-elements/update-rendered-element.js
index 3ed32d25..f16ddcc1 100644
--- a/examples/rendering-elements/update-rendered-element.js
+++ b/examples/rendering-elements/update-rendered-element.js
@@ -8,6 +8,7 @@ function tick() {
       </h2>
     </div>
   );
+  // highlight-range{1-4}
   ReactDOM.render(
     element,
     document.getElementById('root')