Add language labels to code snippets and highlight command output properly

[ci skip]

docs/assets/style.css

@@ -310,6 +310,11 @@ a.list-group-item {
   -o-transform: none;
   transform: none;
 }
+.highlight-output pre {
+  color: #fff;
+  background-color: #000;
+  padding: 10px;
+}
 code {
   padding: 0;
   padding-top: 0.2em;

docs/template.html

@@ -75,6 +75,11 @@
         -o-transform: none;
         transform: none;
       }
+      .highlight-output pre {
+        color: #fff;
+        background-color: #000;
+        padding: 10px;
+      }
     </style>
   </head>
   <body>
@@ -200,6 +205,35 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/1.3.0/anchor.js"></script>
     <script>
+    // Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+    if (!('nextElementSibling' in document.documentElement)) {
+      Object.defineProperty(Element.prototype, 'nextElementSibling', {
+        get: function () {
+          var e = this.nextSibling;
+          while (e && 1 !== e.nodeType) {
+            e = e.nextSibling;
+          }
+          return e;
+        }
+      });
+    }
+    // Source: https://jonlabelle.com/snippets/view/javascript/wrap-an-html-element-in-javascript
+    HTMLElement.prototype.wrap = function (elms) {
+        if (!elms.length) elms = [elms];
+        for (var i = elms.length - 1; i >= 0; i--) {
+            var child = (i > 0) ? this.cloneNode(true) : this;
+            var el = elms[i];
+            var parent = el.parentNode;
+            var sibling = el.nextSibling;
+            child.appendChild(el);
+            if (sibling) {
+                parent.insertBefore(child, sibling);
+            } else {
+                parent.appendChild(child);
+            }
+        }
+    };
+
     document.addEventListener('DOMContentLoaded', function (e) {
       var markdownBody = document.querySelectorAll('.markdown-body')[0],
           isRedirect = markdownBody.innerHTML.trim().indexOf('<p>See the <a href=') === 0;
@@ -339,6 +373,17 @@
         });
       });
 
+      var addLanguageLabel = function (el, language) {
+        var labelWrapper = document.createElement('div'),
+            label = document.createElement('div');
+
+        labelWrapper.setAttribute('class', 'highlight-show-language');
+        label.setAttribute('class', 'highlight-show-language-label');
+        label.appendChild(document.createTextNode(language));
+        labelWrapper.appendChild(label);
+        el.insertBefore(labelWrapper, el.firstChild);
+      };
+
       var highlightElements = document.querySelectorAll('pre');
       Array.prototype.forEach.call(highlightElements, function(el, i) {
         var language = languageClass(el.parentElement);
@@ -346,14 +391,16 @@
           return;
         }
 
-        var wrapper = document.createElement('div'),
+        addLanguageLabel(el.parentElement, language);
-            label = document.createElement('div');
 
-        wrapper.setAttribute('class', 'highlight-show-language');
+        var nextEl = el.parentElement.nextElementSibling;
-        label.setAttribute('class', 'highlight-show-language-label');
+        if (nextEl !== null && nextEl.nodeName.toLowerCase() === 'pre') {
-        label.appendChild(document.createTextNode(language));
+          var wrapper = document.createElement('div');
-        wrapper.appendChild(label);
+          wrapper.setAttribute('class', 'highlight-output');
-        el.parentElement.insertBefore(wrapper, el);
+          wrapper.wrap(nextEl);
+          addLanguageLabel(wrapper, 'output');
+          addClass(el, 'highlight-has-output');
+        }
       });
 
       addListener(currentVersionEl, 'click', function() {