介绍
@weh/markdown 是一个用于在前端项目中渲染 Markdown 的 npm 包。它基于 React 和 marked 实现,提供了一个灵活、易用的 API,使得在前端项目中渲染 Markdown 成为了一件简单的事情。
安装与引用
在使用 @weh/markdown 前,你需要先安装它:
npm install @weh/markdown --save
在项目中引用该包需要使用 ES6 的方式:
import Markdown from '@weh/markdown';
使用
在使用 @weh/markdown 时,你可以直接使用其提供的组件 Markdown 来渲染你的 Markdown 内容:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------- ----- ------- - -- ------ ------ ---- -- -------------------- ------ ------- -------- ----- - ------ ------------------------------- -
当 Markdown 组件被渲染时,它会将 content
中的 Markdown 内容渲染成 HTML,并通过 React 将其显示在页面上。在上面的代码中,我们将 content
中的 Markdown 渲染成了一段 H1 标题和一句普通文本。
你还可以通过 props 对渲染的选项进行更改。下面是一些常见的 props:
allowDangerousHtml
:仅在你确信你的 Markdown 代码是安全的时才使用,允许渲染不安全的标签。默认为false
。className
:组件根元素(div)的 CSS 类名。默认为Markdown
。decorateToken
:用于自定义渲染节点的函数,能够让你替换或修改标记渲染的结果。详见 API 文档。source
:渲染的 Markdown 源码。和{props.children}
是等价的,同时存在时,{props.children}
优先。theme
:指定渲染器使用的主题。默认为default
,可选的主题有light
和dark
。
示例
下面是一个完整具体的使用示例。在这个例子中,我们使用了 @weh/markdown、styled-components 和 Prism.js 包来实现一个简单的 Markdown 编辑器。
在页面上,我们使用 contentEditable
属性实现了一个可编辑的区域,用户在这个区域输入 Markdown 文本,程序会将其渲染成 HTML 并在下方的显示区显示。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ------ ---- -------------------- ------ -------- ---- ---------------- ------ ----- ---- ---------- ------ --------------------------- ------ -------------------------------------- ------ ---------------------------------- ----- --------- - ----------- -------- ----- ------ ----- ------- ----- -- ----- ------ - ----------- ----- -- ------- ----- -------- ----- ----------------- -------- ------- --- ----- ----- ----------- ----- --- --- --- ------- -- -- ------ ---------- ----- ------------ ------ -------- ----- -------------- - ------ ----- -------- ------------------ - ------------------------------------------ - --------------- ----- -------- ------------------ ------ ----- - -- ----- ------- - ----------- ----- -- ------- ----- -------- ----- ----------------- ----- ------- --- ----- ----- ----------- --- --- --- ------- -- -- ------ ---------- ----- ------------ ------ --------- ----- ----------------------- - ----------------- -------- ------- ----- ------- -- -------- -- --------- ----- ---------- ----- -------------- ----- ---- - -------- ------- -------- - ------------------ ----- -------- -------------- -------- ------------- ------ ---- -------------- ---- ------ ----- -------------------- ----- ----------------- ----- ---------------- ----- ------------ ----- - - - -- ----- ------------ - - ----------------------- - ----------------- -------- ------- ----- ------- -- -------- -- --------- ----- ---------- ----- -------------- ----- ---- - -------- ------- -------- - ------------------ ----- -------- -------------- -------- ------------- ------ ---- -------------- ---- ------ ----- -------------------- ----- ----------------- ----- ---------------- ----- ------------ ----- - - - -- ------ ------- -------- ----- - ----- -------- ---------- - ------------- ----- ------------------ - ------- -- - ---------------------------------- -- ------ - ----------- ------- --------------- ----------------- ---- -------- -------- ---------------------------- - -------- --------- --------- --------- --------------- -------- ------ ------------- ------ ------------ -- ---------------------- --------- ------ -- - -- ------ -- ------------ - ------ - ----- -------- ------ ----------- --- -------------------------- ------------------------ ------- -- - ---- - ------ --------- - -- -- ---------- ------------ -- -
结语
本文介绍了如何使用 @weh/markdown 包,在前端项目中渲染 Markdown。通过本文的学习,你可以快速上手这个 npm 包,并利用它在你的项目中轻松完成 Markdown 的渲染任务。
如果你想要进一步了解该包的使用,还请查看 它的文档。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005622a81e8991b448df7fc