☰

Universal Inline & Display LaTeX Renderer (KaTeX)

Render inline and display LaTeX math on any website using KaTeX. Careful with input fields! Be sure to have rendering OFF when entering an input field, otherwise you can mess up your delimiters. I have made a fix button for this, but it might not be exactly correct.

// ==UserScript==
// @name         Universal Inline & Display LaTeX Renderer (KaTeX)
// @namespace    http://tampermonkey.net/
// @version      2025-07-13.5.2
// @description  Render inline and display LaTeX math on any website using KaTeX. Careful with input fields! Be sure to have rendering OFF when entering an input field, otherwise you can mess up your delimiters. I have made a fix button for this, but it might not be exactly correct.
// @match        *://*/*
// @author       ParaMigi and ChatGPT
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js
// @icon         https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/81c7f261-f956-486d-b688-8737c82fe364/d89cugg-d51ff456-9ced-4b87-97ab-f6ff06bb9cf2.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgxYzdmMjYxLWY5NTYtNDg2ZC1iNjg4LTg3MzdjODJmZTM2NFwvZDg5Y3VnZy1kNTFmZjQ1Ni05Y2VkLTRiODctOTdhYi1mNmZmMDZiYjljZjIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.gdj9FL-s9pYJa6xIhrkmsn5E4vpH2-VeEZPDcqBbHSo
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    // User defined constants

    // LaTeX delimiters you want to support
    const delimiters = [
        { left: '$$', right: '$$', display: true },
        { left: '\\[', right: '\\]', display: true },
        { left: '\\(', right: '\\)', display: false },
        { left: '$', right: '$', display: false },
        { left: '[;', right: ';]', display: false },
        // same but with backtick
        { left: '`$$', right: '$$`', display: true },
        { left: '`\\[', right: '\\]`', display: true },
        { left: '`\\(', right: '\\)`', display: false },
        { left: '`$', right: '$`', display: false },
        { left: '`[;', right: ';]`', display: false }
    ];

    // Color of the rendered LaTeX
    const renderedLatexTextColor = 'red'; // set to null or false if you want to keep the original color
    const renderedLatexBackgroundColor = '#ffeeee'; // set to null or false if you don't want to have a background color
    const renderedLatexBorderColor = 'red'; // set to null or false if you don't want to have a border

    // How the buttons look
    const buttonTransparentOpacity = '0.5'; // 0 is fully transparent, 1 is fully solid.

    const toggleButtonTransparentText = '✨∫ π';
    const toggleButtonActiveText = '✨∫ π✨ LaTeX rendering is currently ON';
    const toggleButtonInactiveText = '✨∫ π✨ LaTeX rendering is currently OFF';

    const fixButtonTransparentText = '🛠️';
    const fixButtonText = '🛠️ Fix Input Field';

    // Render automatically on loading the page
    const autoRender = false;




    // Inject KaTeX CSS
    const katexCSS = document.createElement('link');
    katexCSS.rel = 'stylesheet';
    katexCSS.href = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css';
    document.head.appendChild(katexCSS);

    // Create toggle button (initially hidden)
    const toggleButton = document.createElement('button');
    toggleButton.textContent = toggleButtonTransparentText;
    toggleButton.style.position = 'fixed';
    toggleButton.style.bottom = '15px';
    toggleButton.style.right = '50px';
    toggleButton.style.zIndex = 9999;
    toggleButton.style.padding = '3px 10px 6px 10px';
    toggleButton.style.background = '#333';
    toggleButton.style.color = 'white';
    toggleButton.style.border = '1px solid #999';
    toggleButton.style.borderRadius = '15px';
    toggleButton.style.cursor = 'pointer';
    toggleButton.style.fontSize = '14px';
    toggleButton.style.fontFamily = 'sans-serif';
    toggleButton.style.opacity = buttonTransparentOpacity; // Semi-transparent
    toggleButton.style.display = 'none'; // Hidden by default
    document.body.appendChild(toggleButton);

    let renderingEnabled = autoRender ? true : false;

    // Helper: strip delimiters from LaTeX string, e.g. "$...$" -> "..."
    function stripDelimiters(latex) {
        for (const d of delimiters) {
            if (latex.startsWith(d.left) && latex.endsWith(d.right)) {
                return latex.slice(d.left.length, latex.length - d.right.length);
            }
        }
        return latex;
    }

    // Render LaTeX math in the page by replacing text nodes with KaTeX-rendered spans
    function renderLatex() {
        if (!renderingEnabled) return;

        const latexPattern = new RegExp(
            delimiters
            .map(d => `(${d.left.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')}[^]*?${d.right.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`)
            .join('|'),
            'g'
        );

        const forbiddenTags = ['SCRIPT', 'STYLE', 'TEXTAREA', 'INPUT', 'BUTTON', 'SELECT'];

        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
            acceptNode: function (node) {
                const el = node.parentElement;
                if (!el) return NodeFilter.FILTER_REJECT;

                if (forbiddenTags.includes(el.tagName)) return NodeFilter.FILTER_REJECT;
                if (el.closest('.katex-rendered')) return NodeFilter.FILTER_REJECT;
                if (!latexPattern.test(node.nodeValue)) return NodeFilter.FILTER_REJECT;

                return NodeFilter.FILTER_ACCEPT;
            }
        });


        const nodesToReplace = [];
        let node;
        while ((node = walker.nextNode())) {
            nodesToReplace.push(node);
        }

        for (const textNode of nodesToReplace) {
            const original = textNode.nodeValue;
            const parts = original.split(latexPattern).filter(p => p != null && p !== '');

            const fragment = document.createDocumentFragment();

            for (let part of parts) {
                const matched = delimiters.find(d => part.startsWith(d.left) && part.endsWith(d.right));
                if (matched) {
                    const latex = part
                        .slice(matched.left.length, part.length - matched.right.length)
                        // The following lines are hacks to fix some formatting issues on some websites, or commands that KaTeX does not recognize
                        .replace(/\\mbox\b/g, '\\textnormal') // hack for mbox not being recognized by KaTeX
                        .replace(/\\left\{/g, '\\left\\{') // hack for when \left\{ is already being formatted into \left{ (like on reddit)
                        .replace(/\\right\}/g, '\\right\\}') // same for right
                        .replace(/\\begin\{(array|tabular|matrix)[^}]*\}([\s\S]*?)\\end\{\1\}/g, (match, env, content) => {
                            const fixedContent = content.replace(/(^|[^\\])\\\s/g, '$1\\\\ ');
                            return `\\begin{${env}}${fixedContent}\\end{${env}}`;
                        }); // hack for when \\ in an array, table, or matrix environment is being formatted to \ (like on reddit).


                    try {
                        const span = document.createElement('span');
                        const wrapper = document.createElement('div');
                        if (renderedLatexTextColor) {span.style.color = renderedLatexTextColor;};

                        wrapper.innerHTML = katex.renderToString(latex, {
                            throwOnError: false,
                            displayMode: matched.display
                        });

                        // Get the inner .katex element (but only the rendered part, not the fallback plaintext)
                        const visualKatexElement = wrapper.querySelector('.katex-mathml') || wrapper.firstChild;
                        // Set the styling as defined at the start
                        if (visualKatexElement) {
                            if (renderedLatexTextColor) {visualKatexElement.style.color = renderedLatexTextColor;};
                            if (renderedLatexBackgroundColor) {visualKatexElement.style.backgroundColor = renderedLatexBackgroundColor;};
                            if (renderedLatexBorderColor) {visualKatexElement.style.border = '1px solid '+renderedLatexBorderColor;};
                            if (renderedLatexBackgroundColor || renderedLatexBorderColor) {
                                visualKatexElement.style.padding = '4px';
                                visualKatexElement.style.borderRadius = '6px';
                                visualKatexElement.style.display = 'inline-block'; // ensure it wraps around the content properly
                            }
                        }

                        span.appendChild(visualKatexElement.cloneNode(true));
                        span.classList.add('katex-rendered');
                        span.dataset.latexSrc = part;
                        fragment.appendChild(span);
                    } catch (e) {
                        fragment.appendChild(document.createTextNode(part));
                    }
                } else {
                    fragment.appendChild(document.createTextNode(part));
                }
            }

            textNode.parentElement.replaceChild(fragment, textNode);
        }
    }


    // Revert rendered math back to original LaTeX source text
    function revertLatex() {
        document.querySelectorAll('.katex-rendered').forEach(el => {
            const originalLatex = el.dataset.latexSrc || el.textContent;
            const textNode = document.createTextNode(originalLatex);
            el.parentElement.replaceChild(textNode, el);
        });
    }


    // Check if page has any LaTeX delimiters to decide if toggle button should be shown
    function pageHasLatex() {
        const bodyText = document.body.innerText;
        return delimiters.some(d => {
            const pattern = new RegExp(d.left.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'));
            return pattern.test(bodyText);
        });
    }

    // Show the toggle button if LaTeX is detected in the page
    function updateButtonVisibility() {
        if (pageHasLatex()) {
            toggleButton.style.display = 'block';
        }
    }

    // Toggle button click handler
    toggleButton.onclick = () => {
        renderingEnabled = !renderingEnabled;
        toggleButton.textContent = renderingEnabled ? toggleButtonActiveText : toggleButtonInactiveText;
        if (renderingEnabled) {
            renderLatex();
            revertLatex();
            renderLatex();
        } else {
            revertLatex();
        }
    };

    // Button opacity hover effect and CTRL key hiding logic
    let ctrlHeld = false;

    toggleButton.addEventListener('mouseover', () => {
        toggleButton.style.opacity = '1';
        toggleButton.textContent = renderingEnabled ? toggleButtonActiveText : toggleButtonInactiveText;
    });

    toggleButton.addEventListener('mouseout', () => {
        if (!ctrlHeld) toggleButton.style.opacity = buttonTransparentOpacity;
        toggleButton.textContent = toggleButtonTransparentText;
    });

    document.addEventListener('keydown', (e) => {
        if (e.ctrlKey) {
            ctrlHeld = true;
            toggleButton.style.opacity = '0';
            toggleButton.style.pointerEvents = 'none';
            toggleButton.style.zIndex = 1;
        }
    });

    document.addEventListener('keyup', (e) => {
        if (!e.ctrlKey) {
            ctrlHeld = false;
            toggleButton.style.opacity = buttonTransparentOpacity;
            toggleButton.style.pointerEvents = 'auto';
            toggleButton.style.zIndex = 9999;
        }
    });

    // Create the fix button (only shown when rendering is off but still detected)
    const fixButton = document.createElement('button');
    fixButton.textContent = fixButtonTransparentText;
    fixButton.style.position = 'fixed';
    fixButton.style.bottom = '15px';
    fixButton.style.right = '200px'; // Left of the toggle-button
    fixButton.style.zIndex = 9999;
    fixButton.style.padding = '3px 10px 6px 10px';
    fixButton.style.background = '#444';
    fixButton.style.color = 'white';
    fixButton.style.border = '1px solid #999';
    fixButton.style.borderRadius = '15px';
    fixButton.style.cursor = 'pointer';
    fixButton.style.fontSize = '14px';
    fixButton.style.fontFamily = 'sans-serif';
    fixButton.style.opacity = buttonTransparentOpacity;
    fixButton.style.display = 'none'; // hidden initially
    document.body.appendChild(fixButton);


    // Function to update the visibility of the fix button
    let fixButtonVisible = false;

    function updateFixButtonVisibility() {
        if (renderingEnabled) return;
        const hasKatexRendered = document.querySelector('.katex-rendered') !== null;
        fixButton.style.display = hasKatexRendered ? 'block' : 'none';
        fixButtonVisible = hasKatexRendered;
    }

    fixButton.addEventListener('mouseover', () => {
        fixButton.style.opacity = '1';
        fixButton.textContent = fixButtonText;
    });
    fixButton.addEventListener('mouseout', () => {
        fixButton.style.opacity = buttonTransparentOpacity;
        fixButton.textContent = fixButtonTransparentText;
    });


    // Fix button click handler
    fixButton.onclick = () => {
        const renderedSpans = Array.from(document.querySelectorAll('.katex-rendered'));
        for (const span of renderedSpans) {
            const mathml = span.querySelector('.katex-mathml');
            if (!mathml) continue;

            const text = mathml.textContent.trim();

            // Remove first "word" before first space
            const firstSpaceIndex = text.indexOf(' ');
            const latexContent = firstSpaceIndex === -1
            ? text
            : text.slice(firstSpaceIndex + 1).trim();

            // Check if the span is the only content inside a paragraph
            const parent = span.parentElement;
            let finalLatex;
            if (parent && parent.tagName === 'P') {
                // Check if the paragraph only has this span and/or whitespace text nodes
                const onlyKatex = Array.from(parent.childNodes).every(node => {
                    return node === span ||
                        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '');
                });

                if (onlyKatex) {
                    finalLatex = '\\[' + latexContent + '\\]';
                } else {
                    finalLatex = '[; ' + latexContent + ' ;]';
                }
            } else {
                finalLatex = '[; ' + latexContent + ' ;]';
            }

            const newNode = document.createTextNode(finalLatex);
            span.parentElement.replaceChild(newNode, span);
        }
        console.log('Fix Input Field replacement done');
    };


    // On start, check if page has LaTeX and show button if so
    setTimeout(() => {
        updateButtonVisibility();
        updateFixButtonVisibility();
        if (renderingEnabled) {
            renderLatex();
            revertLatex();
            renderLatex();
        }
    }, 500);

    setInterval(() => {
        updateButtonVisibility();
        updateFixButtonVisibility();
    }, 1000);


})();