MDX v3 LaTeX: Escaping Curly Braces

[anaclumos]

Problem - Math equations

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$

Could not parse expression with acorn: Expecting Unicode escape sequence \uXXXX

Solution: again, escape \{ ?

$$
I = \int_0^\{2\pi} \sin(x)\,dx
$$

Originally posted by @slorber in https://github.com/facebook/docusaurus/issues/8288#issuecomment-1303331381

Is there no way to disable this behavior? Using { } is very slow and breaks a lot of documents.

[Josh-Cena]

Hi, please upgrade your remark-math and rehype-katex to the latest versions. Docusaurus website itself displays math with absolutely no problems: https://github.com/facebook/docusaurus/blob/main/website/docs/guides/markdown-features/markdown-features-math-equations.mdx

[kryptoniancode]

Can anyone tell me is this correct way to add equation? What am I missing? Thanks I used everything from docs but still not working. I have used new project and followed the documentation.

diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx
index c04ebe3..331cd90 100644
--- a/blog/2021-08-01-mdx-blog-post.mdx
+++ b/blog/2021-08-01-mdx-blog-post.mdx
@@ -5,8 +5,17 @@ authors: [slorber]
 tags: [docusaurus]
 ---

+import MathText from '@site/src/components/MathText'
+
 Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).

+<MathText>
+
+Let $f\colon[a,b] \to \R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x)=
+\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.
+
+</MathText>
+
 :::tip

 Use the power of React to create interactive blog posts.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 4058eac..795618e 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -2,6 +2,9 @@ import {themes as prismThemes} from 'prism-react-renderer';
 import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';

+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+
 const config: Config = {
   title: 'My Site',
   tagline: 'Dinosaurs are cool',
@@ -29,11 +32,23 @@ const config: Config = {
     locales: ['en'],
   },

+  stylesheets: [
+    {
+      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
+      type: 'text/css',
+      integrity:
+        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
+      crossorigin: 'anonymous',
+    },
+  ],
+
   presets: [
     [
       'classic',
       {
         docs: {
+          remarkPlugins: [remarkMath],
+          rehypePlugins: [rehypeKatex],
           sidebarPath: './sidebars.ts',
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
diff --git a/package.json b/package.json
index 9bca92d..10c2e27 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,9 @@
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "rehype-katex": "^7.0.0",
+    "remark-math": "^6.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.1",

ERROR
a is not defined
ReferenceError: a is not defined
    at _createMdxContent (webpack-internal:///./blog/2021-08-01-mdx-blog-post.mdx?truncated=true:100:120)
    at MDXContent (webpack-internal:///./blog/2021-08-01-mdx-blog-post.mdx?truncated=true:128:8)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16305:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20069:13)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21582:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4277:31)
    at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27446:7)
    at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26555:12)

[slorber]

You have to escape {a} with /

Your content is not valid MDX, try to run it on the MDX playground and see. It's not a Docusaurus issue, it's how MDX works.

V3 blog post presents an option to turn on a common mark mode if you don't like this behavior

[Josh-Cena]

@slorber The same code on our docs works without escaping, and that page doesn't seem to be in commonmark mode. I wonder how it works

[kryptoniancode]

It is not working. For this simpe equation, getting not defined a, Could not parse expression with acorn, errors, fixed the error by escaping but not rendering.

@slorber The same code on our docs works without escaping, and that page doesn't seem to be in commonmark mode. I wonder how it works

How it is working? I tried to explore the code but it seems it is same.

[kryptoniancode]

Okay, it seems that, it only works in docs not in blog, here diff for working in docs.

Result in docs

Result in blog

diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx
index c04ebe3..afb9dd7 100644
--- a/blog/2021-08-01-mdx-blog-post.mdx
+++ b/blog/2021-08-01-mdx-blog-post.mdx
@@ -5,8 +5,18 @@ authors: [slorber]
 tags: [docusaurus]
 ---

+import BrowserWindow from '@site/src/components/BrowserWindow';
+
 Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).

+
+<BrowserWindow>
+
+$$\int_{a}^{b}$$
+
+</BrowserWindow>
+
+
 :::tip

 Use the power of React to create interactive blog posts.
diff --git a/docs/intro.md b/docs/intro.md
index 45e8604..51cbd0e 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -2,6 +2,8 @@
 sidebar_position: 1
 ---

+
+
 # Tutorial Intro

 Let's discover **Docusaurus in less than 5 minutes**.
diff --git a/docs/tutorial-basics/markdown-features.mdx b/docs/tutorial-basics/markdown-features.mdx
index 0337f34..77361d5 100644
--- a/docs/tutorial-basics/markdown-features.mdx
+++ b/docs/tutorial-basics/markdown-features.mdx
@@ -4,6 +4,16 @@ sidebar_position: 4

 # Markdown Features

+import BrowserWindow from '@site/src/components/BrowserWindow';
+
+<BrowserWindow>
+
+
+$$\int_{a}^{b}$$
+
+</BrowserWindow>
+
+
 Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.

 ## Front Matter
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 4058eac..a362da8 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -2,6 +2,9 @@ import {themes as prismThemes} from 'prism-react-renderer';
 import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';

+const math  = require('remark-math');
+const katex = require('rehype-katex');
+
 const config: Config = {
   title: 'My Site',
   tagline: 'Dinosaurs are cool',
@@ -29,6 +32,16 @@ const config: Config = {
     locales: ['en'],
   },

+  stylesheets: [
+    {
+      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
+      type: 'text/css',
+      integrity:
+        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
+      crossorigin: 'anonymous',
+    },
+  ],
+
   presets: [
     [
       'classic',
@@ -39,6 +52,8 @@ const config: Config = {
           // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          remarkPlugins: [math],
+          rehypePlugins: [katex],
         },
         blog: {
           showReadingTime: true,
@@ -46,6 +61,8 @@ const config: Config = {
           // Remove this to remove the "edit this page" links.
           editUrl:
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          remarkPlugins: [math],
+          rehypePlugins: [katex],
         },
         theme: {
           customCss: './src/css/custom.css',
diff --git a/package.json b/package.json
index 9bca92d..10c2e27 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,9 @@
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "rehype-katex": "^7.0.0",
+    "remark-math": "^6.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.1",

[slorber]

Please share a docusaurus.new runnable repro showing the problem

[kryptoniancode]

It seems working, may be latex text I am using have issues. Thanks for looking into this. The issue can be closed now.