[Bug] Dollar sign causing rendering issues?

[olalonde]

Describe the bug

When there is a dollar sign in the output, the rendering becomes... weird.

To Reproduce

Ask chatgpt "How much does a car cost?"

Expected behavior

The rendering should be normal like regular text.

Deployment

• Docker
• Vercel
• Server

[olalonde]

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

[Yidadaa]

This is a known issue. The reason is that Markdown's formula syntax is ${some math}$, and when there are dollar signs in the text, such as: price is $100, discount is $20, it will be recognized as a formula, causing the anomaly in the rendering.

A simple solution is to modify the code below and add a preprocessing step:

https://github.com/Yidadaa/ChatGPT-Next-Web/blob/3e1514239ccd6bb1c8890684dbac7328ab72a307/app/components/markdown.tsx#L102-L104

Here is a possible solution written by GPT-4, still has some bugs:

function preprocess(content) {
    // Matches the pattern space$...$space or space$$...$$space, where ... does not contain the $ symbol
    const regexDouble = /(\s)\$\$(.*?)\$\$(\s)/g;
    const regexSingle = /(\s)\$(.*?)\$(\s)/g;

    // Replace $$...$$ or $...$ with a special marker to differentiate it from normal $ symbols during further processing
    let preprocessed = content.replace(regexDouble, (match, p1, p2, p3) => {
        // Check if there is a space before and after the $$
        if (p1 && p3) {
            return 'SPECIAL_MARK_DOUBLE' + p2 + 'SPECIAL_MARK_DOUBLE';
        }
        // If not, return the original match
        return match;
    });

    preprocessed = preprocessed.replace(regexSingle, (match, p1, p2, p3) => {
        // Check if there is a space before and after the $
        if (p1 && p3) {
            return 'SPECIAL_MARK_SINGLE' + p2 + 'SPECIAL_MARK_SINGLE';
        }
        // If not, return the original match
        return match;
    });

    return preprocessed;
}

function postprocess(content) {
    // Replace remaining $ symbols with \$
    let postprocessed = content.replace(/\$/g, '\\$');

    // Replace the special markers back to $$...$$ and $...$
    postprocessed = postprocessed.replace(/SPECIAL_MARK_DOUBLE(.*?)SPECIAL_MARK_DOUBLE/g, '$$$1$$$');
    postprocessed = postprocessed.replace(/SPECIAL_MARK_SINGLE(.*?)SPECIAL_MARK_SINGLE/g, '$$1$');

    return postprocessed;
}

// Usage
let content = 'This is a test $math formula$ and this is another $$math formula$$, but this$should not$be replaced.';
let preprocessed = preprocess(content);
let postprocessed = postprocess(preprocessed);
console.log(postprocessed);