Spaces:
Running
Running
Create a Latex math renderer for Latex. It should have a command board with common functions such as fractions, square roots, etc, and an automatic syntax fixer for common mistakes. Use Katex for the rendering.
03662fa
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>LaTeX Math Renderer (KaTeX)</title> | |
| <!-- KaTeX CSS & JS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"> | |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script> | |
| <!-- TailwindCSS (CDN) --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| // Primary and secondary intentionally undefined as requested | |
| primary: { | |
| DEFAULT: 'var(--color-primary, #0ea5e9)', | |
| 50: '#eff6ff', | |
| 100: '#dbeafe', | |
| 200: '#bfdbfe', | |
| 300: '#93c5fd', | |
| 400: '#60a5fa', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| 800: '#1e40af', | |
| 900: '#1e3a8a', | |
| }, | |
| secondary: { | |
| DEFAULT: 'var(--color-secondary, #f59e0b)', | |
| 50: '#fffbeb', | |
| 100: '#fef3c7', | |
| 200: '#fde68a', | |
| 300: '#fcd34d', | |
| 400: '#fbbf24', | |
| 500: '#f59e0b', | |
| 600: '#d97706', | |
| 700: '#b45309', | |
| 800: '#92400e', | |
| 900: '#78350f', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script defer src="script.js"></script> | |
| </head> | |
| <body class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100"> | |
| <!-- Root theming: intentionally undefined as requested --> | |
| <div id="app" class="undefined min-h-screen"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-30 border-b border-gray-200/60 dark:border-gray-700/60 bg-white/80 dark:bg-gray-900/80 backdrop-blur"> | |
| <div class="mx-auto max-w-7xl px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-9 h-9 rounded-lg bg-undefined-500 flex items-center justify-center text-white font-bold">Lx</div> | |
| <h1 class="text-lg sm:text-xl font-semibold tracking-tight">LaTeX Math Renderer</h1> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button id="themeToggle" class="inline-flex items-center gap-2 rounded-md border border-gray-200 dark:border-gray-700 px-3 py-1.5 text-sm hover:bg-gray-100 dark:hover:bg-gray-800"> | |
| <span id="themeIcon">🌙</span> | |
| <span>Theme</span> | |
| </button> | |
| <button id="clearBtn" class="inline-flex items-center gap-2 rounded-md bg-undefined-500 text-white px-3 py-1.5 text-sm hover:opacity-90"> | |
| Clear | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="mx-auto max-w-7xl px-4 py-6 grid grid-cols-1 lg:grid-cols-12 gap-6"> | |
| <!-- Command Board --> | |
| <aside class="lg:col-span-4"> | |
| <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-sm overflow-hidden"> | |
| <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between"> | |
| <h2 class="font-semibold">Command Board</h2> | |
| <div class="text-xs text-gray-500">Click to insert</div> | |
| </div> | |
| <div class="p-4 space-y-6 overflow-y-auto max-h-[70vh]"> | |
| <!-- Structure --> | |
| <section> | |
| <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Structure</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="cmd btn-outline" data-insert="\frac{■}{□}">Frac ■/□</button> | |
| <button class="cmd btn-outline" data-insert="■^{2}">x^2</button> | |
| <button class="cmd btn-outline" data-insert="■_{i}">x_i</button> | |
| <button class="cmd btn-outline" data-insert="\sqrt{■}">√■</button> | |
| <button class="cmd btn-outline" data-insert="\sqrt[■]{□}">n√□</button> | |
| <button class="cmd btn-outline" data-insert="\overline{■}">Overline ■</button> | |
| <button class="cmd btn-outline" data-insert="\underline{■}">Underline ■</button> | |
| <button class="cmd btn-outline" data-insert="\vec{■}">Vector ■</button> | |
| </div> | |
| </section> | |
| <!-- Operators --> | |
| <section> | |
| <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Operators</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="cmd btn-outline" data-insert="■+■">+</button> | |
| <button class="cmd btn-outline" data-insert="■-■">−</button> | |
| <button class="cmd btn-outline" data-insert="■ \\times ■">×</button> | |
| <button class="cmd btn-outline" data-insert="■ \\cdot ■">⋅</button> | |
| <button class="cmd btn-outline" data-insert="■ \\div ■">÷</button> | |
| <button class="cmd btn-outline" data-insert="\\pm">±</button> | |
| <button class="cmd btn-outline" data-insert="\\infty">∞</button> | |
| <button class="cmd btn-outline" data-insert="■ \\cdot ■">·</button> | |
| </div> | |
| </section> | |
| <!-- Relations --> | |
| <section> | |
| <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Relations</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="cmd btn-outline" data-insert="■ = ■">=</button> | |
| <button class="cmd btn-outline" data-insert="■ \\neq ■">≠</button> | |
| <button class="cmd btn-outline" data-insert="■ < ■"><</button> | |
| <button class="cmd btn-outline" data-insert="■ > ■">></button> | |
| <button class="cmd btn-outline" data-insert="■ \\leq ■">≤</button> | |
| <button class="cmd btn-outline" data-insert="■ \\geq ■">≥</button> | |
| <button class="cmd btn-outline" data-insert="■ \\approx ■">≈</button> | |
| <button class="cmd btn-outline" data-insert="■ \\sim ■">∼</button> | |
| </div> | |
| </section> | |
| <!-- Parentheses / Brackets --> | |
| <section> | |
| <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Grouping</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="cmd btn-outline" data-insert="\\left( ■ \\right)">(■)</button> | |
| <button class="cmd btn-outline" data-insert="\\left[ ■ \\right]">[■]</button> | |
| <button class="cmd btn-outline" data-insert="\\left\\{ ■ \\right\\}">{■}</button> | |
| <button class="cmd btn-outline" data-insert="\\left\\langle ■ \\right\\rangle">⟨■⟩</button> | |
| <button class="cmd btn-outline" data-insert="\\left| ■ \\right|">|■|</button> | |
| <button class="cmd btn-outline" data-insert="\\left\\lvert ■ \\right\\rvert">‖■‖</button> | |
| <button class="cmd btn-outline" data-insert="\\bigl ■ \\bigr">bigl</button> | |
| <button class="cmd btn-outline" data-insert="\\Bigl ■ \\Bigr">Bigl</button> | |
| </div> | |
| </section> | |
| <!-- Calculus --> | |
| <section> | |
| <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Calculus</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="cmd btn-outline" data-insert="\\frac{d}{dx} ■">d/dx</button> | |
| <button class="cmd btn-outline" data-insert="\\int ■ dx">∫ dx</button> | |
| <button class="cmd btn-outline" data-insert="\\int_{■}^{□} ■ dx">∫_a^b</button> | |
| <button class="cmd btn-outline" data-insert="\\sum_{■}^{□} ■">∑</button> | |
| <button class="cmd btn-outline" data-insert="\\prod_{■}^{□} ■">∏</button> | |
| <button class="cmd btn-outline" data-insert="\\lim_{x \\to ■} ■">lim</button> | |
| <button class="cmd btn-outline" data-insert="\\partial">∂</button> | |
| <button class="cmd btn-outline" data-insert="\\nabla">∇</button> | |
| </div> | |
| </section> | |
| <!-- Greek --> | |
| <section> | |
| <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Greek</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="cmd btn-outline" data-insert="\\alpha">α</button> | |
| <button class="cmd btn-outline" data-insert="\\beta">β</button> | |
| <button class="cmd btn-outline" data-insert="\\gamma">γ</button> | |
| <button class="cmd btn-outline" data-insert="\\delta">δ</button> | |
| <button class="cmd btn-outline" data-insert="\\epsilon">ε</button> | |
| <button class="cmd btn-outline" data-insert="\\theta">θ</button> | |
| <button class="cmd btn-outline" data-insert="\\lambda">λ</button> | |
| <button class="cmd btn-outline" data-insert="\\pi">π</button> | |
| <button class="cmd btn-outline" data-insert="\\mu">μ</button> | |
| <button class="cmd btn-outline" data-insert="\\rho">ρ</button> | |
| <button class="cmd btn-outline" data-insert="\\sigma">σ</button> | |
| <button class="cmd btn-outline" data-insert="\\phi">φ</button> | |
| <button class="cmd btn-outline" data-insert="\\omega">ω</button> | |
| <button class="cmd btn-outline" data-insert="\\Gamma">Γ</button> | |
| <button class="cmd btn-outline" data-insert="\\Delta">Δ</button> | |
| <button class="cmd btn-outline" data-insert="\\Theta">Θ</button> | |
| <button class="cmd btn-outline" data-insert="\\Lambda">Λ</button> | |
| <button class="cmd btn-outline" data-insert="\\Pi">Π</button> | |
| <button class="cmd btn-outline" data-insert="\\Sigma">Σ</button> | |
| <button class="cmd btn-outline" data-insert="\\Phi">Φ</button> | |
| <button class="cmd btn-outline" data-insert="\\Omega">Ω</button> | |
| </div> | |
| </section> | |
| <!-- Functions --> | |
| <section> | |
| <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Functions</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="cmd btn-outline" data-insert="\\sin ■">sin</button> | |
| <button class="cmd btn-outline" data-insert="\\cos ■">cos</button> | |
| <button class="cmd btn-outline" data-insert="\\tan ■">tan</button> | |
| <button class="cmd btn-outline" data-insert="\\ln ■">ln</button> | |
| <button class="cmd btn-outline" data-insert="\\log ■">log</button> | |
| <button class="cmd btn-outline" data-insert="\\exp ■">exp</button> | |
| <button class="cmd btn-outline" data-insert="\\max ■">max</button> | |
| <button class="cmd btn-outline" data-insert="\\min ■">min</button> | |
| <button class="cmd btn-outline" data-insert="\\arg \\max ■">argmax</button> | |
| <button class="cmd btn-outline" data-insert="\\arg \\min ■">argmin</button> | |
| <button class="cmd btn-outline" data-insert="\\begin{bmatrix}■ & ■\\\\■ & ■\\end{bmatrix}">2×2 Matrix</button> | |
| </div> | |
| </section> | |
| <!-- Arrows --> | |
| <section> | |
| <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Arrows</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="cmd btn-outline" data-insert="\\to">→</button> | |
| <button class="cmd btn-outline" data-insert="\\gets">←</button> | |
| <button class="cmd btn-outline" data-insert="\\leftrightarrow">↔</button> | |
| <button class="cmd btn-outline" data-insert="\\Rightarrow">⇒</button> | |
| <button class="cmd btn-outline" data-insert="\\Leftarrow">⇐</button> | |
| <button class="cmd btn-outline" data-insert="\\iff">⇔</button> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Editor + Preview --> | |
| <section class="lg:col-span-8 space-y-6"> | |
| <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-sm overflow-hidden"> | |
| <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <h2 class="font-semibold">Editor</h2> | |
| <span id="autofixStatus" class="text-xs rounded-full bg-undefined-500/10 text-undefined-600 px-2 py-0.5">Auto-fix: On</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <button id="copyTexBtn" class="inline-flex items-center gap-2 rounded-md border border-gray-200 dark:border-gray-700 px-3 py-1.5 text-sm hover:bg-gray-100 dark:hover:bg-gray-800"> | |
| Copy LaTeX | |
| </button> | |
| <button id="renderBtn" class="inline-flex items-center gap-2 rounded-md bg-undefined-500 text-white px-3 py-1.5 text-sm hover:opacity-90"> | |
| Render | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <textarea id="editor" rows="10" class="w-full resize-y rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-4 py-3 font-mono text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-undefined-500/50" placeholder="Type LaTeX here or use the Command Board..."></textarea> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Tips: Use Tab/Shift+Tab to navigate buttons. Place cursor where you want to insert a snippet; place ■ as a placeholder and it will be selected after insertion. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-sm overflow-hidden"> | |
| <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between"> | |
| <h2 class="font-semibold">Rendered Output (KaTeX)</h2> | |
| <div id="renderError" class="hidden text-sm text-red-600"></div> | |
| </div> | |
| <div class="p-4"> | |
| <div id="preview" class="min-h-[64px] p-4 rounded-lg border border-dashed border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"></div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="mx-auto max-w-7xl px-4 pb-10 text-center text-xs text-gray-500"> | |
| Built with KaTeX + TailwindCSS. Primary/Secondary/Theme intentionally undefined as requested. | |
| </footer> | |
| </div> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |