Closed jeepers3327 closed 2 years ago
import React from "react";
import { createRoot } from "react-dom/client";
import MarkdownPreview from "@uiw/react-markdown-preview";
import rehypeRewrite from "rehype-rewrite";
const source = `## Markdown Preview
> todo: React component preview markdown text.
## Title
`;
const rehypePlugins = [
rehypeRewrite,
{
rewrite: (node, index, parent) => {
if (
node.tagName === "a" &&
parent &&
/^h(1|2|3|4|5|6)/.test(parent.tagName)
) {
parent.children = [parent.children[1]];
}
}
}
];
function Demo() {
return (
<div data-color-mode="light">
<MarkdownPreview rehypePlugins={[rehypePlugins]} source={source} />
</div>
);
}
Is there a TS version of it? Having a hard time using it with TS.
What I did is just mark those arguments of rewrite as any.
const rehypePlugins = [
rehypeRewrite,
{
rewrite: (node: any, index: any, parent: any) => {
if (
node.tagName === "a" &&
parent &&
/^h(1|2|3|4|5|6)/.test(parent.tagName)
) {
parent.children = [parent.children[1]];
}
}
}
];
<MarkdownRenderer
rehypePlugins={[rehypePlugins]}
source={str}
/>
@jeepers3327
import rehypeRewrite, { RehypeRewriteOptions } from "rehype-rewrite";
import { PluggableList } from 'unified'
const rehypePlugins: PluggableList = [
[rehypeRewrite, {
rewrite: (node, index, parent) => {
if (
node.type === 'element' &&
node.tagName === "a" &&
parent &&
parent.type === 'element' &&
/^h(1|2|3|4|5|6)/.test(parent.tagName)
) {
parent.children = [parent.children[1]];
}
}
} as RehypeRewriteOptions]
];
<MarkdownRenderer
rehypePlugins={[rehypePlugins]}
source={str}
/>
Closing this one. Thank you
Is there a property to render markdown as plain elements with the insertion of github link anchor heading links as shown below
The thing that I'm referring to is the link icon near the text content of the markdown previewer.
I have a working solution already but just want to ask the dev for insight or comment on this.
Thank you.