diff --git a/package.json b/package.json index 5e3322c..76aaebd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "katex-github-chrome-extension", - "version": "0.3.4", + "version": "0.3.5", "main": "src/manifest.json", "license": "MIT", "scripts": { diff --git a/src/index.js b/src/index.js index 2ebfaaf..0ff7e76 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,9 @@ import renderMath from "./utils/mathRenderer"; const readmeObserver = new MutationObserver((mutations) => { for (const mutation of mutations) { for (const addedNode of mutation.addedNodes) { + if (!addedNode.tagName) { + continue; + } if (addedNode.id === "readme") { console.log("readme dom change detected"); renderMath(); diff --git a/src/utils/mathRenderer.js b/src/utils/mathRenderer.js index e20f92a..38778d3 100644 --- a/src/utils/mathRenderer.js +++ b/src/utils/mathRenderer.js @@ -3,10 +3,10 @@ import renderMathInElement from "katex/dist/contrib/auto-render"; /** * Transforms all problematic tags to custom tags. * - * @param {HTMLElement} readmeEl the readme element to transform + * @param {HTMLElement} renderEl the element to transform */ -function transformProblematicTags(readmeEl) { - readmeEl.innerHTML = readmeEl.innerHTML +function transformProblematicTags(renderEl) { + renderEl.innerHTML = renderEl.innerHTML // replace "} ... " with "}\@@em@start@@_ ... \@@em@end@@_" .replace(/}([\s\S]*?)<\/em>/g, "}\\@@em@start@@_$1\\@@em@end@@_") // replace ") ... " with ")\@@em@start@@_ ... \@@em@end@@_" @@ -23,10 +23,10 @@ function transformProblematicTags(readmeEl) { /** * Renders all math blocks by calling Katex's {@function renderMathInElement}. * - * @param {HTMLElement} readmeEl + * @param {HTMLElement} renderEl */ -function renderMathViaKatex(readmeEl) { - renderMathInElement(readmeEl, { +function renderMathViaKatex(renderEl) { + renderMathInElement(renderEl, { delimiters: [ { left: "$$", right: "$$", display: true }, { left: "$", right: "$", display: false }, @@ -68,10 +68,10 @@ function renderMathViaKatex(readmeEl) { * Removes the custom tags introduced in {@function transformProblematicTags} * for all KaTeX nodes. * - * @param {HTMLElement} readmeEl + * @param {HTMLElement} renderEl */ -function removeTagsFromKatexElements(readmeEl) { - const katexElements = readmeEl.getElementsByClassName("katex"); +function removeTagsFromKatexElements(renderEl) { + const katexElements = renderEl.getElementsByClassName("katex"); for (const el of katexElements) { el.innerHTML = el.innerHTML .replace(/\\@@em@start@@/g, "") @@ -87,10 +87,10 @@ function removeTagsFromKatexElements(readmeEl) { * This function must be called after {@function removeTagsFromKatexElements} * to avoid changing the custom tags within the katex rendered blocks. * - * @param {HTMLElement} readmeEl + * @param {HTMLElement} renderEl */ -function revertNonProblematicTags(readmeEl) { - readmeEl.innerHTML = readmeEl.innerHTML +function revertNonProblematicTags(renderEl) { + renderEl.innerHTML = renderEl.innerHTML .replace(/\\@@em@start@@_([\s\S]*?)\\@@em@end@@_/g, "$1") .replace(/\\@@em@start@@\*([\s\S]*?)\\@@em@end@@\*/g, "$1") .replace(/\\@@br@@/g, "
"); @@ -102,15 +102,18 @@ function revertNonProblematicTags(readmeEl) { */ function renderMath() { const readmeEl = document.getElementById("readme"); + const wikiEl = document.getElementById("wiki-body"); - if (!readmeEl) { + if (!readmeEl && !wikiEl) { return; } - transformProblematicTags(readmeEl); - renderMathViaKatex(readmeEl); - removeTagsFromKatexElements(readmeEl); - revertNonProblematicTags(readmeEl); + const renderEl = readmeEl || wikiEl; + + transformProblematicTags(renderEl); + renderMathViaKatex(renderEl); + removeTagsFromKatexElements(renderEl); + revertNonProblematicTags(renderEl); } export default renderMath;