From 419a11af3e5f533ff85216385886d8faa15db163 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9ctor=20Ramos?=
 <165856+hramos@users.noreply.github.com>
Date: Wed, 4 Oct 2017 08:56:55 -0700
Subject: [PATCH] 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        |  2 ++
 lib/core/Marked.js      | 38 ++++++++++++++++++++++++++++++--------
 lib/static/css/main.css | 36 +++++++++++++++++++++++++++++++++++-
 3 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/lib/core/Head.js b/lib/core/Head.js
index e0f4d4ce4d..e6680de248 100644
--- a/lib/core/Head.js
+++ b/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>
     );
   }
diff --git a/lib/core/Marked.js b/lib/core/Marked.js
index 2dca40e58f..d22ea5fc75 100644
--- a/lib/core/Marked.js
+++ b/lib/core/Marked.js
@@ -11,8 +11,10 @@
 
 const React = require("react");
 import DOM from 'react-dom-factories';
-const Prism = require("./Prism.js");
-const Header = require("./Header.js");
+const Prism = require("./Prism");
+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": {
-      return (
-        <Prism language={this.token.lang}>
-          {this.token.text}
-        </Prism>
-      );
+    case 'code': {
+      const lang = this.token.lang, text = this.token.text;
+
+      if (
+        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 = [];
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 6fed10d3df..fa4cfbdb93 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1993,4 +1993,38 @@ footer .copyright {
   .entry-share {
     display: none;
   }
-}
\ No newline at end of file
+}
+
+
+/** 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;
+}