{"id":13788367,"url":"https://github.com/goodproblems/remark-mdx-math-enhanced","last_synced_at":"2025-05-12T02:33:13.165Z","repository":{"id":40480599,"uuid":"484895429","full_name":"goodproblems/remark-mdx-math-enhanced","owner":"goodproblems","description":"Plugin to allow for math with expressions in MDX","archived":false,"fork":false,"pushed_at":"2023-01-08T16:10:24.000Z","size":521,"stargazers_count":15,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-18T02:37:23.327Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/goodproblems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-24T01:28:41.000Z","updated_at":"2024-11-13T12:00:29.000Z","dependencies_parsed_at":"2023-02-08T06:31:46.445Z","dependency_job_id":null,"html_url":"https://github.com/goodproblems/remark-mdx-math-enhanced","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goodproblems%2Fremark-mdx-math-enhanced","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goodproblems%2Fremark-mdx-math-enhanced/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goodproblems%2Fremark-mdx-math-enhanced/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goodproblems%2Fremark-mdx-math-enhanced/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goodproblems","download_url":"https://codeload.github.com/goodproblems/remark-mdx-math-enhanced/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253662789,"owners_count":21944131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T21:00:44.266Z","updated_at":"2025-05-12T02:33:12.843Z","avatar_url":"https://github.com/goodproblems.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"# Remark MDX math enhanced\n\n\u003e An MDX plugin adding support for math environments with embedded JS expressions\n\n## What is this?\n\nThis package allows math environments in MDX documents to contain embedded JavaScript expressions analogous to [MDX expressions](https://mdxjs.com/docs/what-is-mdx/#expressions). These expressions have full access to props, exports, etc.\n\n## How it works\n\nMath nodes produced by [remark-math](https://github.com/remarkjs/remark-math/tree/main/packages/remark-math) are transformed into JSX element nodes at compile time and rendered at run time via a React component which your app is expected to provide (default is `Math` but is configurable)\n\n---\n\n**🚨 Important:** This plugin is quite new and currently still in beta, it's possible the API and/or approach may change so **use at your own risk**.\n\n---\n\n\n## Notes\n\n- This plugin expects you to define your own `Math` component which will handle rendering. For an example implementation of a `\u003cMath/\u003e` component using [Katex](http://katex.org) see [examples/Math.js](https://github.com/goodproblems/remark-mdx-math-enhanced/tree/master/examples/Math.js)\n\n- Rendering math at runtime instead of at compile time means that client-side JS is required, and that more browser processing power is required for rendering. Accordingly, this plugin should only be used in cases where dynamic math (i.e. math with JS expressions inside) is actually required\n\n## Install\n\nInstall with npm `npm install remark-mdx-math-enhanced`\n\n## Use \n\nSay we have the following .mdx file where we want to render some math with a generated value of pi times a prop value\n\n```mdx\nexport const pi = Math.PI\n\n$\\js{props.N}\\pi = \\js{props.N * pi}$\n\n$$\n\\js{props.N}\\pi = \\js{props.N * pi}\n$$\n```\n\nAnd an MDX setup something like this\n\n```js\nimport { readFileSync } from 'fs'\n\nimport remarkMath from 'remark-math'\nimport remarkMdxEnhanced from 'remark-mdx-math-enhanced'\nimport { compileSync } from '@mdx-js/mdx'\n\nconst { value } = compileSync(readFileSync('example.mdx'), {\n  remarkPlugins: [remarkMath, [remarkMdxEnhanced, { component: 'Math' }]]\n})\n\nconsole.log(value)\n```\n\nWill result in something like\n\n```jsx\nexport const pi = Math.PI\n\nexport default function MDXContent(props) {\n  return \u003c\u003e\n    \u003cMath\u003e{String.raw`${props.N}\\pi = ${props.N * pi}`}\u003c/Math\u003e\n    \u003cMath display\u003e{String.raw`${props.N}\\pi = ${props.N * pi}`}\u003c/Math\u003e\n  \u003c/\u003e\n}\n```\n\nNote how `\\js{...}` have been replaced by `${...}` which are valid [string interpolation placeholders](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#string_interpolation).\n\n\n## API\n\nThe default export is `remarkMdxMathEnhanced`.\n\n### `unified().use(remarkMdx).use(remarkMath).use(remarkMdxMathEnhanced[, options])`\n\nPlugin to transform math nodes to JSX element nodes which render math at run time\n\n##### `options`\n\nConfiguration (optional).\n\n###### `options.component`\n\nName of react component which will be used to render math, default is 'Math'\n\n###### `options.startDelimiter`\n\nStart delimiter of JS expressions, default is `\\js{`\n\n###### `options.endDelimiter`\n\nStart delimiter of JS expressions, default is `}`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoodproblems%2Fremark-mdx-math-enhanced","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoodproblems%2Fremark-mdx-math-enhanced","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoodproblems%2Fremark-mdx-math-enhanced/lists"}