window.addEventListener('DOMContentLoaded', function(){ /** * * @param {*} args * @returns {Array} */ function toArray(args) { if (Array.from) return Array.from(args); return Array.prototype.slice.call(args); } var myExtension = [{ type: 'lang', regex: /^¨D¨D([\s\S]*?)¨D¨D/gm, replace: function($0, $1) { return katex.renderToString($1, { displayMode: true, throwOnError: false }); } }, { type: 'lang', regex: /¨D((?!¨D).+?)¨D/g, replace: function($0, $1) { return katex.renderToString($1, { displayMode: false, throwOnError: false }); } }]; var converter = new showdown.Converter({ extensions: [myExtension]}); converter.setFlavor('github'); converter.setOption('simpleLineBreaks', false); converter.setOption('splitAdjacentBlockquotes', true); converter.setOption('literalMidWordUnderscores', true); converter.setOption('metadata', true); var parser = new DOMParser(); var items = toArray(document.querySelectorAll('.md')); items.forEach(function(item) { document.createDocumentFragment(); var temp = document.createElement('div'); // var unescaped = parser.parseFromString( // '' + item.textContent, // 'text/html').body.textContent; // console.log(item.textContent); // console.log(unescaped); temp.innerHTML = converter.makeHtml(item.textContent); var mathElements = toArray(temp.querySelectorAll('[role=math]')); mathElements.forEach(function(element){ var displayMode = element.tagName === 'DIV'; element.innerHTML = katex.renderToString(element.textContent, { displayMode: displayMode, throwOnError: false }); }); var mathCodes = toArray(temp.querySelectorAll('code.language-math')); mathCodes.forEach(function(elem) { var pre = elem.parentNode; var div = document.createElement('p'); var unescaped = parser.parseFromString( '' + pre.textContent, 'text/html').body.textContent; div.innerHTML = katex.renderToString(unescaped, { displayMode: true, throwOnError: false }); pre.parentNode.replaceChild(div, pre); }); item.innerHTML = ''; item.appendChild(temp); item.classList.remove('md'); }); });