render latex equations in claude chat

script.js

// ==UserScript==
// @name         Claude Equation Renderer
// @namespace    http://tampermonkey.net/
// @author       tpob
// @downloadURL  https://gist.github.com/TTTPOB/84ea9ece3ec640414416649fae09ff04/raw/script.js
// @updateURL    https://gist.github.com/TTTPOB/84ea9ece3ec640414416649fae09ff04/raw/script.js
// @version      0.0.2
// @description  Renders LaTeX equations in claude
// @match        https://claude.ai/chat/*
// @grant        none
// ==/UserScript==


(function() {

    window.MathJax = {
        tex: {
            inlineMath: [
                ['$', '$'],
                ['\\(', '\\)']
            ]
        },
        svg: {
            fontCache: 'global'
        },
        options: {
            ignoreHtmlClass: ['ignore-mathjax', 'code']
        }
    };

    // Load MathJax library
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js';
    script.async = true;
    script.onload = function() {
        let typingTimer;
        const typingDelay = 1000;

        const observer = new MutationObserver(function(mutationsList, observer) {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {

                    const addedNodes = mutation.addedNodes;

                    for (let node of addedNodes) {
                        if (node.nodeType === Node.ELEMENT_NODE) {
                            if (node.hasAttribute('contenteditable')) {
                                node.classList.add('ignore-mathjax')
                            };
                        };
                    };
                };


                if (mutation.type == 'characterData') {
                    const targetNode = mutation.target;
                    const pElement = targetNode.parentElement;


                    if (pElement.tagName === 'P' && pElement.closest('.contents')) {
                        clearTimeout(typingTimer);

                        typingTimer = setTimeout(function() {
                            const emElements = pElement.querySelectorAll('em');
                            emElements.forEach(em => {
                                const text = em.textContent;
                                const newText = `_${text}_`;
                                pElement.innerHTML = pElement.innerHTML.replace(em.outerHTML, newText);
                            });
                            MathJax.typeset();
                        }, typingDelay);


                    }

                };

            };
        });

        // Configure the observer to watch for changes in the document body
        observer.observe(document.body, {
            childList: true,
            subtree: true,
            characterData: true,
        });

        setTimeout(function(){
            const pElements = document.body.querySelectorAll('.contents p');
            pElements.forEach(p => {
                const emElements = p.querySelectorAll('em');
                emElements.forEach(em => {
                    const text = em.textContent;
                    const newText = `_${text}_`;
                    p.innerHTML = p.innerHTML.replace(em.outerHTML, newText);
                });
            });

            MathJax.typeset()
        }, 5000);
    };
    document.head.appendChild(script);

})();