用100行代码轻松打造基于React的Markdown输入 + 即时预览在线编辑器

前端

2023-10-01 22:04:04

绪言

Markdown是一种轻量级标记语言，语法简洁，便于阅读和写作，广泛用于撰写文档、博客文章和技术教程。结合即时预览功能，您可以实时查看Markdown文档的渲染效果，方便您及时发现并更正错误。

工具准备

在开始构建之前，您需要准备好以下工具：

文本编辑器或IDE（如Visual Studio Code、Sublime Text、Atom）
Node.js和npm
React和相关工具（如create-react-app）

项目搭建

使用create-react-app创建一个新的React项目。
安装必要的依赖项：

npm install react-markdown react-dom

在src文件夹中创建两个组件文件：MarkdownEditor.js和MarkdownPreview.js。

MarkdownEditor组件

MarkdownEditor组件负责处理Markdown文本的输入。

import React, { useState } from "react";
import { Editor } from "react-markdown-editor";

const MarkdownEditor = () => {
  const [value, setValue] = useState("");

  return (
    <Editor
      value={value}
      onChange={setValue}
      renderSyntaxHighlight={true}
    />
  );
};

export default MarkdownEditor;

MarkdownPreview组件

MarkdownPreview组件负责将Markdown文本渲染成HTML并显示在页面上。

import React, { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";

const MarkdownPreview = ({ value }) => {
  const [html, setHtml] = useState("");

  useEffect(() => {
    const result = markdownToHtml(value);
    setHtml(result);
  }, [value]);

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
};

export default MarkdownPreview;

App组件

App组件负责将MarkdownEditor和MarkdownPreview组件组合在一起，并处理组件之间的通信。

import React, { useState } from "react";
import MarkdownEditor from "./MarkdownEditor";
import MarkdownPreview from "./MarkdownPreview";

const App = () => {
  const [value, setValue] = useState("");

  return (
    <div>
      <MarkdownEditor value={value} onChange={setValue} />
      <MarkdownPreview value={value} />
    </div>
  );
};

export default App;