mirror of
https://github.com/dokku/dokku.git
synced 2025-12-29 00:25:08 +01:00
Add language labels to code snippets and highlight command output properly
[ci skip]
This commit is contained in:
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user