// TODO: This really ought to be restricted to elements within a techdocs component,
// but to do that properly, main.js needs to instantiate techdocs instances. In theory
// You could have more than one techdocs per page.
function init() {
hljs.initHighlighting();
// Detect additions of new <pre><code> blocks to the page (TODO: should be instance DOM only)
// and highlight them automatically
if ('MutationObserver' in window) {
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mut) {
// Ignore any mutations that do not add new elements
if (mut.type !== 'childList' || !mut.addedNodes.length) {
return;
}
[].slice.call(mut.addedNodes).forEach(function(el) {
// Ignore unless added element is a PRE > CODE
el = (el.tagName === 'PRE' && el.querySelector('code')) || el;
if (el.tagName === 'CODE' && el.parentNode.tagName === 'PRE') {
hljs.highlightBlock(el);
}
});
});
});
observer.observe(document.documentElement, {subtree: true, childList: true});
}
}
module.exports = () => {
// Wrap elements in code markup
$('[pikHighlight]').map((idx, el) => {
var $contents;
var $el = $(el);
var lang = $el.attr('pikHighlight') || '';
if($el.is('code')){
$el.addClass('language-' + lang);
hljs.highlightBlock($el.get(0));
} else if($el.is('pre')){
$contents = $el.contents().detach();
var $wrapper = $('<code>')
.addClass('language-' + lang)
.appendTo($el);
$contents.appendTo($wrapper);
} else {
$contents = $el.contents().detach();
var $wrapperPre = $('<pre>').appendTo($el);
var $wrapperCode = $('<code>')
.addClass('language-' + lang)
.appendTo($wrapperPre);
$contents.appendTo($wrapperCode);
}
});
hljs.initHighlighting();
};
componentDidMount() {
hljs.configure({ classPrefix: '' });
hljs.initHighlighting();
document.querySelectorAll('pre.hl code').forEach(block => hljs.highlightBlock(block));
}
import hljs from 'highlight.js';
import anchors from 'exports?anchors!anchor-js/anchor';
import setupDocsNavAnimation from './docs-nav-animation';
// import setupTOC from './toc';
setupDocsNavAnimation();
// setupTOC();
hljs.initHighlighting();
anchors.add('.main h2, .main h3, .main h4, .main h5, .main h6');
componentDidMount() {
hljs.initHighlighting();
}