关于 $$ 符号的使用问题的说明（改编）

Zyx-2012

详情请看我blog
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MD 公式转换工具</title>
    <style>
        :root {
            --primary: #6366f1;
            --primary-hover: #4f46e5;
            --bg: #f8fafc;
            --card-bg: rgba(255, 255, 255, 0.85);
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border: #e2e8f0;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --glass: rgba(255, 255, 255, 0.2);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --spacing: 1.5rem;
            --radius: 12px;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg: #0f172a;
                --card-bg: rgba(15, 23, 42, 0.7);
                --text-primary: #f8fafc;
                --text-secondary: #94a3b8;
                --border: #1e293b;
                --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
                --glass: rgba(15, 23, 42, 0.4);
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: var(--bg);
            color: var(--text-primary);
            line-height: 1.6;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-image: radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.1) 0px, transparent 50%),
            radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.1) 0px, transparent 50%);
        }

        .container {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: var(--spacing);
            flex: 1;
        }

        header {
            text-align: center;
            margin-bottom: 3rem;
            padding-top: 2rem;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            background: linear-gradient(90deg, var(--primary), #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: -0.025em;
        }

        .subtitle {
            color: var(--text-secondary);
            font-size: 1.125rem;
            max-width: 600px;
            margin: 0 auto;
        }

        .tool-card {
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 2.5rem;
            border: 1px solid var(--glass);
            transform: translateY(20px);
            opacity: 0;
            animation: fadeInUp 0.6s forwards;
            transition: var(--transition);
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .card-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--primary), #8b5cf6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            box-shadow: 0 4px 6px rgba(79, 70, 229, 0.15);
        }

        .card-icon svg {
            width: 24px;
            height: 24px;
            color: white;
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
        }

        .card-description {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .textarea-container {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .textarea-label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-primary);
        }

        textarea {
            width: 100%;
            min-height: 120px;
            padding: 1rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            resize: vertical;
            font-size: 0.9375rem;
            transition: var(--transition);
            background: var(--card-bg);
            color: var(--text-primary);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
            font-family: monospace;
        }

        textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        .button-group {
            display: flex;
            gap: 1rem;
            margin: 2rem 0;
        }

        button {
            flex: 1;
            padding: 0.875rem 1rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9375rem;
            font-weight: 500;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        button:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        button:active {
            transform: translateY(0);
        }

        button svg {
            width: 18px;
            height: 18px;
        }

        .stats {
            display: flex;
            justify-content: space-between;
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .stat-item svg {
            width: 14px;
            height: 14px;
        }

        footer {
            text-align: center;
            padding: 2rem 0;
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin-top: auto;
        }

        .katex-preview {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 1.5rem;
            min-height: 100px;
            overflow-x: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 1.2em;
        }

        .katex-preview.error {
            color: #ef4444;
            border-color: #ef4444;
            background: rgba(239, 68, 68, 0.05);
            font-family: inherit;
            justify-content: flex-start;
            text-align: left;
            padding: 1rem;
        }

        .katex-display {
            margin: 0;
            overflow-x: auto;
            overflow-y: hidden;
        }

        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }

            h1 {
                font-size: 2rem;
            }

            .tool-card {
                padding: 1.5rem;
            }

            .button-group {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1>Markdown 公式转换器</h1>
        <p class="subtitle">将 LaTeX 数学公式转换为兼容格式</p>
    </header>

    <main>
        <div class="tool-card">
            <div class="card-header">
                <div class="card-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                    </svg>
                </div>
                <div>
                    <h2 class="card-title">公式转换器</h2>
                    <p class="card-description">输入 Markdown 内容，自动转换兼容格式</p>
                </div>
            </div>

            <div class="textarea-container">
                <label for="input" class="textarea-label">输入 Markdown 内容</label>
                <textarea id="input" placeholder="输入标准公式格式：
行内公式: [imath:0]E=mc^2[/imath:0]
块级公式: [math:0]\int_a^b f(x)dx[/math:0]"></textarea>
            </div>

            <div class="stats">
                <div class="stat-item">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                    </svg>
                    <span id="inputStats">输入: 0 字符</span>
                </div>
                <div class="stat-item">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span id="renderStatus">准备就绪</span>
                </div>
            </div>

            <div class="button-group">
                <button id="render-button">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                    </svg>
                    渲染公式
                </button>
            </div>

            <div class="textarea-container">
                <label class="textarea-label">公式预览</label>
                <div id="latex-preview" class="katex-preview">等待渲染...</div>
            </div>
        </div>
    </main>

    <footer>
        <p>© <span id="current-year"></span> LaTeX 公式渲染工具 | 使用 KaTeX 引擎</p>
    </footer>
</div>

<script>
    // 初始化状态
    let katexLoaded = false;

    // 加载KaTeX资源
    function loadKatex() {
        if (!document.querySelector('#katex-css')) {
            const link = document.createElement('link');
            link.id = 'katex-css';
            link.rel = 'stylesheet';
            link.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css';
            document.head.appendChild(link);
        }

        if (!document.querySelector('#katex-js')) {
            const script = document.createElement('script');
            script.id = 'katex-js';
            script.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js';
            script.onload = () => {
                katexLoaded = true;
                document.getElementById('render-button').disabled = false;
                updateStatus('准备就绪');
            };
            document.head.appendChild(script);
        }
    }

    // 更新状态显示
    function updateStatus(message) {
        document.getElementById('renderStatus').textContent = message;
    }

    // 更新字符统计
    function updateStats() {
        const input = document.getElementById('input');
        document.getElementById('inputStats').textContent = `输入: [imath:0]{input.value.length} 字符`;
    }

    // 严格验证公式格式
    function validateFormula(formula) {
        // 行内公式: 精确匹配 [/imath:0]...[imath:0]，且不包含换行
        const inlineRegex = /^\$[^[/imath:0]\n]+\[math:0]/;

        // 块级公式: 精确匹配 [/math:0]...$$，允许包含换行
        const blockRegex = /^\$\$[\s\S]+\$\$$/;

        return inlineRegex.test(formula) || blockRegex.test(formula);
    }

    // 渲染LaTeX公式
    function renderLaTeX() {
        const input = document.getElementById('input');
        const preview = document.getElementById('latex-preview');

        // 重置状态
        preview.innerHTML = '';
        preview.classList.remove('error');
        updateStats();

        const content = input.value.trim();
        if (!content) {
            preview.innerHTML = '请输入内容';
            updateStatus('等待输入');
            return;
        }

        if (!katexLoaded) {
            preview.innerHTML = '正在加载数学引擎...';
            updateStatus('加载中...');
            return;
        }

        // 严格验证公式格式
        if (!validateFormula(content)) {
            preview.innerHTML = '请使用标准格式：\n行内公式: $...$ \n块级公式: $$...$$';
            preview.classList.add('error');
            updateStatus('格式错误');
            return;
        }

        try {
            const isBlock = content.startsWith('$$');
            katex.render(content.slice(isBlock ? 2 : 1, isBlock ? -2 : -1), preview, {
                throwOnError: true,
                displayMode: isBlock
            });
            updateStatus(isBlock ? '块级公式渲染成功' : '行内公式渲染成功');
        } catch (e) {
            preview.innerHTML = `渲染错误: ${e.message}`;
            preview.classList.add('error');
            updateStatus('渲染失败');
        }
    }

    // 初始化应用
    document.addEventListener('DOMContentLoaded', () => {
        // 设置年份
        document.getElementById('current-year').textContent = new Date().getFullYear();

        // 加载KaTeX
        loadKatex();

        // 绑定渲染按钮事件
        const renderButton = document.getElementById('render-button');
        renderButton.addEventListener('click', renderLaTeX);
        renderButton.disabled = true;

        // 初始化状态
        updateStatus('正在初始化...');

        // 输入时更新字符统计
        document.getElementById('input').addEventListener('input', updateStats);
    });
</script>
</body>
</html>
Yichen

那么问题来了：洛谷剪贴板甚至人大附OJ讨论区发帖的编辑功能都比这个好用
Zyx-2012

Yichen 你就说这个UI好不好看吧