npm 包 marked-imgix 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 marked-imgix

marked-imgix 是一款基于 marked 和 imgix-js 的 npm 图片处理包。它可以通过扩展 marked 语法，让你添加 imgix-js 的图片处理功能，使得在显示图片时能够直接进行缩放、旋转、裁剪等处理，并且支持响应式布局。

如何安装

你可以通过 npm 安装 marked-imgix，运行以下命令：

npm install marked-imgix

如何使用

第一步：引入

var markedImgixRenderer = require('marked-imgix');

第二步：设置配置项

你可以设置如下选项：

imgixHost：你的 imgix 域名；
imgixParams：默认的 imgix 处理参数；
autoMarkedOptions：默认的 marked 配置参数；
skipImgix：不处理 imgix 图片的 className 列表；
imgixMarkdownAttribute：设置 imgix 的 markdown 属性。

示例代码：

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

第三步：渲染 markdown 字符串

实例化 marked 并将渲染器传入。同时，你还应该把渲染后的 html 插入到你需要的元素中。

var marked = require('marked');
var md = '# Hello World \n ![Logo](/logo.png)';

var html = marked(md, {
  renderer: renderer
});

document.getElementById('my-content').innerHTML = result;

第四步：扩展 marked-imgix

现在，你可以在 markdown 文本中使用 marked-imgix 的语法了。比如：

![Demo image alt tag](image.jpg ':w=300&h=300&fit=crop&s=HASH' )

这个语法将返回一个处理后的 imgix 图片。

你还可以使用 imgix-js 的其他功能。通过 imgixParams 中设置的默认参数，在不设置参数的情况下，这些参数将自动应用于所有的 imgix 图片。

示例代码

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

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

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

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

结语

marked-imgix 是一款简单易用的图片处理模块，它通过对 marked 进行扩展，可以为开发人员提供更多的图片处理选项，帮助他们快速完成项目开发。希望这篇文章对你有所启发，如果你有任何问题、建议或意见，请在评论区留言！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc2e