npm 包 mdhs 使用教程

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

简介

mdhs (Markdown Hot Spot) 是一个可以快速生成热区的 npm 包,用户可以将热区用于展示产品的功能点、交互、特性等。

安装

通过 npm 安装 mdhs 命令行工具:

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

使用

在项目目录下新建一个 .md 文件,文件名可以自己定义。

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

.md 文件中编写文本内容,并在需要生成热区的位置添加相应的代码,如下:

- ----

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

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

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

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

在终端内输入以下命令:

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

生成热区的截图如下:

参数说明

mdhs 命令行工具支持以下参数:

  • --width-w:设置热区截图的宽度,默认为 800 像素。
  • --height-h:设置热区截图的高度,默认为 600 像素。
  • --output-o:设置生成文件的路径和文件名,默认为输入文件名的前缀加上 _mdhs.png
  • --no-window:设置截图时不显示浏览器窗口。

示例代码

- ----

----------

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

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

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

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

总结

mdhs 可以帮助开发者快速生成热区,方便产品演示和交互展示。在使用过程中,需要注意每个热区的 type 参数,以便弄清楚每个热区的展示效果。同时,在 mdhs 命令的使用过程中,也需要了解命令的参数以及对应的使用方式。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066f3b1d8e776d080409f6


猜你喜欢

  • npm 包 meta-auth 使用教程

    简介 在前端开发中,我们经常会需要对网站的一些特定信息进行授权,本文将介绍一款叫做 meta-auth 的 npm 包,它是一个用于在网站中设置授权信息的工具。这个 npm 包基于 meta 标签,可...

    4 年前
  • npm 包 meta-clock 使用教程

    前言 在前端开发中,时钟是一个不可或缺的元素。而我们经常需要在页面中引入时钟,用来展现当前的时间。在这个过程中,经常要用到定时器,但是每次重复编写时钟组件会浪费我们很多时间。

    4 年前
  • npm 包 meta-app-mem 使用教程

    前端开发中,我们经常需要处理页面元数据。在使用 React 等前端框架时,我们也需要对元数据进行处理。而 meta-app-mem 就是一个优秀的 npm 包,用于管理页面上的元数据。

    4 年前
  • npm 包 mesh-ui 使用教程

    Mesh-UI 是一个基于 Vue.js 的UI组件库,提供了一系列常用的组件,如:Button、Input、Table、Dialog 等等。Mesh-UI 具有良好的可维护性和扩展性,易于使用,并且...

    4 年前
  • npm 包 mesh-webrtc 使用教程

    简介 Mesh-WebRTC 是一个用于创建点对点连接的 JavaScript 库。他基于 WebRTC 技术,并使用了信令服务器中继。与传统的 WebRTC 开发方式不同, Mesh-WebRTC ...

    4 年前
  • npm 包 meshblu-arduino 使用教程

    简介 meshblu-arduino 是一款专为 Arduino 设备设计的 npm 包。它可以通过 MQTT(Message Queuing Telemetry Transport)协议将 Ardu...

    4 年前
  • npm 包 metalsmith-loader 使用教程

    简介 Metalsmith 是一个静态站点生成器,它使用 Node.js,并使用了 Metalex 的概念。Metalsmith 的工作方式很简单,就是读取文件,让用户利用插件进行转换,然后将输出保存...

    4 年前
  • npm 包 metalsmith-localize-collection 使用教程

    在前端开发中,处理多语言是很常见的需求。metalsmith-localize-collection 是一个可以帮助开发者快速本地化项目的库。它是一个可扩展的 Metalsmith 插件,可以将多语言...

    4 年前
  • npm 包 metalsmith-logger 使用教程

    在前端开发中,静态网站生成器是不可或缺的工具,而 metalsmith 是其中一个非常出色的选择。在使用 metalsmith 进行构建的过程中,我们有时候需要查看构建日志,此时就需要一个好用的 Lo...

    4 年前
  • npm 包 mercurial-bower-resolver 使用教程

    如果您经常使用前端技术,那么您一定对 npm 包有所了解。npm 是一个包管理工具,它使得 JavaScript 包的安装、发布、管理和升级变得十分方便。其中,mercurial-bower-reso...

    4 年前
  • npm 包 mercury-animate 使用教程

    通过使用 npm 包 mercury-animate,您可以轻松地在您的前端项目中添加动画效果。这个 npm 包是由 mercuryjs 团队维护和开发的,提供了众多的动画效果和API,使您的项目拥有...

    4 年前
  • npm 包 meta-config 使用教程

    前端开发中,我们经常需要在项目中使用各种配置文件,比如 webpack 配置文件、babel 配置文件等等。配置文件的编写往往是比较繁琐的。为了简化此过程,一些前端工具链会提供统一的配置方案,例如 V...

    4 年前
  • npm 包 mercury-broker 使用教程

    本文将介绍 npm 包 mercury-broker 的使用教程。mercury-broker 是一个支持发布/订阅模式的消息中间件,它使用了基于 WebSocket 的协议,可以为前端应用提供实时通...

    4 年前
  • npm 包 mercury-binding 使用教程

    前言 在前端开发中,我们经常需要在不同的页面元素之间进行数据绑定操作。为了方便实现数据绑定操作,开发者可以使用一些现成的工具和库。本文将介绍一款名为 mercury-binding 的 npm 包,它...

    4 年前
  • npm 包 mercury-d3axis 使用教程

    npm 包 mercury-d3axis 是一个用于绘制 D3 坐标轴的库。它提供了方便的 API 以及高度可定制化的样式,使得开发人员可以在前端页面中轻松地绘制出各种坐标轴。

    4 年前
  • npm 包 @touno-io/pdf 使用教程

    介绍 在 Web 前端开发中,我们经常需要将页面中的数据以 PDF 格式导出,这个时候,如果每个开发者都去编写一套从数据到 PDF 的转换逻辑,显然会浪费很多时间和精力。

    4 年前
  • npm 包 metalsmith-markdown-precompiler 使用教程

    Metalsmith 是一个简单且灵活的静态网站生成器,它可以帮助我们轻松地创建并生成静态网站。而 metalsmith-markdown-precompiler 则是一个可以让我们在 Metalsm...

    4 年前
  • npm 包 mercury-jsx-folder 使用教程

    在前端开发中,我们常常需要使用各种各样的库和框架来提高开发效率和代码质量。npm 是一个流行的包管理器,其中包含了大量的 JavaScript 库和工具。本文将介绍一个实用的 npm 包:mercur...

    4 年前
  • npm 包 mercury-router 使用教程

    介绍 mercury-router 是一个基于 Mercury.js 构建的客户端路由模块。它利用了 Mercury.js 的可组合性和函数式编程范式的优点,使得前端路由变得更加简单、可靠和优雅。

    4 年前
  • npm 包 mercury-rx 使用教程

    简介 mercury-rx 是一个基于 RxJS 的流程管理器,用于帮助前端开发者更好地处理异步流程和数据变化。它提供了一些通用的处理方式,使得我们在实际开发中能够更加高效地处理各种复杂的场景。

    4 年前

相关推荐

    暂无文章