npm 包 @alme/markdown-ts 使用教程

阅读时长 4 分钟读完

@alme/markdown-ts 是一个能够将 Markdown 转换成 HTML 的 npm 包,它提供了丰富的选项,能够满足各种需求。

安装

通过 npm 安装:npm install @alme/markdown-ts

使用

选项

basic

  • breakingLinks boolean (default: false)
  • gfm boolean (default: true)
  • headerIds boolean (default: true)

分别表示是否将 URL 与标题分开,是否支持 GFM,是否为标题添加 ID。

extra

  • langPrefix: string (default: language-)
  • mangle: boolean (default: true)
  • sanitize: boolean|null (default: false)
  • smartLists boolean (default: true)
  • smartypants boolean (default: false)

分别表示:代码块语言前缀,是否修改链接文本显示,是否对 HTML 进行过滤,是否使用智能列表,是否使用 SmartyPants。

Renderer

Renderer 可以自定义渲染方法,详见下面的示例。

示例

将图片异步加载

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

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

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

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

总结

通过使用 @alme/markdown-ts,我们能够很方便地将 Markdown 文本转换成 HTML 并且根据自己需求进行个性化配置,同时也能够通过自定义渲染器,实现更强大的功能。

因此,@alme/markdown-ts 对前端开发人员而言是一个非常有价值的工具包,希望本文对读者有所帮助。

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