Extend Marked.js in order to support React Native's code players (#109)

* Extend Marked.js to support SnackPlayer and the WebPlayer, as used in React Native

lib/core/Head.js

@@ -71,6 +71,8 @@ class Head extends React.Component {
         {includeGithubButton &&
           <script async defer src="https://buttons.github.io/buttons.js" />
         }
+        <script type="text/javascript" src={this.props.config.baseUrl + "js/webplayer.js"} />
+        <script type="text/javascript" src="https://snack.expo.io/embed.js" />
       </head>
     );
   }

lib/core/Marked.js

@@ -11,8 +11,10 @@
 
 const React = require("react");
 import DOM from 'react-dom-factories';
-const Prism = require("./Prism.js");
+const Prism = require("./Prism");
-const Header = require("./Header.js");
+const Header = require("./Header");
+const WebPlayer = require('./WebPlayer');
+const SnackPlayer = require('./SnackPlayer');
 
 /**
  * Block-Level Grammar
@@ -816,12 +818,32 @@ Parser.prototype.tok = function() {
         </Header>
       );
     }
-    case "code": {
+    case 'code': {
-      return (
+      const lang = this.token.lang, text = this.token.text;
-        <Prism language={this.token.lang}>
+
-          {this.token.text}
+      if (
-        </Prism>
+        lang && lang.indexOf('ReactNativeWebPlayer') === 0
-      );
+      ) {
+        return (
+          <WebPlayer params={lang.split('?')[1]}>
+            {text}
+          </WebPlayer>
+        );
+      }
+
+      if (lang && lang.indexOf('SnackPlayer') === 0) {
+        return (
+          <SnackPlayer params={lang.split('?')[1]}>
+            {text}
+          </SnackPlayer>
+        );
+      }
+
+      if (lang) {
+        return <Prism language={lang}>{text}</Prism>;
+      }
+
+      return <Prism>{text}</Prism>;
     }
     case "table": {
       const table = [];

lib/static/css/main.css

@@ -1994,3 +1994,37 @@ footer .copyright {
     display: none;
   }
 }
+
+
+/** Web player **/
+.web-player > iframe {
+  display: none;
+}
+
+.web-player > .prism {
+  display: none;
+}
+  
+.web-player.desktop > iframe {
+  display: block; }
+
+.web-player.mobile > .prism {
+  display: block; }
+
+.token.keyword {
+  color: #1990b8;
+}
+
+.token.string,
+.token.regex {
+  color: #2f9c0a;
+}
+
+.token.boolean,
+.token.number {
+  color: #c92c2c;
+}
+
+.token.comment {
+  color: #7d8b99;
+}