astrojs - Write inline Math Formula using markdoc - Stack Overflow

admin管理员组

文章数量:1296332

I'm using a Blogster template and it doesn't support math formula like $A \ge B $ I'm wondering if there's a way to support that?

I found a solution here Is it possible to write math formula using markdoc? and it works for me, but all the formulas are in a new line, I would like to have inline formulas. Thanks!

Context: I updated the src/lib/markdoc/markdoc.config.ts as follow

import Markdoc from "@markdoc/markdoc";
import type { Config } from "@markdoc/markdoc";

const { nodes, Tag } = Markdoc;

export const config: Config = {
  tags: {
    details: {
      render: "details",
      children: nodes.document.children,
    },
    ...
    mathFormula: {
      attributes: {
        formula: { type: String },
      },
      render: "MathFormula",
    },
  },
  nodes: {
    heading: {
      render: "Heading",
      attributes: {
        level: { type: Number, required: true },
      },
      transform(node, config) {
        const attributes = node.transformAttributes(config);
        const children = node.transformChildren(config);
        return new Tag(this.render, { ...attributes }, children);
      },
    },
    fence: {
      render: "CodeBlock",
      attributes: {
        content: { type: String, render: false, required: true },
        language: { type: String, default: "typescript" },
        process: { type: Boolean, render: false, default: false },
      },
      transform(node, config) {
        const attributes = node.transformAttributes(config);
        const children = node.transformChildren(config);
        if (children.some((child) => typeof child !== "string")) {
          throw new Error(
            `unexpected non-string child of code block from ${
              node.location?.file ?? "(unknown file)"
            }:${node.location?.start.line ?? "(unknown line)"}`
          );
        }
        return new Tag(
          this.render,
          { ...attributes, content: children.join("") },
          []
        );
      },
    },
  },
};

And here is my src/components/Render.astro

---
import { MarkdocRenderer } from "astro-markdoc-renderer";
import type { Content } from "astro-markdoc-renderer";
...
import { MathFormula } from "./MathFormula";

type Props = {
  content: Content;
};

const { content } = Astro.props;

const components = {
  Heading: {
    Component: Heading,
    props: {},
  },
  ...
  MathFormula: {
    Component: MathFormula,
    props: {},
  },
};
---

<MarkdocRenderer content={content} components={components} />

The src/components/MathFormula.tsx I copied from the other question mentioned above

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

import Markdown from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'

export function MathFormula({ formula }: { formula: string }) {
  return (
    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
      {formula}
    </Markdown>
  )
}

Finally, this is what I put in the blog md file:

would boost from {% mathFormula formula="$O(1)$" /%} to O(N)  given  is the size of the RAM

Here is how it shows in blog, O(1) is in a new, separate line, but I would like it to be inline.

Display of the above line in blog

Big appreciation for anyone could help!

I'm using a Blogster template and it doesn't support math formula like $A \ge B $ I'm wondering if there's a way to support that?

I found a solution here Is it possible to write math formula using markdoc? and it works for me, but all the formulas are in a new line, I would like to have inline formulas. Thanks!

Context: I updated the src/lib/markdoc/markdoc.config.ts as follow

import Markdoc from "@markdoc/markdoc";
import type { Config } from "@markdoc/markdoc";

const { nodes, Tag } = Markdoc;

export const config: Config = {
  tags: {
    details: {
      render: "details",
      children: nodes.document.children,
    },
    ...
    mathFormula: {
      attributes: {
        formula: { type: String },
      },
      render: "MathFormula",
    },
  },
  nodes: {
    heading: {
      render: "Heading",
      attributes: {
        level: { type: Number, required: true },
      },
      transform(node, config) {
        const attributes = node.transformAttributes(config);
        const children = node.transformChildren(config);
        return new Tag(this.render, { ...attributes }, children);
      },
    },
    fence: {
      render: "CodeBlock",
      attributes: {
        content: { type: String, render: false, required: true },
        language: { type: String, default: "typescript" },
        process: { type: Boolean, render: false, default: false },
      },
      transform(node, config) {
        const attributes = node.transformAttributes(config);
        const children = node.transformChildren(config);
        if (children.some((child) => typeof child !== "string")) {
          throw new Error(
            `unexpected non-string child of code block from ${
              node.location?.file ?? "(unknown file)"
            }:${node.location?.start.line ?? "(unknown line)"}`
          );
        }
        return new Tag(
          this.render,
          { ...attributes, content: children.join("") },
          []
        );
      },
    },
  },
};

And here is my src/components/Render.astro

---
import { MarkdocRenderer } from "astro-markdoc-renderer";
import type { Content } from "astro-markdoc-renderer";
...
import { MathFormula } from "./MathFormula";

type Props = {
  content: Content;
};

const { content } = Astro.props;

const components = {
  Heading: {
    Component: Heading,
    props: {},
  },
  ...
  MathFormula: {
    Component: MathFormula,
    props: {},
  },
};
---

<MarkdocRenderer content={content} components={components} />

The src/components/MathFormula.tsx I copied from the other question mentioned above

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

import Markdown from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'

export function MathFormula({ formula }: { formula: string }) {
  return (
    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
      {formula}
    </Markdown>
  )
}

Finally, this is what I put in the blog md file:

would boost from {% mathFormula formula="$O(1)$" /%} to O(N)  given  is the size of the RAM

Here is how it shows in blog, O(1) is in a new, separate line, but I would like it to be inline.

Display of the above line in blog

Big appreciation for anyone could help!

• astrojs
• markdoc

Share Improve this question Follow edited Feb 12 at 18:06 GUA asked Feb 11 at 21:22 GUAGUA 111 bronze badge 1

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Feb 12 at 0:46

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Have you tried removing the $'s from your formula request in the .md file?

{% mathFormula formula="$O(1)$" /%} -> {% mathFormula formula="O(1)" /%}

One of the plugins you're using could automatically be formatting it with dollar signs (since it's being passed a formula directly, instead of text which may contain a formula somewhere), and since you're adding another set of $'s, the output would render as $${formula}$$. This is the katex notation for rendering as a block instead of inline. A singular set of $'s (${formula}$) is what katex reads as inline.

Hope this helps :)

本文标签： astrojsWrite inline Math Formula using markdocStack Overflow