React Markdown组件库使用笔记

react-markdown 是一个用于将 Markdown 文本渲染为 React 组件的库。它支持将 Markdown 转换为 HTML，并可以通过 React 组件进行渲染。

如何使用

步骤 1: 安装组件库

首先，需要通过 npm 或 yarn 安装 React 和 react-markdown 库。

# 安装 React
npm install react react-dom

# 安装 react-markdown
npm install react-markdown

步骤 2: 创建 React 组件

接下来，创建一个新的 React 组件 Help，在这个组件中使用 react-markdown 来渲染 Markdown 内容。

// Help.jsx
import React from "react";
import Markdown from "react-markdown";

export default function Help() {
  return (
    <article className="prose mx-auto mt-8 mb-12 w-full max-w-4xl px-4">
      <Markdown>{md}</Markdown>
    </article>
  );
}

const md = `# Chrome 内置 AI：帮助和介绍

## 什么是 Chrome 内置 AI？

Chrome 内置 AI 是一个在您的 Chrome 浏览器中运行大型语言模型的项目。这项技术能够在本地进行 AI 处理，增强隐私保护并减少对外部服务器的依赖。

## 功能

* **本地 AI 处理** ：在您的 Chrome 浏览器中直接运行 AI 模型。
* **Gemini Nano** ：利用 Google 的 Gemini Nano 模型实现高效的设备端 AI 功能。
* **隐私保护** ：所有处理都在本地完成，没有数据发送到外部服务器。
* **自然语言理解** ：能够理解和生成各种任务所需的人类语言。
* **上下文感知** ：理解对话的上下文，提供连贯的回应。

## 如何使用

1. **开始新聊天** ：点击“新聊天”按钮开始与 AI 互动。
2. **发送消息** ：在输入框中输入您的消息或查询，然后点击“发送”与 AI 交流。

## 隐私和数据

* 所有 AI 处理都在您的浏览器**本地**完成。
* 没有数据发送到外部服务器，确保您的对话保持私密。

## 启用本地 AI 的步骤

如果本地 AI 未启用，请按照以下步骤操作：

1. **安装 Chrome Canary**：
   * 确保您安装了 127 版本或更高版本。
   * 下载链接：[Chrome Canary](https://www.google.com/chrome/canary/)
2. **启用 Prompt API**：
   * 访问：\`chrome://flags/#prompt-api-for-gemini-nano\`
   * 将其设置为“启用”
3. **启用优化指南**：
   * 访问：\`chrome://flags/#optimization-guide-on-device-model\`
   * 将其设置为“启用绕过性能要求”
   * 完成此步骤后重启浏览器
4. **登录 Google**：
   * 确保您已登录到 Chrome 浏览器
   * 注意：隐身模式和访客模式目前不支持
5. **下载模型**：
   * 访问：\`chrome://components/\`
   * 找到“优化指南设备端模型”
   * 确保它已完全下载
   * 如果版本显示为“0.0.0.0”，请点击“检查更新”

## 持续改进中

请注意，Chrome 内置 AI 目前仍在开发中。功能和性能可能会随时间变化或改进。

## 反馈和支持

如需额外帮助或提供反馈，请加入我们的 Discord 社区：
[https://discord.gg/ekDRmufC](https://discord.gg/ekDRmufC)`;

步骤 3: 在项目中使用组件

在您的 React 项目中，您可以通过引入 Help 组件来显示帮助和介绍内容。

// App.jsx
import React from 'react';
import Help from './Help';

function App() {
  return (
    <div className="App">
      <Help />
    </div>
  );
}

export default App;

额外步骤: 添加样式

您可以使用 CSS 或者引入 CSS 框架（如 Tailwind CSS）来美化您的组件。

/* styles.css */
.prose {
  max-width: 65ch;
  margin: 0 auto;
  padding: 2rem;
}

在您的 index.js 或 App.js 文件中引入样式：

import './styles.css';