Giter Club home page Giter Club logo

Comments (5)

Issues-translate-bot avatar Issues-translate-bot commented on May 29, 2024

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


Title: [Bug] There is a problem with multi-line formula rendering

from chatgpt-next-web.

laxfer avatar laxfer commented on May 29, 2024

这种的问题,我已经解决了,替换我的代码进去试试
/app/components/markdown.tsx 里面

function replaceLatexEnvironments(text: string): string {
  // 使用正则表达式替换 $$\begin{aligned} 为 $$
  text = text.replace(/\$\$\s*\\begin\{aligned}/, '$$\\begin{aligned}');

  // 使用正则表达式替换 \end{aligned}$$ 为 \end{aligned}$
  text = text.replace(/\\end\{aligned}\s*\$\$/g, '\\end{aligned}$');

  return text;
}

function escapeBrackets(text: string): string {
  const pattern =
    /(```[\s\S]*?```|`[^`]*`)|\\\[(.*?)\\\]|\\\[(\n\\begin\{[\s\S]*?\}\n)\\\]/g;
  text =  replaceLatexEnvironments(text);
  return text.replace(
    pattern,
    (match, codeBlock, simpleSquareBracketContent, complexSquareBracketContent) => {
      if (codeBlock) {
        // 代码块,直接返回
        return match;
      } else if (simpleSquareBracketContent !== undefined) {
        // 简单方括号内的内容,转换为 $...$ 形式
        const regex = /\[(.*?)\s*(?=\+|=|{)/;
        const isMatched = regex.test(match);
        if(isMatched) { // 加一个约束条件
            // 处理方括号内的内容,转换为 $...$ 形式
            return `$${simpleSquareBracketContent}$`;
        }
      } else if (complexSquareBracketContent !== undefined) {
        // 复杂方括号内容(包含 \begin{}),也转换为 $$...$$ 形式
        return `$$${complexSquareBracketContent}$$`;
      }
      // 默认返回匹配到的内容
      return match;
    },
  );
}

function escapeDollarNumber(text: string) {
  let escapedText = "";
  let isInMathExpression = false;
  let isInCodeBlock = false;

  const codeBlockStartRegex = /^`{1,3}$/;

  for (let i = 0; i < text.length; i++) {
    let char = text[i];
    const nextChar = text[i + 1] || " ";

    // Toggle the isInMathExpression flag when encountering a dollar sign
    if (char === "$") {
      isInMathExpression = !isInMathExpression;
    }

    // Toggle the isInCodeBlock flag when encountering a code block start indicator
    if (codeBlockStartRegex.test(char + nextChar)) {
      isInCodeBlock = !isInCodeBlock;
    }

    // If inside a code block, preserve the character as is
    if (isInCodeBlock) {
      escapedText += char;
      continue;
    }

    // Preserve the double dollar sign in math expressions
    if (char === "$" && nextChar === "$") {
      escapedText += "$$"; // Preserve the double dollar sign
      i++; // Skip the next dollar sign since we have already included it
      continue;
    }

    // Escape a single dollar sign followed by a number outside of math expressions
    if (char === "$" && nextChar >= "0" && nextChar <= "9" && !isInMathExpression) {
      escapedText += "&#36;"; // Use HTML entity &#36; to represent the dollar sign
      continue;
    }

    escapedText += char;
  }

  return escapedText;
}

function _MarkDownContent(props: { content: string }) {
  const escapedContent = useMemo(
    () => escapeBrackets(escapeDollarNumber(props.content)),
    [props.content],
  );``````

显示正确演示:
![510192826](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/assets/52877918/446a00fc-7383-4b52-9c9f-16c78fc28cad)

from chatgpt-next-web.

Issues-translate-bot avatar Issues-translate-bot commented on May 29, 2024

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


510192826

from chatgpt-next-web.

QAbot-zh avatar QAbot-zh commented on May 29, 2024

nice,方法有效!

from chatgpt-next-web.

Issues-translate-bot avatar Issues-translate-bot commented on May 29, 2024

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


Nice, the method works!

from chatgpt-next-web.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.