simpleclub-extended / flutter_math_fork

Fork of flutter_math addressing compatibility problems while flutter_math is not being maintained.
Apache License 2.0
83 stars 112 forks source link

Use $ as delimiters in Katex #52

Open backviet opened 2 years ago

backviet commented 2 years ago

I'm a newbie with katex, so I don't know how to use katex with exists my data. Now I display math data with mathjax in website with config:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

How to I setup katex with similar config to display my exist data by flutter_math_fork.

Below is my test codes:

import 'package:flutter/material.dart';
import 'package:flutter_math_fork/flutter_math.dart';

class Demome extends StatelessWidget {
  const Demome({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final expression =
        "\\({{\\left( x-2 \\right)}^{2}}+{{\\left( y-1 \\right)}^{2}}+{{\\left( z+3 \\right)}^{2}}=13.\\)";
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(expression, softWrap: true),
        ),
        Divider(
          thickness: 1.0,
          height: 1.0,
        ),
        Expanded(
          child: Center(
            child: Math.tex(
              expression,
              mathStyle: MathStyle.textCramped,
              settings: TexParserSettings(
                strict: Strict.ignore,
                displayMode: true,
              ),
            ),
          ),
        )
      ],
    );
  }
}

And I have received an error message: "Parse error: Can't use '\(' in math mode".

I have tried to read documents, test codes and sample codes many times but I can't find any solution for my situation.

Aniruddh-0701 commented 2 years ago

Hi, Actually when you require $\TeX$ code to be rendered on the web in math mode, you enclose them as $...$ or $$...$$.

The MathJax pre-processor you've mentioned above actually changes the above delimiters to the custom one you need, here $...$ is replaced by \(...\)

In case of this plugin, the code you pass is rendered in math mode and thus, you don't need the delimiters \(...\)

MisterZhu commented 1 year ago

Hello, can this plugin allow text and mathematical formulas to be displayed in one line? Below is test codes:

import 'package:flutter/material.dart';
import 'package:flutter_math_fork/flutter_math.dart';

class Demome extends StatelessWidget {
  const Demome({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final expression =
        "Calculus is a branch of mathematics that deals with the derivatives and integrals of functions. Here is an example calculus:
Example: Find the derivative of the function $f(x)=x^3$at $x=2$.
Solution: Using the derivation formula, we can find the derivation of $f'(x)$:
$$f'(x) = 3x^2$$
Then, put $x=2$into $f'(x)$to get:
$$f'(2) = 3(2)^2 = 12$$
Thus, the derivative of the function $f(x)$at $x=2$is $12$.";
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(expression, softWrap: true),
        ),
        Divider(
          thickness: 1.0,
          height: 1.0,
        ),
        Expanded(
          child: Center(
            child: Math.tex(
              expression,
              mathStyle: MathStyle.textCramped,
              settings: TexParserSettings(
                strict: Strict.ignore,
                displayMode: true,
              ),
            ),
          ),
        )
      ],
    );
  }
}