简介
mdhs (Markdown Hot Spot) 是一个可以快速生成热区的 npm 包，用户可以将热区用于展示产品的功能点、交互、特性等。
安装
通过 npm 安装 mdhs 命令行工具：
npm install -g mdhs
使用
在项目目录下新建一个 .md 文件，文件名可以自己定义。
touch demo.md
在 .md 文件中编写文本内容，并在需要生成热区的位置添加相应的代码，如下：
-- -------------------- ---- ------- - ---- ------------------ ---- ---- ---- - -------- --------------- --- ---- -------------- --- - --- - --- - --- ---- ------------ --- ---- ---- ---- - ----- ------------ --- ---- ----------- --- --------------------------------------------- ---- --------- --- ---- ---- ---- - ------ ------------- --- ---- ------------ --- -------- ---- ---------- ---
在终端内输入以下命令：
mdhs demo.md # demo.md 为刚刚新建的文件名，需要用实际文件名代替
生成热区的截图如下：
参数说明
mdhs 命令行工具支持以下参数：
--width或-w：设置热区截图的宽度，默认为 800 像素。--height或-h：设置热区截图的高度，默认为 600 像素。--output或-o：设置生成文件的路径和文件名，默认为输入文件名的前缀加上_mdhs.png。--no-window：设置截图时不显示浏览器窗口。
示例代码
-- -------------------- ---- ------- - ---- ---------- ---- ------ --- ---- --------------- --- - --------------------------- - -------------------------------- ---- ------------- --- ---- ------ --- ---- --------------- --- ----------------------------------- ---- ------------- --- ---- ------ --- ---- -------------- --- --------------------- ---- ------------ --- ---- ------ --- ---- ------------ --- --------- ---- ---------- ---
总结
mdhs 可以帮助开发者快速生成热区，方便产品演示和交互展示。在使用过程中，需要注意每个热区的 type 参数，以便弄清楚每个热区的展示效果。同时，在 mdhs 命令的使用过程中，也需要了解命令的参数以及对应的使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3b1d8e776d080409f6