Tampermonkey script for formatting math equations within the ChatGPT UI

script.js

// ==UserScript==
// @name         Render LaTeX Equations with KaTeX
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Automatically display properly formatted LaTeX equations from AI output
// @author       You
// @match        chat.openai.com
// @grant        GM_addStyle
// @require      https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.18/katex.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.18/contrib/auto-render.min.js
// ==/UserScript==

(function () {
    'use strict';

    const selector = 'flex flex-col items-center text-sm dark:bg-gray-800';

    // Add KaTeX CSS
    GM_addStyle(`
@import url('https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.18/katex.min.css');
`);

    const renderLaTeX = () => {
        const outputSelector = selector;
        const outputElement = document.querySelector(outputSelector);

        if (outputElement) {
            renderMathInElement(outputElement, {
                delimiters: [
                    { left: "\\(", right: "\\)", display: false },
                    { left: "\\[", right: "\\]", display: true },
                ],
            });
        }
    };

    // Listen for new AI output and render the LaTeX equation
    const observer = new MutationObserver(renderLaTeX);
    const targetNode = document.querySelector(selector);
    const config = { childList: true, subtree: true };

    if (targetNode) {
        observer.observe(targetNode, config);
    } else {
        console.warn('Target node not found for LaTeX rendering');
    }
})();

/** You can use the following prompt to get ChatGPT (GPT4) to output correctly **/
/*

From now on when outputting mathematical expressions, please provide the LaTeX representation of the equation using double backslashes and display math delimiters. Do not use a <code> tag as that will mess up the Tampermonkey script I'm using. Please use single backslashes and ( and ) for inlining and double backslashes with [ and ] for displaying.

*/