Render latex in claude ai using mathjax

latex_claude.user.js

// ==UserScript==
// @name         Claude AI MathJax Renderer
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Render LaTeX math formulas on the page using MathJax
// @match        https://claude.ai/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to insert the MathJax library into the document head
    function insertMathJaxLibrary() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_CHTML';
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    // Function to configure MathJax settings
    function configureMathJax() {
        window.MathJax = {
            tex2jax: {
                inlineMath: [['$', '$'], ['\\(', '\\)']], // Inline math delimiters
                displayMath: [['$$', '$$'], ['\\[', '\\]']], // Display math delimiters
                processEscapes: true // Process LaTeX escapes
            },
            CommonHTML: { linebreaks: { automatic: true } }, // Automatic line breaks for CommonHTML output
            "HTML-CSS": { linebreaks: { automatic: true } }, // Automatic line breaks for HTML-CSS output
            SVG: { linebreaks: { automatic: true } } // Automatic line breaks for SVG output
        };
    }

    // Function to trigger MathJax rendering
    function renderMathJax() {
        for (var i = 0; i < 2; i++) {
            MathJax.Hub.Queue(["Typeset", MathJax.Hub]); // Queue typesetting process twice for better rendering
        }
    }

    // Function to create and style the "Render Latex" button
    function createRenderButton() {
        var button = document.createElement('button');
        button.textContent = 'Render Latex';
        button.style.position = 'fixed';
        button.style.bottom = '20px';
        button.style.right = '20px';
        button.style.zIndex = '9999';
        button.style.padding = '10px 20px';
        button.style.fontSize = '16px';
        button.style.borderRadius = '5px';
        button.style.border = '2px solid #333';
        button.style.backgroundColor = 'rgba(255, 255, 255, 0.4)';
        button.style.cursor = 'pointer';
        button.style.transition = 'background-color 0.3s, transform 0.1s';

        // Add hover effects
        button.addEventListener('mouseenter', function() {
            button.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
        });
        button.addEventListener('mouseleave', function() {
            button.style.backgroundColor = 'rgba(255, 255, 255, 0.4)';
        });

        // Add click effects
        button.addEventListener('mousedown', function() {
            button.style.transform = 'scale(0.95)';
        });
        button.addEventListener('mouseup', function() {
            button.style.transform = 'scale(1)';
        });

        // Add click event listener to trigger MathJax rendering
        button.addEventListener('click', renderMathJax, false);

        document.body.appendChild(button);
    }

    // Main execution
    insertMathJaxLibrary(); // Insert MathJax library
    configureMathJax(); // Configure MathJax settings
    createRenderButton(); // Create the "Render Latex" button

    // Initial rendering on window load
    window.addEventListener('load', renderMathJax, false);
})();