在Wix博客中使用KaTeX渲染数学符号的技术咨询

Hey there! Let's get your KaTeX math rendering working with your Wix blog step by step—using your existing "Blog Posts" database and rich text field. Here's exactly what you need to do:

Step 1: Load KaTeX Resources in Your Blog Page Code #

You can't directly paste raw <link> and <script> tags into Wix's page code editor. Instead, we'll dynamically inject these resources into your page's <head> using JavaScript.

Open the code editor for your blog post page (where you've added the textbox linked to your rich text field) and replace your current code with this:

$w.onReady(function () {
    // Load KaTeX CSS
    const katexStyle = document.createElement('link');
    katexStyle.rel = 'stylesheet';
    katexStyle.href = 'https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.css';
    katexStyle.integrity = 'sha384-qCEsSYDSH0x5I45nNW4oXemORUZnYFtPy/FqB/OjqxabTMW5HVaaH9USK4fN3goV';
    katexStyle.crossOrigin = 'anonymous';
    document.head.appendChild(katexStyle);

    // Load KaTeX JS
    const katexScript = document.createElement('script');
    katexScript.src = 'https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.js';
    katexScript.integrity = 'sha384-YFVvRUwgqxkAVN9bmAVLsKilmOKfQLyUx0ZlmDNs0aBUTsvMLnRxE3Km0NrZa0i9';
    katexScript.crossOrigin = 'anonymous';
    katexScript.defer = true;
    
    // Once KaTeX loads, add the auto-render plugin to detect math expressions automatically
    katexScript.onload = function() {
        const renderScript = document.createElement('script');
        renderScript.src = 'https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js';
        renderScript.crossOrigin = 'anonymous';
        renderScript.defer = true;
        
        renderScript.onload = function() {
            // Wait for your textbox to load, then render math
            $w('#textbox').onReady(() => {
                // Access the textbox's underlying content container
                const textboxContent = $w('#textbox').getNode().querySelector('[data-testid="rich-text-container"]');
                if (textboxContent) {
                    // Auto-render math using standard KaTeX delimiters
                    renderMathInElement(textboxContent, {
                        delimiters: [
                            {left: '$$', right: '$$', display: true}, // Block-level math
                            {left: '$', right: '$', display: false}    // Inline math
                        ]
                    });
                }
            });
        };
        document.head.appendChild(renderScript);
    };
    document.head.appendChild(katexScript);
});

Step 2: Format Math in Your Rich Text Field #

In your "Blog Posts" database's rich text field, use KaTeX's standard syntax to wrap your math expressions:

• For inline math (embedded in text): Wrap with single dollar signs, e.g., $E=mc^2$
• For block-level math (centered, larger): Wrap with double dollar signs, e.g., $$\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}$$

Step 3: Test Your Setup #

Publish your Wix site, then open a blog post with math expressions—you should see properly rendered KaTeX symbols instead of raw text.

Quick Notes: #

• The auto-render.min.js plugin does the heavy lifting: it scans your textbox content and renders any matching math expressions automatically.
• We use $w('#textbox').getNode() to access the textbox's underlying DOM element, since Wix's API doesn't expose direct access to rich text HTML.
• If you renamed your textbox, make sure to update the #textbox selector in the code to match your element's ID.

内容的提问来源于stack exchange，提问作者Or Kedar