标签: mdxjs

我有点困惑。我认为remark是一个markdown处理器，rehype是一个html处理器。因此，remark 需要一些 markdown，对其进行转换，然后返回一些 markdown。Rehype 获取一些 html，对其进行转换，然后返回一些 html - 这是正确的吗？

例如：我遇到了软件包remark-slug和rehype-slug，它们似乎做基本上相同的事情\xe2\x80\x94 两者之间有什么区别？

对于新的应用程序目录，所有路由目录都必须有一个page.js,page.jsx或一个page.tsx公开可见的文件（例如：mywebsite.com/about需要一个文件app/about/page.js）。但是当我尝试使用 MDX 文件app/about/page.mdx并使用 nextMDX 时@next/mdx，我得到了 404 未找到。

这是我的next.config.mjs配置文件：

import nextMDX from "@next/mdx";
import remarkFrontmatter from "remark-frontmatter";
import rehypeHighlight from "rehype-highlight";
 
const withMDX = nextMDX({
  extension: /\.(md|mdx)$/,
  options: {
    remarkPlugins: [remarkFrontmatter],
    rehypePlugins: [rehypeHighlight],
  },
});

const nextConfig = {
  experimental: {
    appDir: true,
  }
};

export default withMDX({
  ...nextConfig,
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
});

感谢您的任何回复

我尝试在选项卡内添加降价代码，如文档所述。

名称文件名具有.mdx扩展名。

这是它的内容：

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs
    defaultValue="javascript"
    values={[
        {label: 'Javascript', value: 'javascript'},
        {label: 'Other', value: 'other'},
    ]}>
    <TabItem value="javascript">

```jsx
Formated code here
```

    </TabItem>
    <TabItem value="other">This is an orange </TabItem>
</Tabs>

但我收到这个错误：

SyntaxError: /home/angelcc/projects/simplex/osm4scala/website/docs/example.mdx: Expected corresponding JSX closing tag for <TabItem> (21:0)

  19 | <TabItem value="other">This is an orange </TabItem>
  20 | `}</code></pre>
> 21 | </Tabs>
     | ^
  22 |     </MDXLayout>
  23 |   )
  24 | };

不知道我做错了什么。

版本：

"@docusaurus/core": …

希望你们都玩得开心。我正在开发一个简单的 NextJs 应用程序，我想在其中包含多个子域。我正在 vercel 上部署应用程序。

我的应用程序所做的是它有一个简单的文本区域，您可以在其中编写 MDX，单击“发布”按钮，它将将该 MDX 保存到 firebase firestore 中。文本区域下方显示了之前发布的所有页面的列表。

应用程序呈现所有页面的列表，例如随机生成的页面名称作为子域，而实际域稍后出现，如下所示。

a-mdx-page.mydomain.app

当我打开该 URL 时，它将从 firestore 获取页面 MDX 并使用 next-mdx-remote 包序列化和渲染 MDX。使用 next-mdx-remote 包的原因是我们可以在 MDX 中添加 React 组件，并且它可以像普通 React 组件一样渲染。我已经有一个自定义域，因为在 vercel 免费部署中，您无法在免费子域之上拥有子域。

在 localhost 上一切正常，一切都正常，但问题是当我在 Vercel 上部署代码并导航到子域时，它在网站上显示 ERROR 500，并在日志中显示以下错误。

[GET] /   21:21:03:30

2021-10-24T16:21:04.018Z    8e52d5da-ff1f-4840-a09b-199233834a5d    ERROR   Error: The package "esbuild-linux-64" could not be found, and is needed by esbuild.
If you are installing esbuild with npm, make sure that you don't specify the
"--no-optional" flag. The "optionalDependencies" package.json feature …

我正在开发一个使用 React 组件的 MDX 页面项目。当我在组件内添加文本时，我希望生成 HTML（就像组件外部的内容一样）。但生成的页面在组件内只有文本，没有 HTML。

这是我的代码：

组件js：

<Container>
    {props.children}
</Container>

MDX 页面：

<Component>
     **Generated HTML**
</Component>

生成的页面：

<div>
     **Generated HTML**
</div>

预期行为：

<div>
     <p><strong>Generated HTML</strong></p>
</div>

我怎样才能解决这个问题？

谢谢！

我有一个使用 Gatsby （带有gatsby-plugin-image）的网站，我正在尝试重构为 Typescript。这是我第一次接触 ts

我有一个布局页面，它使用页面查询来提取 Mdx 数据，但是我缺少一些类型，并且想知道是否有人可以为我指出正确的方向。

我正在努力寻找应该导入和使用的类型：

childImageSharp: {fixed:???}
MdxQuery = {body: ???}`

在处理图像的旧gatsby-image方法中，它使用 的类型，FixedObject但这不再有效。

对于这些缺失的类型，有人能为我指出正确的方向吗？

type Frontmatter = {
  title: string;
  titlestrap: string | null;
  category: string;
  slug: string;
  metaDescription: string | null;
  author?: string | null;
  featuredImage: {
    childImageSharp: {
      fixed: any; // what here?
      gatsbyImageData: IGatsbyImageData;
    };
  };
};

type MdxQuery = {
  id: string;
  body: any; // what here?
  frontmatter: Frontmatter;
  excerpt: string;
};

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

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

const HighlightGreen = (children) => (
  <span
    style={{
      backgroundColor: '#00a400', // green,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

只需按照以下说明进行操作：https ://mdxjs.com/docs/getting-started/#create-react-app-cra

我做了以下事情：

$ npx create-react-app react-app
$ cd react-app
$ npm install @mdx-js/loader

然后按照入门指南创建文件，src/content.mdx如下所示：

# Hello, world!

This is **markdown** with <span style={{color: "red"}}>JSX</span>: MDX!

然后修改src/App.js如下：

/* eslint-disable import/no-webpack-loader-syntax */
import Content from '!@mdx-js/loader!./content.mdx'

export default function App() {
  return <Content />
}

当我运行该应用程序时，我在控制台上看到以下错误：

react-dom.development.js:20085 
        
       The above error occurred in the </static/media/content.152fde8da01171ae4224.mdx> component:

    at /static/media/content.152fde8da01171ae4224.mdx
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn …

我正在使用next-mdx-remote创建一个博客，并希望在.mdx文件public/夹外的文件中使用图像。

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

我有以下文件夹结构：

.
??? package-lock.json
??? package.json
??? pages
?   ??? _app.js
?   ??? blog
?   ?   ??? [slug].js
?   ??? dark.css
?   ??? index.js
?   ??? new.css
??? posts
?   ??? blog
?   ?   ??? hello-world
?   ?   ?   ??? Rustin_Cohle.jpg
?   ?   ?   ??? index.mdx
?   ?   ??? shit-world
?   ?       ??? index.mdx
?   ??? tutorials
?       ??? console-log-in-javascript
?           ??? index.mdx
??? utils
    ??? mdxUtils.js

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

我有 …

当我从文件中导入某些内容.js或文件.ts中的文件时.mdx，我希望看到 VScode 的自动完成建议。

另外，当我在文件内定义变量时.mdx，我正在等待 VScode 会建议我该变量的名称。

// for example
const myVar = 'myVarValue';

<Meta title={myV /* In this moment VScode should show me suggestion */} />

问题：

• 有可能吗？
• 如果不是，那么为什么以及何时可以实现？
• 如果是，那么我应该如何处理我的 VScode 才能使其按我的预期工作？