构建一个 Markdown 预览器

Markdown 预览器是一个简单的 Web 应用程序，它允许用户输入 Markdown 语法并实时预览渲染后的 HTML 输出。在本文中，我们将介绍如何使用 HTML、CSS 和 JavaScript 来实现一个 Markdown 预览器。Markdown 是一种轻量级的标记语言，通常用于在 Web 上格式化文本。

• Markdown 是一种轻量级的标记语言，具有纯文本格式化语法。常见的 Markdown 语法包括标题、链接、行内代码、代码块、列表、引用块、图像和强调（粗体和斜体文本）。
• Markdown 语法由简单的格式化规则组成，例如使用 # 表示标题，使用 或 表示斜体，使用 * 或 _ 表示粗体等等。
• # Hello, Markdown!‘

目录

• 原生 JavaScript 实现
• 框架/库集成 (例如 React):

方法 1: 原生 JavaScript 实现

在这种方法中，我们将直接使用 JavaScript 来操作 DOM 元素，以捕获用户输入并更新预览容器。这种方法适用于小规模的应用程序，并且能让我们对实现细节拥有更多的控制权。

解释:

提供的代码演示了一个使用 HTML、CSS 和 JavaScript 实现的基本 Markdown 预览器。HTML 文件包含用于输入 Markdown 语法的文本区域和一个用于显示渲染后 HTML 内容的 div 元素。JavaScript 代码监听文本区域上的输入事件，使用 marked 库将 Markdown 转换为 HTML，并相应地更新预览 div。

示例: 下面是构建一个 Markdown 预览器的示例。

HTML

INLINECODE5f9559e4`INLINECODEa62ffe51

# Heading 1

## Heading 2

Link

\inline code\

\INLINECODE141fc219\INLINECODEd47d2201\\

– List item 1

– List item 2

> Blockquote

!Image

Bold text

`;

editor.value = defaultMarkdown;

updatePreview();

});

`

****输出结果****:

![gfg73](https://media.geeksforgeeks.org/wp-content/uploads/20240402164701/gfg73.gif)Build a Markdown Previewer
## 方法 2: 框架/库集成 (例如 React):

使用像 [React](https://www.geeksforgeeks.org/reactjs/react/) 这样的框架可以通过提供可重用的组件、状态管理以及用于高效渲染的 [虚拟 DOM](https://www.geeksforgeeks.org/reactjs/reactjs-virtual-dom/) 来简化开发过程。我们可以为输入文本和预览容器创建单独的组件，从而使代码更加模块化和易于维护。

### 使用 ReactJS 构建 Markdown 预览器的步骤:

****步骤 1: ****使用以下命令创建一个 React 应用。

npx create-react-app markdown-previewer

cd markdown-previewer

****步骤 2:**** 安装 react-markdown 库来解析和渲染 Markdown 内容。

npm install react-markdown

步骤 3: ****创建两个组件****: Editor 用于输入 Markdown 内容，Previewer 用于显示解析后的 Markdown。

****示例: ****下面是使用 ReactJS 的 Markdown 预览器示例。

            CSS

    `

.