安装

首先，确保你已经设置好了一个React项目。在这个演示中，我们使用了@ttoss/component包中的自定义Markdown组件，它基于react-markdown。

import { Markdown } from '@ttoss/component'; // 基于react-markdown

进入全屏模式退出全屏模式

创建一个Markdown内容组件

让我们创建一个MarkdownContent组件来渲染内容。这个组件接受一个content属性，它是作为字符串的markdown内容。

type MarkdownContentProps = {
  content: string;
};

export const MarkdownContent = ({ content }: MarkdownContentProps) ## 自定义 Markdown 组件

`@ttoss/component` 中的 `Markdown` 组件允许我们自定义 HTML 元素的呈现方式。在这种情况下，我们希望自定义锚点 (`<a>`) 元素的呈现方式以嵌入 YouTube 视频。

=> {

  // 自定义呈现方式
},

}}

{content}

## 从 YouTube 获取嵌入链接

要嵌入 YouTube 视频，您需要获取视频的嵌入链接。按照以下步骤进行操作：

1. 前往 YouTube 上的视频。
2. 在视频下方点击 "分享"。
3. 点击 "嵌入"。
4. 复制提供的代码中的 URL。URL 的格式将为：`https://www.youtube.com/embed/VIDEO_ID`。

## 处理视频链接

我们需要识别 Markdown 中的视频链接。 如果[`href`]属性的锚元素包含字符串`'youtube'`或`'embed'`，则返回自定义渲染的视频链接。

```javascript
if (['youtube', 'embed'].every((item) => props.href.includes(item))) {
  // custom rendering for video links
}

嵌入视频

对于被识别为视频链接的链接，我们返回一个自定义组件结构来在iframe中嵌入视频。

return (
  <Box
    sx={{
      position: 'relative',
      paddingBottom: ['56.25%', 'calc(56.25% * 0.75)'],
      width: ['unset', '75%'],
      height: 0,
      margin: '0 auto',
    }}
  >
    <Box
      as="iframe"
      sx={{
        border: 'none',
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
      }}
      // @ts-ignore
      src={props.href}
      allowfullscreen="allowfullscreen"
    />
  </Box>
);
``` 使用示例

以下是您如何在`MarkdownContent`组件中使用YouTube视频的示例：

const videoMarkdownContent = `

我最喜欢的视频

这是我最喜欢的YouTube视频： 一个视频 (opens new window) `;

function MyApp() { return ; }

export default MyApp;

进入全屏模式 退出全屏模式

在这个示例中，将`VIDEO_ID`替换为您想要嵌入的YouTube视频的ID。


结论

这种设置允许您在React应用程序中呈现带有嵌入视频的Markdown内容，提供丰富的内容体验。通过自定义markdown元素的呈现，您可以处理各种内容类型，并为用户创建一个量身定制的观看体验。