问题标签 [mdxjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
668 浏览

reactjs - 如何在 Docusaurus v2 中嵌入全局 React 组件?

我看到可以使用 MDX 嵌入 React 组件:
https ://v2.docusaurus.io/docs/markdown-features/#embedding-react-components-with-mdx

但是,此方法适用于特定页面。如何使它适用于文档中的所有降价文件?我正在尝试添加与上面链接中类似的组件来更改某些内联文本的样式。我试图编辑 src/pages/index.js 但没有用。

0 投票
1 回答
273 浏览

reactjs - 在 MDX 文件中为 JSX 启用自动(自)关闭标签

我正在将网站移至 Gatsby。对于文章帖子,原始来源被编写为 HTML 文件。我想利用 MDX 来处理这些内容。然而,将大量文章从 HTML 复制粘贴到 MDX 会产生很大的痛苦。特别是,MDX 解析器通常会抱怨Expected corresponding JSX closing tag for ... 我想知道 prettier 或任何格式化程序是否可以帮助为 MDX 文件自动添加自闭合标签。

例子:

预期的格式化输出

0 投票
1 回答
457 浏览

markdown - 如何在 mdx 文件中包含 markdown 文件 (md)

平原.md

一些.mdx

结果文件

如何用mdxjs做这样的事情?

0 投票
2 回答
2434 浏览

storybook - 在 Storybook 中隐藏文档选项卡

我想使用 Typescript 和 MDX 创建故事,因此我有main.js

但是我不想在“Canvas”旁边有“Docs”标签。如何删除它?没有'@storybook/addon-docs'MDX 故事不会显示。

0 投票
1 回答
107 浏览

storybook - 在故事书 MDX 文件中,如何输入文字标记

我使用 MDX 创建了一个故事。我想展示我的内部风格的按钮。

故事包含以下内容:

渲染时,故事书显示

结果,我的按钮没有显示正确的 css。

如何防止 Storybook MDX 更改标记?

0 投票
1 回答
525 浏览

javascript - 如何将外部(远程)Markdown 文件加载到 Docusaurus 中?

似乎是一个非常基本的问题,但我在 SO、docs 或 GH 问题中找不到答案:

我们正在将现有的文档站点转移到 Docusaurus V2。我们的许多.md文件存储在不同的 GH 存储库(=不同的 URL)中,我们希望将它们链接并加载到 Docusaurus 中。在我们当前的设置中,我们使用 Axios GET 请求到每个md远程 URL 并使用ReactMarkdown它来加载其内容。

在 Docusaurus 中,有没有办法md通过简单地提供他们的 URL 来加载远程?

0 投票
3 回答
1683 浏览

javascript - 在 Next JS 中使用 `next-mdx-remote` 时,如何在`public/` 文件夹之外的`.mdx` 文件中使用图像?

我正在使用next-mdx-remote制作博客,并希望在.mdx文件夹外的文件中使用图像public/

这是我的博客项目的完整代码→ https://github.com/deadcoder0904/blog-mdx-remote

我有以下文件夹结构:

我的所有内容都在posts/文件夹中。

我有 2 个文件夹:blog/&tutorials/

每个帖子都在它们自己的文件夹中,blog/或者tutorials/每个文件夹都包含在该特定帖子中使用的图像。

例如,在hello-world文件夹中,有 1 张名为Rustin_Cohle.jpg.

我想在hello-world/index.mdx文件中使用这个图像,但我做不到。

我不能使用import,或者require因为它是next-mdx-remote.

我尝试使用下面使用的自定义组件并将Imageimg传递给它,hydrate但它也不起作用。

组件/Image.js

页面/博客/[slug].js

以下 MDX 文件使用上述Image组件作为通过hydrate.

你好世界/index.mdx

我什至尝试使用MDXProvider& 它也没有用。

页面/index.js

那我该如何使用图片呢?我希望它们仅位于特定帖子的文件夹中,例如hello-world博客仅在hello-world/文件夹中包含其图像。

0 投票
1 回答
1839 浏览

javascript - 在 Next JS 中使用来自 `@mdx-js/react` 的 `MDXProvider` 时,MDX 博客仅显示降价内容而不是渲染它

我正在使用MDXNext.js制作博客,但无法呈现 Markdown 内容。博客文章仅将降价内容显示为string.

这是我的完整源代码 → https://github.com/deadcoder0904/blog-mdx-next/

我有以下文件夹结构:

我的所有内容都在posts/文件夹中。

我有 2 个文件夹:blog/&tutorials/

每个帖子都在它们自己的文件夹中blog/tutorials/。看起来像:

博客档案

我想posts/blog/hello-world/index.mdx在位置呈现我的帖子,blog/hello-world所以我制作了blog/[slug].js文件。

其内容如下:

页面/博客/[slug].js

重要的部分是:

我认为这会呈现降价内容,但它只将降价内容显示为string.

您可以通过单击任何博客文章在https://codesandbox.io/s/github/deadcoder0904/blog-mdx-next?file=/pages/blog/%5Bslug%5D.js检查输出。

Hello World当我点击帖子时,它显示以下内容:

你好世界

我如何实际呈现内容?

我查看了其他 Github 存储库,例如Tailwind CSS 博客,它对他们来说效果很好,但我不确定它是如何工作的 :(

我确实知道我必须将source道具转换为 inBlogmdxin,getStaticProps但我也没有看到Tailwind 这样做。

0 投票
2 回答
2305 浏览

reactjs - 如何在 Storybook 中制作 stories.mdx 文件?

由于降价语法,我想在 Storybook 中的组件旁边添加文档。我已遵循 Storybook 的指南,但在启动应用程序时,我在终端中收到以下错误:

致命错误:CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足。(...) 命令因信号“SIGABRT”而失败。

这是我的故事书配置:

我的组件:

还有故事(stories.mdx):

如何解决这个问题?

0 投票
1 回答
106 浏览

javascript - 在 Next JS 中使用 Webpack 创建将 URL 路径映射到组件的加载器

我想在 Next.js 中创建一个加载器,它使用 Webpack underhood,它的next.config.js配置文件将为Blog.js路由/blogTutorial.js路由加载/tutorial

MDX 数据在pages/目录中。pages/包含blog/&/tutorial有自己的.mdx文件。

我的文件夹结构如下:

我的next.config.js文件看起来像:

我正在使用test: /blog/&test: /tutorial/但它不是那样工作的。我不确定如何使它工作?

tailwind我已经在 Github的分支上上传了我的完整代码→ https://github.com/deadcoder0904/blog-mdx-next/tree/tailwind,它改编自https://github.com/tailwindlabs/blog.tailwindcss。 com

我如何使它blog/使用Blog.js&tutorial/使用Tutorial.js