import React from 'react';
import pkg from '../../package.json';
import 'highlight.js/styles/base16/solarized-light.css';
// import 'highlight.js/styles/base16/solarized-dark.css';
import './Content.css';
const hljsVersion = [...pkg.dependencies['highlight.js']].reduce(
(memo, char) => (
/[a-zA-Z0-9.-]/.test(char)
? `${memo}${char}`
: memo
),
'',
);
const externalLinkIcon = ``;
const Content = ({ html }) => {
const onRef = (el) => {
if (!el) {
return;
}
transformExternalLinks(el);
applySyntaxHighlighting(el);
};
const transformExternalLinks = (el) => {
el.querySelectorAll('a').forEach((anchor) => {
if (new URL(anchor).origin === location.origin) {
return;
}
if (anchor.getAttribute('target') === '_blank') {
return;
}
anchor.setAttribute('target', '_blank');
return anchor.appendChild(Object.assign(
document.createElement('span'),
{ innerHTML: externalLinkIcon },
));
});
};
const applySyntaxHighlighting = (el) => {
el.querySelectorAll('pre code').forEach((block) => {
const worker = new Worker('/workers/highlighter.js');
worker.addEventListener('error', (ev) => {
// console.error(ev);
// Fail silently?
worker.terminate();
});
worker.addEventListener('message', (ev) => {
block.innerHTML = ev.data;
worker.terminate();
});
block.classList.add('hljs');
worker.postMessage({
version: hljsVersion,
code: block.textContent,
language: (
[...block.classList].find(v => /^language-/.test(v)) || ''
).split('-')[1],
});
});
};
return (
);
};
export default Content;