Open rafiwardak2003 opened 6 days ago
I have one project which uses React + Astro:
import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import react from "@astrojs/react";
import robotsTxt from "astro-robots-txt";
import { rehypeGraphviz } from "@beoe/rehype-graphviz";
// https://astro.build/config
export default defineConfig({
site: "",
defaultLocale: "en",
redirects: {},
integrations: [
starlight({}),
react(),
robotsTxt(),
],
markdown: {
remarkPlugins: [
remarkMath,
],
rehypePlugins: [rehypeKatex, [rehypeGraphviz, { class: "timeline" }]],
},
});
In my case it works without issues. Can you provide reproducible example?
I forgot to mention I am using it with RemarkJS since it's a React component. It's dynamic markdown coming from the server.
So something similar to this works until you add the mermaid plugin, then it won't compile:
import rehypeSanitize from 'rehype-sanitize'
import rehypeStringify from 'rehype-stringify'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import {unified} from 'unified'
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeSanitize)
.use(rehypeStringify)
.process('# Hello, Neptune!')
console.log(String(file))
You mean you use remark on the client-side? Those plugins won't work on the client - they were built for the server.
rehype-mermaid probably will work.
I don't have a need for this functionality. PRs are welcome though
Okay, I will take a look at the other plugin or see if I can create a PR for this.
And yes, the component is rendered in the client side. The other remark plugins worked, just not this one. Thanks for the help.
I am using this in a React component in Astro, and it renders the diagram and everything works fine locally. But when building for production, vitejs throws the following error: