Markdown字符串转HTML轻松实现

2024-01-26 19:14:26

简介

在web开发中，我们经常需要处理markdown格式的文本，并将其转换为HTML以便在网页中显示。手动进行转换既耗时又容易出错，因此使用工具或插件来实现自动化就显得尤为重要。

markdown-it

markdown-it是一个流行的markdown解析器，可以将markdown字符串转换成HTML字符串。它的使用非常简单，只需创建一个实例并调用其render()方法即可。

const markdownIt = require('markdown-it');

const md = new markdownIt();
const html = md.render('**Hello, world!** ');

html-react-parser

html-react-parser是一个React组件，可以将HTML字符串解析为React元素。这使我们能够轻松地在React应用程序中渲染HTML内容。

import { html } from 'html-react-parser';

const MyComponent = () => {
  return html('<h1>Hello, world!</h1>');
};

结合使用

我们可以将markdown-it和html-react-parser结合使用，以实现markdown字符串到HTML的转换。

const markdownIt = require('markdown-it');
import { html } from 'html-react-parser';

const md = new markdownIt();

const MyComponent = ({ markdown }) => {
  const html = md.render(markdown);
  return html(html);
};

示例

以下是一个完整的示例，演示如何使用markdown-it和html-react-parser将markdown字符串转换为HTML：

import React, { useState } from 'react';
import { html } from 'html-react-parser';
import { Editor } from '@tinymce/tinymce-react';

const App = () => {
  const [markdown, setMarkdown] = useState('');

  const handleEditorChange = (e) => {
    setMarkdown(e.target.getContent());
  };

  const html = md.render(markdown);

  return (
    <div>
      <Editor
        initialValue={markdown}
        onEditorChange={handleEditorChange}
      />
      <div dangerouslySetInnerHTML={{ __html: html(html) }} />
    </div>
  );
};

export default App;