Skip to content

Instantly share code, notes, and snippets.

@tylerkahn
Created March 15, 2023 02:49
Show Gist options
  • Save tylerkahn/f19c87baeeb430d17584d5b9e5d2cd0b to your computer and use it in GitHub Desktop.
Save tylerkahn/f19c87baeeb430d17584d5b9e5d2cd0b to your computer and use it in GitHub Desktop.
Tampermonkey script for formatting math equations within the ChatGPT UI
// ==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.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment