Add language labels to code snippets and highlight command output properly

[ci skip]
This commit is contained in:
Jose Diaz-Gonzalez
2016-07-04 23:15:09 -04:00
parent b615e55ec5
commit a05792b363
2 changed files with 59 additions and 7 deletions

View File

@@ -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'),
label = document.createElement('div');
addLanguageLabel(el.parentElement, language);
wrapper.setAttribute('class', 'highlight-show-language');
label.setAttribute('class', 'highlight-show-language-label');
label.appendChild(document.createTextNode(language));
wrapper.appendChild(label);
el.parentElement.insertBefore(wrapper, el);
var nextEl = el.parentElement.nextElementSibling;
if (nextEl !== null && nextEl.nodeName.toLowerCase() === 'pre') {
var wrapper = document.createElement('div');
wrapper.setAttribute('class', 'highlight-output');
wrapper.wrap(nextEl);
addLanguageLabel(wrapper, 'output');
addClass(el, 'highlight-has-output');
}
});
addListener(currentVersionEl, 'click', function() {