CODEWITHSUNDEEP
reactjsmdxdocusaurus
Sunil Sapkota
Sunil Sapkota

Reputation: 1220

x_1 is not defined in Docusaurus

In my file KNN example.mdx i have following mdx format text i have not used any react code here.

1. **Distance**:  
   For the query point \((x, y) = (0, 0)\), calculate the Euclidean distance to 5 nearest points:
   \[
   d = \sqrt{(x_1 - x)^2 + (y_1 - y)^2}
   \]

and im using this dependency

  "dependencies": {
    "@docusaurus/core": "3.1.1",
    "@docusaurus/plugin-pwa": "^3.1.1",
    "@docusaurus/preset-classic": "3.1.1",
    "@docusaurus/theme-search-algolia": "3.1.1",
    "@matejmazur/react-katex": "^3.1.3",
    "@mdx-js/react": "^3.0.0",
    "clsx": "^2.0.0",
    "katex": "^0.16.21",
    "prism-react-renderer": "^2.3.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "rehype-katex": "^7.0.1",
    "remark-math": "^6.0.0"
  },

i got following error

Uncaught runtime errors:
ERROR
x_1 is not defined
_createMdxContent@webpack-internal:///./docs/machine:70:215
MDXContent@webpack-internal:///./docs/machine:85:8
renderWithHooks@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16305:27
mountIndeterminateComponent@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20069:13
beginWork@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21582:16
callCallback@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4164:14
invokeGuardedCallbackDev@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4213:16
invokeGuardedCallback@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4277:31
beginWork$1@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27446:28
performUnitOfWork@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26555:12
workLoopSync@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26461:22
renderRootSync@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26429:7
performConcurrentWorkOnRoot@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25733:74
workLoop@webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:266:42
flushWork@webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:239:14
performWorkUntilDeadline@webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:533:21

I have tried follwoing code and it works fine

### Mathematical Explanation to Students:
1. **Distance**:  
   For the query point \((x, y) = (0, 0)\), calculate the Euclidean distance to 5 nearest points:
$$
   d = \sqrt{(x_1 - x)^2 + (y_1 - y)^2}
$$

but i want to add support of $$ and \[ both how to achieve this

Upvotes: 1

Views: 25

Answers (1)

Dakshika
Dakshika

Reputation: 1734

Ensure KaTeX is enabled in your docusaurus.config.js

Open docusaurus.config.js and modify the presets section:

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [require('remark-math')],
          rehypePlugins: [require('rehype-katex')],
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      },
    ],
  ],
};

Ensure CSS for KaTeX is included

In src/css/custom.css, add:

@import 'katex/dist/katex.min.css';

Upvotes: 1

Related Questions