前言
作为前端开发者，我们经常需要使用 markdown 来书写技术文章、文档等。但有时我们需要将 markdown 转换成其他格式，例如 HTML 或 Word。这时候，我们可以使用一个 npm 包叫做 draft-js-export-markdown 来实现 markdown 到 HTML 的转换。本文将介绍如何使用该 npm 包。
安装
该 npm 包可以通过 npm 或 yarn 来安装，建议使用 yarn，因为比 npm 更快。
yarn add draft-js-export-markdown
使用
要使用该 npm 包，需要先将 markdown 字符串转化成 draft-js 的内容格式。可以使用 draft-js-import-markdown 这个 npm 包来实现。
import {stateFromMarkdown} from 'draft-js-import-markdown';
import {EditorState} from 'draft-js';
const markdownString = '# Hello, world!';
const content = stateFromMarkdown(markdownString);
const editorState = EditorState.createWithContent(content);现在，我们有了一个包含 markdown 内容的 EditorState 对象。接下来，我们可以使用 draft-js-export-markdown 包将其转化为 markdown 字符串或者 HTML。
将 EditorState 转化为 markdown 字符串
import {convertToRaw} from 'draft-js';
import {stateToMarkdown} from 'draft-js-export-markdown';
const rawContent = convertToRaw(editorState.getCurrentContent());
const markdownString = stateToMarkdown(rawContent);
console.log(markdownString); // 输出的 markdown 字符串为 "# Hello, world!"将 EditorState 转化为 HTML
import {convertToRaw} from 'draft-js';
import {stateToHTML} from 'draft-js-export-html';
const rawContent = convertToRaw(editorState.getCurrentContent());
const htmlString = stateToHTML(rawContent);
console.log(htmlString); // 输出的 HTML 字符串为 "<h1>Hello, world!</h1>"为代码块添加语言标记
有时候，我们可能需要为代码块添加语言标记，这样我们就可以使用语法高亮插件来美化代码了。可以使用 draft-js-code 插件来实现。
-- -------------------- ---- ------- ------ -------------- ---- ----------- ------ ------------- ---- ----------------------- ------ ----- ---- ---------- ------ --------------------------- ------ ----------------- ---- ------------------------ ----- ---------- - ---------------------------------------------- ----- ---------- - ------------------- ------ ------ --- ----- ------- - ------------- ----- ---------- - ----------------------- ----------- ------------------------ -- --- ---- ----------
总结
本文介绍了如何使用 draft-js-export-markdown 这个 npm 包将 EditorState 转化为 markdown 字符串和 HTML，以及如何为代码块添加语言标记。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedacabb5cbfe1ea0610ac4