介绍
@elaura/react-remarkable 是一个基于 Remarkable 的 React 组件，用于在 React 应用中渲染 Markdown。它提供了丰富的选项和配置，可以让开发者在自己的应用中更加灵活、自由地使用 Markdown。
安装
可以通过 npm 来安装该组件：
npm install @elaura/react-remarkable
使用
在你的 React 应用中引入 @elaura/react-remarkable：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ---------------------------
-------- ----- -
------ -
---- ----------------
----------- --------- ------ ----- ------------ --
------
--
-以上代码会显示出一段 Markdown 格式的文字。
Props
@elaura/react-remarkable 组件提供了若干个常用的 Props 属性，以实现更加定制化的需求：
source
- Type:
string - Required:
true - Default:
''
传入 Markdown 文本。
options
- Type:
Object - Required:
false - Default:
{}
传入 Remarkable 的配置选项。具体可选项请见 Remarkable 官方文档。
container
- Type:
string|React.Component|React.FunctionComponent - Required:
false - Default:
'div'
渲染出的 HTML 元素标签名或 React 组件。
containerProps
- Type:
Object - Required:
false - Default:
{}
传入渲染容器的属性。
示例
下面列举几个示例，以供参考：
渲染 GitHub 风格的 Markdown
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ---------------------------
-------- ----- -
------ -
---- ----------------
-----------
--------- ------ ------ ----------
----------
------- -----
----- -----
-------- -----
------------ -----
--
------------------- -- -- --------- ---- -----
----------------- ---------- --------------- -- -- -- ------ --- --- --
--
------
--
-渲染动态生成的 Markdown
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- ---------------------------
-------- ----- -
----- ---------- ------------ - -------------
------ -
---- ----------------
--------- ---------------- ----------- -- ---------------------------- --
----------- ----------------- --
------
--
-以上示例会在页面上渲染一个文本域和一个 Markdown 预览框。当你在文本域中输入 Markdown 时，预览框会自动更新。
总结
通过学习本文，你可以了解到如何使用 @elaura/react-remarkable 渲染 Markdown，并且能够自定义组件的一些常用属性，以适应不同的需求和场景。希望能对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd981e8991b448dd689