Changed Codepen link protocol from 'codepen:' to 'codepen://' for improved clarity

content/docs/components-and-props.md

@@ -76,7 +76,7 @@ ReactDOM.render(
 );
 ```
 
-[](codepen:components-and-props/rendering-a-component).
+[](codepen://components-and-props/rendering-a-component).
 
 Let's recap what happens in this example:
 
@@ -118,7 +118,7 @@ ReactDOM.render(
 );
 ```
 
-[](codepen:components-and-props/composing-components).
+[](codepen://components-and-props/composing-components).
 
 Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
 
@@ -152,7 +152,7 @@ function Comment(props) {
 }
 ```
 
-[](codepen:components-and-props/extracting-components).
+[](codepen://components-and-props/extracting-components).
 
 It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
 
@@ -231,7 +231,7 @@ function Comment(props) {
 }
 ```
 
-[](codepen:components-and-props/extracting-components-continued).
+[](codepen://components-and-props/extracting-components-continued).
 
 Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
 

content/docs/hello-world.md

@@ -12,7 +12,7 @@ redirect_from:
   - "docs/getting-started-zh-CN.html"
 ---
 
-The easiest way to get started with React is to use [this Hello World example code on CodePen](codepen:hello-world). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
+The easiest way to get started with React is to use [this Hello World example code on CodePen](codepen://hello-world). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
 
 The smallest React example looks like this:
 

content/docs/introducing-jsx.md

@@ -47,7 +47,7 @@ ReactDOM.render(
 );
 ```
 
-[](codepen:introducing-jsx).
+[](codepen://introducing-jsx).
 
 We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
 

plugins/gatsby-remark-codepen-examples/index.js

@@ -2,6 +2,7 @@ const {existsSync} = require('fs');
 const {join} = require('path');
 const map = require('unist-util-map');
 
+const CODEPEN_PROTOCOL = 'codepen://';
 const DEFAULT_LINK_TEXT = 'Try it on CodePen';
 
 // TODO target="_blank"
@@ -12,8 +13,8 @@ module.exports = ({markdownAST}) => {
     // to: <a href="/codepen/introducing-jsx" target="_blank">Try it on CodePen</a>
     // from: [Try the Hello World example on CodePen](codepen:hello-world)
     // to: <a href="/codepen/hello-world" target="_blank">Try the Hello World example on CodePen</a>
-    if (node.type === 'link' && node.url.startsWith('codepen:')) {
-      const href = node.url.replace('codepen:', '/codepen/');
+    if (node.type === 'link' && node.url.startsWith(CODEPEN_PROTOCOL)) {
+      const href = node.url.replace(CODEPEN_PROTOCOL, '/codepen/');
       const text =
         node.children.length === 0 ? DEFAULT_LINK_TEXT : node.children[0].value;