Ah yes, highlight.js. One innocent
import hljs from 'highlight.js';
pulls in over a Megabyte of hundreds of programming language syntax definitions.
Do you really need Mathematica, "ISBL", and "GML" — or would a curated list of popular programming languages such as Python, Java, JavaScript, and HTML ("xml.js" ) be enough? This results in a massive reduction down to ~70 kilobytes.
Even better: load this reduced size of highlight.js only on demand, leveraging Webpack's "import(..) to webpack chunk" mechanism:
const getHighlightJs = async function() {
let result;
if (window.hljs) {
result = window.hljs;
}
else {
result = (await import('highlight.js/lib/core')).default;
const javascript = (await import('highlight.js/lib/languages/javascript')).default;
result.registerLanguage('javascript', javascript);
const xml = (await import('highlight.js/lib/languages/xml')).default;
result.registerLanguage('xml', xml);
// xml provides html/html5 highlighting
window.hljs = result;
}
return result;
};
const lazyHighlightAll = async function() {
let result = null;
// see https://highlightjs.org/usage/
// highlight.js's hljs.highlightAll() matches on 'pre > code'
const hasHighlightableCode = document.querySelector('pre > code') ? true : false;
if (hasHighlightableCode) {
const hljs = await getHighlightJs();
hljs.highlightAll();
result = hljs;
}
return result;
};
document.addEventListener('DOMContentLoaded', function() {
lazyHighlightAll();
});