Comments (9)
<MDEditor.Markdown source={value} renderers={renderers} />
以相同的方式支持。如果你只想使用 预览 Markdown,可以使用 @uiw/react-markdown-preview
from react-md-editor.
code sandbox 中Katex预览的示例代码好像又不行了,现在是白屏,不会渲染任何内容
from react-md-editor.
@icimence 你可以把示例拷贝下去运行,我这边突然无法运行,被和谐了 编辑器打不开,明天到公司看能不能打开。
from react-md-editor.
自己的本地项目使用成功了,感谢
from react-md-editor.
试了下KaTeX在review模式里还是不能渲染,是使用方式不对吗
const mdKaTeX = This is to display the \
in one line
```KaTeX
c = \pm\sqrt{a^2 + b^2}
```
```KaTeX
\f\relax{x} = \int_{-\infty}^\infty
\f\hat\xi\,e^{2 \pi i \xi x}
\,d\xi
```
`;
<MDEditor.Markdown source={mdKaTeX} />
from react-md-editor.
@pcxxiaoxiao https://codesandbox.io/embed/support-custom-katex-preview-106-1no4c?fontsize=14&hidenavigation=1&theme=dark
import React from "react";
import MDEditor from "@uiw/react-md-editor";
import katex from "katex";
import "katex/dist/katex.css";
const mdKaTeX = `This is to display the
\`$$c = \\pm\\sqrt{a^2 + b^2}$$\`
in one line
\`\`\`KaTeX
c = \\pm\\sqrt{a^2 + b^2}
\`\`\`
`;
export default function App() {
return (
<div className="container">
<MDEditor.Markdown
source={mdKaTeX}
components={{
code: ({ inline, children, className, ...props }) => {
const txt = children[0] || "";
if (inline) {
if (typeof txt === "string" && /^\$\$(.*)\$\$/.test(txt)) {
const html = katex.renderToString(
txt.replace(/^\$\$(.*)\$\$/, "$1"),
{
throwOnError: false
}
);
return <code dangerouslySetInnerHTML={{ __html: html }} />;
}
return <code>{txt}</code>;
}
if (
typeof txt === "string" &&
typeof className === "string" &&
/^language-katex/.test(className.toLocaleLowerCase())
) {
const html = katex.renderToString(txt, {
throwOnError: false
});
console.log("props", txt, className, props);
return <code dangerouslySetInnerHTML={{ __html: html }} />;
}
return <code className={String(className)}>{txt}</code>;
}
}}
/>
</div>
);
}
from react-md-editor.
可以了,感谢!!!
from react-md-editor.
@jaywcjlove it doesnt work for inline-katex, what to do?
from react-md-editor.
@piush-terminalwitchcraft I updated the example, the v4 version dependency package api has changed
from react-md-editor.
Related Issues (20)
- Imcompatible types Preact - NOT found bundle production HOT 1
- HTML Textbox input in preview HOT 5
- Markdown content from Preview HOT 7
- tpye error on `onChange` HOT 1
- Can't resolve 'devlop' for ./node_modules/hast-util-from-html/lib/index.js on version 4.0.1 HOT 3
- Issue on long text HOT 6
- Using `prose` from `tailwind/typography` HOT 5
- Module '"@uiw/react-markdown-preview/nohighlight"' has no exported member 'MarkdownPreviewProps' HOT 2
- 设置指定maxheight后, 全屏显示情况下,编辑区域并不是全屏高度 HOT 2
- Embedded base64 images are not working after update from 3.26.5 to 4.0.1 HOT 9
- Next.js problem while writing an article HOT 6
- ul li tag automatically created HOT 2
- toolbar只使用部分功能 HOT 3
- skipHtml not working
- Controlled toolbar? HOT 1
- Bug: When I push (option+ ₩) + (option + Enter) in MacOS, the cursor is broken HOT 1
- blinking cursor not showing inside md editor when placed in overflows modal HOT 1
- THIS IS NOT AN ISSUE: HACK to Paste Image directly from clipboard HOT 2
- The editor is stuck When value is large HOT 1
- 工具栏提示如何设置中文 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-md-editor.