标签: react-markdown

我在 React Markdown 中传递各种数量的数据，例如表格、列表和 h 标签。我想知道如何单独设置每个元素的样式。我到处搜索，但没有提到如何设置元素的样式，而不仅仅是粗体或强调等。我想我可以在 ReactMarkdown 组件中传递一个类名来设置它的样式，但这不仅仅是为组件提供样式。如何设计其中的各种元素的样式？

const ReadMePreviewer = ({ readMeCode }) => {
  return (
    <ReactMarkdown
      plugins={[[gfm, { singleTilde: false }]]}
      className={style.reactMarkDown}
      // className={style.reactMarkDownRemovingExtraGlobal}
      renderers={renderers}
      source={readMeCode}
    />
  );
};

小组件看起来像这样：

// @flow
import ReactMarkdown from "react-markdown";
import type { Node } from "react";

function LinkRenderer(props: any) {
  return (
    <a href={props.href} target="_blank" rel="noreferrer">
      {props.children}
    </a>
  );
}

type Props = {
  children: Node,
};

const MarkdownRenderer = ({ children }: Props) => {
  return (
    <ReactMarkdown components={{ link: LinkRenderer }}>
      {children}
    </ReactMarkdown>
  );
};

谁能建议为什么我的链接在使用此组件时无法在新选项卡中打开？

像在其他组件中一样实现该组件：

<MarkdownRenderer>{value}</MarkdownRenderer>

我正在测试 ReactMarkdown 以便能够从 chatgpt 生成的 Markdown 语法渲染 HTML 表。我已经安装了react-markdown和remarkGfm。但我不断收到此错误： TypeError 无法设置未定义的属性（设置 'inTable'）

当isolated + markdown被硬编码用于测试时，我在项目和codesandbox中都收到错误。这是代码：

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const MarkdownResponse = () => {
    const response = `
  # heading 1
  ## heading 2
  ### heading 3
  ~~strikethrough~~  

  > Blockquote  

  **strong**  
  *italics*  
  ***
  [Gmail](https://gmail.com)  
  ***
  1. ordered list
  2. ordered list
  - unordered list
  - unordered list  
  
  | Syntax      | Description |
  | ----------- | ----------- |
  | Header      | Title       |
  | Paragraph   | …

我有一个 Next.js 应用程序，正在部署到 vercel，并使用 ReactMarkDown 组件从 Strapi 后端渲染一些内容。

虽然这在本地有效，但部署失败并显示以下日志：

49:54  Error: Do not pass children as props. Instead, nest children between the opening and closing tags.  react/no-children-prop

<ReactMarkdown key={idx} children={content.answer} />

我认为这是罪魁祸首，它对使用“children”作为道具名称不满意，但是...... ReactMarkDown 组件渲染内容的道具是...... 孩子。

我已经尝试过这个，如下所示。

<ReactMarkdown >{content.answer}</ReactMarkdown>
<ReactMarkdown key={idx} children={[content.answer]} />

第一个不会改变任何内容，后者不起作用，内容不再显示。

任何建议都非常感激。

除了斜体和粗体之外，降价不起作用。我发现这个问题是由 Tailwind CSS 引起的，因为它处理文本大小和其他样式的方式。如果我在 my 中注释掉index.css导入（定义了 Tailwind 的指令）index.jsx，则所有 Markdown 类型（如标题、代码等）都可以正常工作。

新闻.jsx

import ReactMarkdown from 'react-markdown';
import { useState } from 'react';

function News() {
  const [markdown, setMarkdown] = useState('# I am heading');
  
  return (
    <div>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <ReactMarkdown>{markdown}</ReactMarkdown>
    </div>
  );
}

export default News;

index.css

import ReactMarkdown from 'react-markdown';
import { useState } from 'react';

function News() {
  const [markdown, setMarkdown] = useState('# I am heading');
  
  return (
    <div>
      <textarea value={markdown} onChange={e …

我目前遇到了一个无法解决的问题（从今天早上开始我一直在寻找解决方案，但我无法找到我需要的）。

我使用 创建了一个 React 应用程序react-markdown，允许用户编辑一些便利贴，其内容以 Markdown 格式存储在我的数据库中。但问题是，我发现无法在文本下划线（我认为如果你可以在 Discord 上这样做，那么这意味着在 Markdown 中也是一样的）。

我想要的是一个解决方案，让我可以简单地改变它：

**Bold text**
__Underlined text__

进入……嗯……你知道我的意思。它不一定是这种精确的语法，但至少是类似的。我发现的唯一的事情是创建自定义组件，这是我不想要的，因为它需要使用已经存在的语法，或者，使用replace()函数转换Markdown并使用dangerouslySetInnerHTML来显示它，我不这样做也不想要，因为它被称为“dangerouslySetInnerHTML”不是有原因的吗？

如果有人可以提供帮助，我将非常感激。顺便说一句，对于任何语法错误，我们深表歉意，英语不是我的母语......

我正在使用 React-markdown 来呈现输入的值。问题是归约没有得到应有的处理，例如如果我使用这个表达式“#hello world”，文本应该显示为h1中的文本，但它正常显示，其他表达式也无法显示被执行。

//setDataForm coming from parent 
//const [dataForm, setDataForm] = useState()

const NoteForm = ({setDataForm})=> {
   const handleChange = (e) => {
        const { name, value } = e.target
        setDataForm({
            ...dataForm,
            [name]: value
        })
   }

   <textarea
     placeholder="Description"
     onChange={handleChange}
     name="description"
   ></textarea>

   <ReactMarkdown
     className="w-full h-[100vh] outline-none"
     children={dataForm?.description}
     remarkPlugins={[remarkGfm]}
     escapeHtml={false}
   />
}

问题

使用 React-Markdown，我可以充分使用我的自定义构建组件。但这是在降价中使用特定的预先构建的关键字。像段落或图像。效果非常好。但问题是，这些似乎都是预先构建的单词/条件，如段落、标题或图像。

我找不到在我的降价中添加新关键字的方法，例如要使用的“CustomComponent”。这就是我现在所需要的><

这对我来说很好用，可以将降价图像制作成我在其他地方制作的自定义“页脚”组件。我知道这很荒谬，但它确实有效。但我不知道如何让这个渲染器接受/创建一个新的关键字，如“emoji”或“customComponent”或“somethingSilly”。

let body = 
    `![Fullstack React](https://dzxbosgk90qga.cloudfront.net/fit-in/504x658/n/20190131015240478_fullstack-react-cover-medium%402x.png)`;

const renderers = {
    image: () => <Footer/>
};

<ReactMarkdown source={body} renderers={renderers} />;

我过去做过的一些工作：

一些文档： https://reposhub.com/react/miscellaneous/rexxars-react-markdown.html https://github.com/rexxars/commonmark-react-renderer/blob/master/src/commonmark-react-renderer。 js#L50

示例： https: //codesandbox.io/s/react-markdown-with-custom-renderers-961l3 ?from-embed=&file=/src/App.js

但没有任何内容表明我如何使用“CustomComponent”来指示注入自定义组件。

用例/背景

我正在尝试从我的数据库中检索一篇文章，该文章的格式类似于 Markdown 中的格式（基本上是一个巨大的字符串）。我正在使用 typescript 和 redux 进行常规反应——这是我的应用程序中唯一需要它的部分。

"
# Title

## Here is a subtitle

Some text

<CustomComponentIMade/>

Even more text after.


<CustomComponentIMade/>

"

目前，我正在使用 React，并且在 Strapi CMS 中的富文本中包含内容，这些内容在 Markdown 版本中按照我想要的方式间隔开，但是一旦我切换到预览或在浏览器中查看内容，空格就会消失离开。我尝试过添加<br/>标签，但仍然没有换行符。

这是我的 Strapi Markdown 中的内容：\n

但这是我网页上的输出：\n

这是我当前的代码：

import ReactMarkdown from "react-markdown";\nimport rehypeRaw from "rehype-raw";\nexport\xc2\xa0default\xc2\xa0function\xc2\xa0name({\xc2\xa0posts })\xc2\xa0{\n\xc2\xa0\xc2\xa0return\xc2\xa0(\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<div>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0{posts.Title}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</div>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<div>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<ReactMarkdown\xc2\xa0children={posts.Content}\xc2\xa0rehypePlugins={[rehypeRaw]}\xc2\xa0/>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</div>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</>\n\xc2\xa0\xc2\xa0);\n}\n

I have been trying to render markdown in react using the react-markdown library, I have had 2 problems and 1 question which I have not been able to answer:

1. When using the remark-gfm plug-in the tables do not render correctly.
2. The spacing between lines does not behave the way I want it to, I can have 5 new lines between paragraphs and the render output will only show 1 new line.
3. In a checkbox selection is there a way to …

我想将 Twitter 标签从 Markdown 嵌入到 Html。我目前正在使用 React-markdown 进行渲染，如下所示

import gfm from 'remark-gfm'

const content = `#Hello <br/><hr/> <p>Please check out this tweet</p><br/> <p>https://twitter.com/adamwathan/status/1378480731651981322</p>`

....

<Markdown
 plugins={[gfm]}
 children={content} / >

我希望能够解析以 开头的任何内容，https://twitter.com这样我就可以为其渲染一个 React 组件。

我再次尝试在 NextJS/React 中渲染 markdown。由于某种原因，我的代码不起作用，如下：

import ReactMarkdown from "react-markdown";
import gfm from 'remark-gfm';
const PostContent = () => {
    const source = `
        # Hello, world!
        ---
        ~this doesn't work.~
    `
    return (
        <ReactMarkdown remarkPlugins={[gfm]} children={source} />
    );
};

export default PostContent;

它不会渲染 markdown，而是正常输出文本，就好像它是 JSON 一样：

谁能告诉我为什么会发生这种情况以及如何解决它？谢谢！

我无法提供更多详细信息，因为这就是所有代码。