什么是 marked-imgix
marked-imgix 是一款基于 marked 和 imgix-js 的 npm 图片处理包。它可以通过扩展 marked 语法，让你添加 imgix-js 的图片处理功能，使得在显示图片时能够直接进行缩放、旋转、裁剪等处理，并且支持响应式布局。
如何安装
你可以通过 npm 安装 marked-imgix，运行以下命令：
--- ------- ------------
如何使用
第一步：引入
--- ------------------- - ------------------------
第二步：设置配置项
你可以设置如下选项：
imgixHost：你的 imgix 域名；imgixParams：默认的 imgix 处理参数；autoMarkedOptions：默认的 marked 配置参数；skipImgix：不处理 imgix 图片的 className 列表；imgixMarkdownAttribute：设置 imgix 的 markdown 属性。
示例代码：
--- ------------------- - ------------------------
--- -------- - --- ---------------------
---------- ------------------------------
------------ -
----- ------------------
---- ------
--- --------
--
------------------ -
-- -- ------ --
--
---------- -------------
----------------------- -----------
---第三步：渲染 markdown 字符串
实例化 marked 并将渲染器传入。同时，你还应该把渲染后的 html 插入到你需要的元素中。
--- ------ - ------------------ --- -- - -- ----- ----- -- -------------------- --- ---- - ---------- - --------- -------- --- ----------------------------------------------- - -------
第四步：扩展 marked-imgix
现在，你可以在 markdown 文本中使用 marked-imgix 的语法了。比如：
------ ----- --- -------------- ------------------------------ -
这个语法将返回一个处理后的 imgix 图片。
你还可以使用 imgix-js 的其他功能。通过 imgixParams 中设置的默认参数，在不设置参数的情况下，这些参数将自动应用于所有的 imgix 图片。
示例代码
----- --------------- - -
----- ------------------
---- ------
--- --------
--
----- ------------------- - ------------------------
----- -------- - --- ---------------------
---------- ------------------------------
------------ ----------------
------------------ -
---- -----
------- ----
--
---------- -------------
----------------------- -----------
---
----- ------ - ------------------
----- -- - ------- ----- --- -------------- ---------------------------------
----- ------ - ---------- - --------- -------- ---
----------------------------------------------- - -------结语
marked-imgix 是一款简单易用的图片处理模块，它通过对 marked 进行扩展，可以为开发人员提供更多的图片处理选项，帮助他们快速完成项目开发。希望这篇文章对你有所启发，如果你有任何问题、建议或意见，请在评论区留言！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ff481e8991b448ddc2e