[markdown] Switch to Remarkable (#153)

* Switch to Remarkable
* Clean up references to custom code blocks
* Remove valdiateDOMNesting warning
* Add syntax highlighting
* Add Reason support
* Breaking change: prismColor to codeColor, remove CompLibrary.Prism, expose hljs
* Completely remove Prism and associated CSS rules
* Support loading plugins and scripts
* Remove CSS rules, allowing Highlight.js theme to be used entirely
* Remove unnecessary webplayer script

lib/static/css/main.css

@@ -724,8 +724,8 @@ a code,
 .mainContainer .wrapper a:focus code {
   color: $primaryColor;
   font-family: "SFMono-Regular",source-code-pro,Menlo,Monaco,Consolas,"Roboto Mono","Droid Sans Mono","Liberation Mono",Consolas,"Courier New",Courier,monospace;
-  font-weight: 300;
 }
+
 a code {
   text-decoration: underline;
 }
@@ -733,121 +733,11 @@ a:hover code {
   text-decoration: none;
 }
 
-.prism {
-  white-space: pre-wrap;
+.hljs {
   font-family: "SFMono-Regular",source-code-pro,Menlo,Monaco,Consolas,"Roboto Mono","Droid Sans Mono","Liberation Mono",Consolas,"Courier New",Courier,monospace;
-  font-size: 13px;
-  line-height: 20px;
   border-left: 4px solid $primaryColor;
-  overflow-x: scroll;
-  -webkit-overflow-scrolling: touch;
-  padding: 15px 10px;
+  font-size: 13px;
   margin: 20px 0;
-  background-color: $prismColor;
-}
-
-.prism + .prism {
-  margin-top: 14px;
-}
-.prism table {
-  background: none;
-  border: none;
-}
-.prism table tbody tr {
-  background: none;
-  display: flex;
-  flex-flow: row nowrap;
-}
-.highlighter-rouge .prism table tbody tr td {
-  display: block;
-  flex: 1 1;
-}
-.highlighter-rouge .prism table tbody tr td.gutter {
-  border-right: 1px solid #005469;
-  color: #006883;
-  margin-right: 10px;
-  max-width: 40px;
-  padding-right: 10px;
-}
-.highlighter-rouge .prism table tbody tr td.gutter pre {
-  max-width: 20px;
-}
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #a67f59;
-  background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function {
-  color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
 }
 
 /** GitHub **/
@@ -2011,37 +1901,3 @@ 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;
-}

lib/static/js/webplayer.js

@@ -1,73 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable module-strict */
-
-(function() {
-  "use strict";
-  // Not on browser
-  if (typeof document === "undefined") {
-    return;
-  }
-
-  document.addEventListener("DOMContentLoaded", init);
-
-  function init() {
-    var mobile = isMobile();
-
-    if (mobile) {
-      document
-        .querySelector(".nav-site-wrapper a[data-target]")
-        .addEventListener("click", toggleTarget);
-    }
-
-    var webPlayerList = document.querySelectorAll(".web-player");
-    // Either show interactive or static code block, depending on desktop or mobile
-    for (var i = 0; i < webPlayerList.length; ++i) {
-      webPlayerList[i].classList.add(mobile ? "mobile" : "desktop");
-
-      if (!mobile) {
-        // Determine location to look up required assets
-        var assetRoot = encodeURIComponent(
-          document.location.origin + "/react-native"
-        );
-
-        // Set iframe src. Do this dynamically so the iframe never loads on mobile.
-        var iframe = webPlayerList[i].querySelector("iframe");
-        iframe.src =
-          iframe.getAttribute("data-src") + "&assetRoot=" + assetRoot;
-      }
-    }
-
-    var snackPlayerList = document.querySelectorAll(".snack-player");
-
-    // Either show interactive or static code block, depending on desktop or mobile
-    for (var i = 0; i < snackPlayerList.length; ++i) {
-      var snackPlayer = snackPlayerList[i];
-      var snackDesktopPlayer = snackPlayer.querySelectorAll(
-        ".desktop-friendly-snack"
-      )[0];
-      var plainCodeExample = snackPlayer.querySelectorAll(
-        ".mobile-friendly-snack"
-      )[0];
-
-      if (mobile) {
-        snackDesktopPlayer.remove();
-        plainCodeExample.style.display = "block";
-      } else {
-        plainCodeExample.remove();
-      }
-    }
-  }
-
-  // Primitive mobile detection
-  function isMobile() {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      navigator.userAgent
-    );
-  }
-})();