Docusaurus: Math Jax integration

[drnazmulalam]

📚 Documentation

(Hi, I am writing mathematical equations using Latex, but not rendered properly. I would like to know the way I can write math in the markdown blog or page files and will be displayed on my web pages. )

Have you read the Contributing Guidelines on issues?

(yes)

[smorimoto]

@drnazmulalam

export const Math = ({ code }) => (
  <img
    src={`https://math.now.sh?from=${encodeURIComponent(code)}`}
    style={{ height: "100%", verticalAlign: "middle" }}
  />
);

<Math code="\LaTeX" />

[endiliey]

You’ll have to find a markdown plugin for this. This is out of scope of docusaurus imo.

[endiliey]

If you are on v1, you can use katex https://github.com/Khan/KaTeX

They have remarkable-katex plugin which lets u write latex on markdown

[braco]

@endiliey and how about for v2?

[yangshun]

In v2 you can add your own plugins to do this, so definitely not in v2.

[Ir1d]

Hi @yangshun , (comment updated)
I managed to work with remark-math + rehype-katex. But I didn't find a solution with mathjax. Any hint on this?

[trickster]

@Ir1d Could you please highlight where you managed to keep those plugin list in v2 docusaurus?

[Ir1d]

@sivakon https://github.com/Ir1d/oi-wiki-ng/blob/docusaurus/docusaurus.config.js#L84

[trickster]

@Ir1d I get this error

./docs/doc2.md
Error: Expected usable value, not `/oi-wiki-ng/node_modules/remark-math/index.js`
    at Array.forEach (<anonymous>)
 @ ./.docusaurus/registry.js 1:3120-3161 1:3015-3098
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js./docs/doc3.md
Error: Expected usable value, not `/oi-wiki-ng/node_modules/remark-math/index.js`
    at Array.forEach (<anonymous>)
 @ ./.docusaurus/registry.js 1:3301-3342 1:3198-3279
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js./docs/mdx.md
Error: Expected usable value, not `/oi-wiki-ng/node_modules/remark-math/index.js`
    at Array.forEach (<anonymous>)
 @ ./.docusaurus/registry.js 1:3478-3518 1:3378-3457
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js./docs/xd/doc1.md
Error: Expected usable value, not `/oi-wiki-ng/node_modules/remark-math/index.js`
    at Array.forEach (<anonymous>)
 @ ./.docusaurus/registry.js 1:3672-3716 1:3559-3647
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js

[Ir1d]

@sivakon Im not developing that branch any more. And I'm not familiar with this error msg

[hhk7734]

@sivakon
solved it by writing the code below.

const remarkMath = require("remark-math");
module.exports = {
...
  presets: [
    [
      "@docusaurus/preset-classic",
      {
        docs: {
          remarkPlugins: [
            remarkMath,
          ],
...

[geekodour]

@hhk7734 where did you put this and which version did you try this on?

[hhk7734]

@geekodour

docusaurus.config.js
https://github.com/hhk7734/wiki.loliot.net/blob/8c7e503e930a47a0f470c880f1ac77e8420b01d3/docusaurus.config.js#L111-L116

package.json
https://github.com/hhk7734/wiki.loliot.net/blob/8c7e503e930a47a0f470c880f1ac77e8420b01d3/package.json#L14-L16

example page
https://wiki.loliot.net/docs/etc/project/ahrs/ahrs-quaternions-rotations

[geekodour]

thanks. got it working :)