npm 包 @weh/markdown 使用教程

阅读时长 8 分钟读完

介绍

@weh/markdown 是一个用于在前端项目中渲染 Markdown 的 npm 包。它基于 React 和 marked 实现,提供了一个灵活、易用的 API,使得在前端项目中渲染 Markdown 成为了一件简单的事情。

安装与引用

在使用 @weh/markdown 前,你需要先安装它:

在项目中引用该包需要使用 ES6 的方式:

使用

在使用 @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,可选的主题有 lightdark

示例

下面是一个完整具体的使用示例。在这个例子中,我们使用了 @weh/markdown、styled-components 和 Prism.js 包来实现一个简单的 Markdown 编辑器。

在页面上,我们使用 contentEditable 属性实现了一个可编辑的区域,用户在这个区域输入 Markdown 文本,程序会将其渲染成 HTML 并在下方的显示区显示。

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- --------------------
------ -------- ---- ----------------
------ ----- ---- ----------
------ ---------------------------
------ --------------------------------------
------ ----------------------------------

----- --------- - -----------
  -------- -----
  ------ -----
  ------- -----
--
----- ------ - -----------
  ----- --
  ------- -----
  -------- -----
  ----------------- --------
  ------- --- ----- -----
  ----------- ----- --- --- --- ------- -- -- ------
  ---------- -----
  ------------ ------
  -------- -----

  -------------- -
    ------ -----
    -------- ------------------
  -

  ------------------------------------------ -
    --------------- -----
    -------- ------------------
    ------ -----
  -
--
----- ------- - -----------
  ----- --
  ------- -----
  -------- -----
  ----------------- -----
  ------- --- ----- -----
  ----------- --- --- --- ------- -- -- ------
  ---------- -----
  ------------ ------
  --------- -----

  ----------------------- -
    ----------------- --------
    ------- -----
    ------- --
    -------- --
    --------- -----
    ---------- -----
    -------------- -----

    ---- -
      -------- -------
      -------- -
        ------------------ -----
        -------- --------------
        -------- -------------
        ------ ----
        -------------- ----
        ------ -----
        -------------------- -----
        ----------------- -----
        ---------------- -----
        ------------ -----
      -
    -
  -
--
----- ------------ - -
----------------------- -
  ----------------- --------
  ------- -----
  ------- --
  -------- --
  --------- -----
  ---------- -----
  -------------- -----

  ---- -
    -------- -------
    -------- -
      ------------------ -----
      -------- --------------
      -------- -------------
      ------ ----
      -------------- ----
      ------ -----
      -------------------- -----
      ----------------- -----
      ---------------- -----
      ------------ -----
    -
  -
-
--

------ ------- -------- ----- -
  ----- -------- ---------- - -------------

  ----- ------------------ - ------- -- -
    ----------------------------------
  --

  ------ -
    -----------
      -------
        ---------------
        ----------------- ---- -------- --------
        ----------------------------
      -
        --------
      ---------
      ---------
        ---------
          ---------------
          -------- ------ ------------- ------ ------------ --
          ---------------------- --------- ------ -- -
            -- ------ -- ------------ -
              ------ -
                ----- -------- ------ ----------- ---
                  -------------------------- ------------------------
                -------
              --
            - ---- -
              ------ ---------
            -
          --
        --
      ----------
    ------------
  --
-

结语

本文介绍了如何使用 @weh/markdown 包,在前端项目中渲染 Markdown。通过本文的学习,你可以快速上手这个 npm 包,并利用它在你的项目中轻松完成 Markdown 的渲染任务。

如果你想要进一步了解该包的使用,还请查看 它的文档

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005622a81e8991b448df7fc

纠错
反馈