标签: mdxjs

我想知道是否有一种直接的方法可以在MDX JS页面（包含 JSX 的 Markdown）上创建允许的组件和阻止的组件。我想将 MDX 用于用户生成的内容，并意识到这样做存在很多安全问题；如有任何这样做的提示，我们将不胜感激。

我正在使用next-mdx-remote在 Next.js 项目中使用 MDX。

我一直在遵循 JetBrains WebStorm指南来构建这个，这里他们使用 bootstrap 作为 CSS，但我选择的 CSS 框架是 tailwind css。

问题是，当我安装 tailwind css 或任何其他基于 tailwind css（如flowbite ）的 CSS 时，MDX 页面会丢失其样式。

添加顺风后我期望得到什么

• tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

• _app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";
import Script from "next/script";
import Nav from "../components/Nav";

function MyApp({ Component, pageProps }: AppProps) {
  return ( …

我们使用MDXJS包在Markdown中编写内容并在其中使用React组件。

有没有办法在 MDX/Markdown 文件中使用i18next / react-i18next包？

简单的MD

# plain markdown

一些.mdx

# some mdx file

include './plain.md'

结果文件

# some mdx file

# plain markdown

如何使用mdxjs做这样的事情？

我试图使用 Github Flavored Markdown @next/mdx，但我似乎不知道如何在代码中使用插件。这是我所做的：

（我遵循 Next.js 文档：https://nextjs.org/docs/advanced-features/using-mdx）

初始化应用程序

1.我使用命令创建了 Next.js 应用程序

yarn create next-app next-gfm

2.然后我将所需的模块添加到

yarn add @next/mdx @mdx-js/loader

3.在pages/目录中，我删除了index.js自动生成的文件，并使用index.mdx文件替换了它。

next.config.js从这里开始，我对我的文件使用了以下配置。

yarn create next-app next-gfm

如果我们使用以下命令运行代码，yarn dev到目前为止一切正常。

添加 GFM

这是主要问题所在。现在，我使用以下命令安装了以下软件包以使用 Github Flavored Markdown：

yarn add remark-gfm rehype-stringify

导入语法错误？

next.config.js我尝试使用语法导入模块

yarn add @next/mdx @mdx-js/loader

但这给了我以下错误：

import remarkGfm from 'remark-gfm'
^^^^^^

SyntaxError: Cannot use import statement outside a module

使该项目成为module

我还尝试在我的顶部添加以下行package.json

const …

在不使用largePageDataBytes的情况下，在mdx文件的nextjs中处理“警告：页面“/blog/....”的数据为569 kB，超过了128 kB的阈值，这个数据量会降低性能”的最佳方法是什么在 next.config.js 中。我正在使用 mdx-bundler 来处理 mdx 文件。

我使用 next.config.js 中已附带的 tailwind 博客启动器启动了一个nextjswithBundleAnalyzer网站。

我现在正在尝试.mdx直接从页面获取文件。文档说我需要withMDX在我的 nextjs.config 文件中。怎样才能让两个人一起玩呢？我应该只保留其中之一还是另一个？我已经安装next-compose-plugins但不知道如何设置。

更新

这是我的下一个配置文件；它仍然失败。错误：

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
TypeError: undefined is not a function
    at _withPlugins (/home/xxx/xxx/nodeapps/my-web/node_modules/next-compose-plugins/lib/index.js:17:22)
    at Object.<anonymous> (/home/xxx/xxx/nodeapps/my-web/next.config.js:11:18)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at loadConfig (/home/xxx/xxx/nodeapps/my-web/node_modules/next/dist/next-server/server/config.js:8:94)
    at async NextServer.loadConfig (/home/xxx/xxx/nodeapps/my-web/node_modules/next/dist/server/next.js:1:2962)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
TypeError: undefined is not a function
    at _withPlugins …

我正在尝试将 MDX 与 Next.js 上的 remark-math 和 rehype-katex 插件集成。然而，在我成功添加插件后，方程后面有一个纯文本重复。这是 MDX 文件代码：

# Hello

My name $x^2+2x+1$

1. dd
2. aa
3. aaaaaa

结果如下：

复制纯文本

我怀疑通过使用 LaTeX 中的对齐环境可以解决问题。但还有更好的解决办法吗？谢谢！

我正在尝试在 Next.js 13 中使用 mdx 文件。我已经在 next.config 中完成了所有必要的配置并创建了该文件。在应用程序文件夹内，我有 > docs > Components > Accordion > page.mdx

页面文件只渲染一个类似“#Title”的标题。当我导航到此 URL 时，出现以下错误：

node_modules/@mdx-js/react/lib/index.js (34:26) @ React 错误 - createContext 仅适用于客户端组件。在文件顶部添加“use client”指令以使用它。了解更多： https: //nextjs.org/docs/messages/context-in-server-component

我该如何解决这个问题？

我的 next.config.js

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  experimental: {
    appDir: true,
  },
}

module.exports = withMDX(nextConfig)

我想使用 Typescript 和 MDX 创建故事，因此我的main.js：

module.exports = {
  stories: ['../src/**/*.stories.(mdx|ts)'],
  addons: ['@storybook/addon-docs', 'storybook-addon-preview']
};

但是我不想在“画布”旁边有“文档”选项卡。我该如何删除它？如果没有'@storybook/addon-docs'MDX，则不会显示故事。

什么工作：

• 布局正确应用于我的每个页面
• MDX文件正确获取Hero和section组件并正确渲染容器的HTML/CSS
• 加载并显示来自 MDX 的数据

什么不起作用：

• 未呈现英雄或部分简码中的 MD！# 不会转化为 H1 等。

我尝试过的：

• 在 Section & Hero => Error 中使用 MDXRender
• 直接在 MDX 文件中使用组件而不是简码

题：

• 是否无法在短代码中正确呈现 MD？换句话说，MDX 不是递归渲染的吗？

内容/index.mdx：

---
title: Main Content English
slug: /main-content/
---

<Hero># This is a test, but never gets transformed</Hero>

<Section># In Section Headline</Section>

# ABC

Officia cillum _asdasd_ et duis dolor occaecat velit culpa. Cillum eu sint adipisicing labore incididunt nostrud tempor fugiat. Occaecat ex id fugiat laborum ullamco. Deserunt sint quis aliqua …