把LaTeX存进网址：可分享的在线渲染器

本站独立编写的精简示例，仅覆盖hash存取+MathJax+DOMPurify主链路；faster-latex整文档模式与自定义压缩字典未实现，如需请按原思路扩展。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>LaTeX分享渲染器</title>
<script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.4.16/dist/purify.min.js"></script>
<script>
window.MathJax={tex:{inlineMath:[['$','$'],['\\(','\\)']]},svg:{fontCache:'global'}};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@4.1.3/es5/tex-svg.js"></script>
</head>
<body>
<button id="toggle">切换渲染</button>
<textarea id="src" rows="8" cols="60" placeholder="粘贴LaTeX源码"></textarea>
<div id="out"></div>
<script>
const src=document.getElementById('src'),out=document.getElementById('out'),tg=document.getElementById('toggle');
function toHash(t){const c=pako.deflate(t);const b=btoa(String.fromCharCode(...c));location.hash='p:'+b;}
function fromHash(){const h=location.hash.slice(1);if(h.startsWith('p:')){const bin=atob(h.slice(2));const arr=Uint8Array.from(bin,c=>c.charCodeAt(0));return new TextDecoder().decode(pako.inflate(arr));}return decodeURIComponent(h);}
async function render(){toHash(src.value);const html=DOMPurify.sanitize(src.value);out.innerHTML=html;src.style.display='none';out.style.display='block';await MathJax.typesetPromise([out]);tg.textContent='编辑源码';}
tg.onclick=()=>{if(src.style.display==='none'){src.style.display='block';out.style.display='none';tg.textContent='切换渲染';}else{render();}};
if(location.hash.length>1){src.value=fromHash();render();}
</script>
</body>
</html>

本站按原文公开的需求顺序改写的中文提示词，可直接粘贴给Claude Code等助手，逐条对应原文列出的几轮需求。

我要一个纯前端工具：可以用#片段链接（#后面接LaTeX代码）直接渲染该代码，排版效果要好；还要支持一个p:前缀，表示LaTeX先经deflate压缩再base64编码，以缩短链接。从CDN引入最合适的LaTeX渲染库（单条公式用MathJax，整篇文档可考虑WebAssembly方案）。无hash加载时显示编辑器，可粘贴LaTeX并切换到“渲染”视图，渲染视图本身要可收藏分享；从#片段链接打开时也要能切回编辑源码。渲染输出必须先经DOMPurify消毒；为防XSS，渲染区可放进iframe沙箱，参考既有SVG渲染项目的做法。再加一个从URL或GitHub Gist载入LaTeX源码的选项。