问题标签 [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.
reactjs - 如何在 Docusaurus v2 中嵌入全局 React 组件?
我看到可以使用 MDX 嵌入 React 组件:
https ://v2.docusaurus.io/docs/markdown-features/#embedding-react-components-with-mdx
但是,此方法适用于特定页面。如何使它适用于文档中的所有降价文件?我正在尝试添加与上面链接中类似的组件来更改某些内联文本的样式。我试图编辑 src/pages/index.js 但没有用。
reactjs - 在 MDX 文件中为 JSX 启用自动(自)关闭标签
我正在将网站移至 Gatsby。对于文章帖子,原始来源被编写为 HTML 文件。我想利用 MDX 来处理这些内容。然而,将大量文章从 HTML 复制粘贴到 MDX 会产生很大的痛苦。特别是,MDX 解析器通常会抱怨Expected corresponding JSX closing tag for ...
我想知道 prettier 或任何格式化程序是否可以帮助为 MDX 文件自动添加自闭合标签。
例子:
预期的格式化输出
storybook - 在 Storybook 中隐藏文档选项卡
我想使用 Typescript 和 MDX 创建故事,因此我有main.js
:
但是我不想在“Canvas”旁边有“Docs”标签。如何删除它?没有'@storybook/addon-docs'
MDX 故事不会显示。
storybook - 在故事书 MDX 文件中,如何输入文字标记
我使用 MDX 创建了一个故事。我想展示我的内部风格的按钮。
故事包含以下内容:
渲染时,故事书显示
结果,我的按钮没有显示正确的 css。
如何防止 Storybook MDX 更改标记?
javascript - 如何将外部(远程)Markdown 文件加载到 Docusaurus 中?
似乎是一个非常基本的问题,但我在 SO、docs 或 GH 问题中找不到答案:
我们正在将现有的文档站点转移到 Docusaurus V2。我们的许多.md
文件存储在不同的 GH 存储库(=不同的 URL)中,我们希望将它们链接并加载到 Docusaurus 中。在我们当前的设置中,我们使用 Axios GET 请求到每个md
远程 URL 并使用ReactMarkdown
它来加载其内容。
在 Docusaurus 中,有没有办法md
通过简单地提供他们的 URL 来加载远程?
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
.
我尝试使用下面使用的自定义组件并将Image
其img
传递给它,hydrate
但它也不起作用。
组件/Image.js
页面/博客/[slug].js
以下 MDX 文件使用上述Image
组件作为通过hydrate
.
你好世界/index.mdx
我什至尝试使用MDXProvider
& 它也没有用。
页面/index.js
那我该如何使用图片呢?我希望它们仅位于特定帖子的文件夹中,例如hello-world
博客仅在hello-world/
文件夹中包含其图像。
javascript - 在 Next JS 中使用来自 `@mdx-js/react` 的 `MDXProvider` 时,MDX 博客仅显示降价内容而不是渲染它
我正在使用MDX和Next.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
道具转换为 inBlog
或mdx
in,getStaticProps
但我也没有看到Tailwind 这样做。
reactjs - 如何在 Storybook 中制作 stories.mdx 文件?
由于降价语法,我想在 Storybook 中的组件旁边添加文档。我已遵循 Storybook 的指南,但在启动应用程序时,我在终端中收到以下错误:
致命错误:CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足。(...) 命令因信号“SIGABRT”而失败。
这是我的故事书配置:
我的组件:
还有故事(stories.mdx):
如何解决这个问题?
javascript - 在 Next JS 中使用 Webpack 创建将 URL 路径映射到组件的加载器
我想在 Next.js 中创建一个加载器,它使用 Webpack underhood,它的next.config.js
配置文件将为Blog.js
路由/blog
和Tutorial.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
?