Add runkit embeds.

Author: tolmasky

doc/api/crypto.md

@@ -11,7 +11,7 @@ wrappers for OpenSSL's hash, HMAC, cipher, decipher, sign, and verify functions.
 
 Use `require('crypto')` to access this module.
 
-```js
+```js runkit
 const crypto = require('crypto');
 
 const secret = 'abcdefg';

doc/api_assets/runkit.js

@@ -0,0 +1,46 @@
+(function () {
+    if (window.NodeList && !NodeList.prototype.forEach)
+        NodeList.prototype.forEach = Array.prototype.forEach;
+
+    var runnables = document.querySelectorAll(".runkit");
+
+    if (runnables.length <= 0)
+        return;
+
+    var script = document.createElement("script");
+
+    script.onload = function () {
+
+        var version = document
+            .querySelector('meta[name="nodejs.org:node-version"]')
+            .content;
+
+        RunKit
+            .getMaximumAvailableNodeVersionInRange(version)
+            .then(function (nodeVersion) {
+                if (!nodeVersion)
+                    return;
+
+                runnables.forEach(function (runnable) {
+                    var replace = runnable.parentNode;
+                    RunKit.createNotebook({
+                        element: replace,
+                        source: RunKit.sourceFromElement(replace),
+                        clearParentContents: true,
+                        minHeight: '0px',
+                        nodeVersion: nodeVersion,
+                        evaluateOnLoad: RunKit.__nodeShouldEvaluateOnLoad(),
+                        onLoad: function () {
+                            replace.style.background = "none";
+                            replace.style.overflow = "visible";
+                            replace.style.border = "none";
+                        }
+                    });
+                });
+            });
+    };
+
+    script.src = "https://embed.runkit.com";
+
+    document.body.append(script);
+})();

doc/api_assets/style.css

@@ -383,15 +383,18 @@ code {
 }
 
 pre {
-  padding: 1rem;
+  padding: 4px 8px 8px;
   vertical-align: top;
   background-color: #f2f2f2;
   margin: 1rem;
   overflow-x: auto;
+  border: 1px solid #E7E5E8;
+  border-radius: 4px;
 }
 
 pre > code {
   padding: 0;
+  background: none;
 }
 
 pre + h3 {
@@ -652,6 +655,10 @@ td > *:last-child {
   }
 }
 
+#apicontent {
+  overflow: hidden;
+}
+
 @media print {
   html {
     height: auto;
@@ -699,7 +706,4 @@ td > *:last-child {
   a {
     color: inherit;
   }
-  #apicontent {
-    overflow: hidden;
-  }
 }

doc/template.html

@@ -53,5 +53,6 @@ <h2>Table of Contents</h2>
       </div>
     </div>
   </div>
+  <script src="assets/runkit.js"></script>
 </body>
 </html>