使用MUI v5“markdown-to-jsx”

这似乎对我很管用:

import Markdown from 'markdown-to-jsx';

...

  const MarkdownLink = ({ children, ...props }) => (
    <Link {...props}>{children}</Link>
  );

...

          <Markdown
            options={{
              forceBlock: true,
              overrides: {
                a: {
                  component: MarkdownLink,
                  props: {
                    target: '_blank',
                  },
                },
              },
            }}
          >
            {description}
          </Markdown>

在Markdown v2.5.2中，你可以这样使用:

[link](URL){:target="_blank"}

React + Markdown环境:

我创建了一个可重用组件:

export type TargetBlankLinkProps = {
  label?: string;
  href?: string;
};

export const TargetBlankLink = ({
  label = "",
  href = "",
}: TargetBlankLinkProps) => (
  <a href={href} target="__blank">
    {label}
  </a>
);

我在任何需要在新窗口中打开链接的地方都使用它。

Kramdown对此表示支持。它与标准Markdown语法兼容，但也有许多扩展。你可以这样使用它:

[link](url){:target="_blank"}

所以，这不是完全正确的，你不能添加链接属性Markdown URL。要添加属性，请检查正在使用的底层markdown解析器及其扩展。

特别是，pandoc有一个扩展来启用link_attributes，它允许在链接中进行标记。如。

[Hello, world!](http://example.com/){target="_blank"}

对于那些来自R的(例如使用rmarkdown, bookdown, blogdown等等)，这是你想要的语法。 对于那些不使用R的用户，你可能需要在调用pandoc时使用+link_attributes来启用扩展

注意:这与kramdown解析器的支持不同，后者是上面接受的答案之一。特别要注意的是，kramdown与pandoc不同，因为它需要一个冒号——:——在花括号的开头——{}，例如。

[link](http://example.com){:hreflang="de"}

特别是:

# Pandoc
{ attribute1="value1" attribute2="value2"}

# Kramdown
{: attribute1="value1" attribute2="value2"}
 ^
 ^ Colon

就Markdown语法而言，如果想要获得如此详细的内容，就必须使用HTML。

<a href="http://example.com/" target="_blank">Hello, world!</a>

我所见过的大多数Markdown引擎都允许普通的HTML，只是在这种情况下，一般的文本标记系统无法解决它。(例如StackOverflow引擎。)然后，他们通过HTML白名单过滤器运行整个输出，因为即使只有markdown的文档也很容易包含XSS攻击。因此，如果您或您的用户想要创建_blank链接，那么他们可能仍然可以。

如果这是一个您将经常使用的特性，那么创建自己的语法可能是有意义的，但它通常不是一个重要的特性。如果我想在一个新窗口中启动那个链接，我会自己按下ctrl键，谢谢。