Skip to content

Instantly share code, notes, and snippets.

@KorigamiK
Created June 17, 2024 19:31
Show Gist options
  • Save KorigamiK/085064463a93ec4d309ca7ae718f0af8 to your computer and use it in GitHub Desktop.
Save KorigamiK/085064463a93ec4d309ca7ae718f0af8 to your computer and use it in GitHub Desktop.
render tex on claude.ai
// ==UserScript==
// @name Claude MathJaX
// @namespace http://tampermonkey.net/
// @version 0.5
// @description Render LaTeX math formulas on the page using MathJax
// @match https://claude.ai/*
// @grant none
// ==/UserScript==
// deno-lint-ignore-file no-window no-window-prefix
(function () {
"use strict";
// Insert MathJax library
const 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);
// Configure MathJax
window.MathJax = {
tex2jax: {
inlineMath: [["$", "$"], ["\\(", "\\)"]],
displayMath: [["$$", "$$"], ["\\[", "\\]"]],
processEscapes: true,
},
CommonHTML: { linebreaks: { automatic: true } },
"HTML-CSS": { linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic: true } },
};
// Trigger rendering function
function renderMathJax() {
for (let i = 0; i < 2; i++) {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
}
// Create rendering button
const button = document.createElement("button");
button.textContent = "TeX";
button.style.position = "fixed";
button.style.bottom = "20px";
button.style.right = "20px";
button.style.zIndex = "9999";
button.style.padding = "10px";
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";
// Mouse enter and leave 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)";
});
document.body.appendChild(button);
// Re-render when the button is clicked
button.addEventListener("click", renderMathJax, false);
// First rendering
window.addEventListener("load", renderMathJax, false);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment