介绍
@tessdata/mkd 是一个开源的 npm 包，用于将 markdown 文件转换为美观的 HTML 页面。它基于 Markdown-It 和 highlight.js ，提供了许多优秀的功能，例如代码高亮、图片居中、表格样式、目录生成等等。这个包非常易于使用，可以用于个人博客、文档系统和各种前端开发中的需求。
安装
使用 npm 或者 yarn 命令进行安装。
--- ------- -------------
---- --- -------------
使用方法
安装之后，你可以在你的代码中就可以使用了。以下是一个简单的例子：
------ -- ---- ---------------- ----- -------- -- -- ------------------
当然，如果你更愿意使用 CommonJS 语法，也是可以的：
----- -- - ------------------------- ----- -------- -- -- ------------------
高级使用方法
1. 增加代码高亮
default: true
通过设置 highlight 选项来开启代码高亮。例如，要在代码中高亮 JavaScript：
------ -- ---- ---------------- ------ ---- ---- ----------------------------- ------ ---------- ---- ---------------------------------------- ----------------------------------- ------------ ------------------------ - - -------------------------- - ---------- ----- ---- ---
你需要先安装 highlight.js 包，然后注册你想要的语言，最后把注册的对象传递给 md 函数。
2. 自动生成目录
default: false
如果你需要为你的文章生成目录，你可以设置 toc 参数。例如：
------ -- ---- ---------------- ----- ----------- -------------- --------------- --- ----------------- --- ----------------- --- ---------------- ---------- - ---- ---- ---
它会自动为你生成一个目录，你可以通过设置 tocContainer 选项来指定目录的容器。
3. 图片居中
default: false
如果你想让 markdown 文件中的图片居中，设置 centerImage 参数即可：
------ -- ---- ---------------- ------------ ----------------------------------------------- - ------------ ---- ---
4. 自定义 CSS
default: false
如果你需要使用自己的 CSS，在选项中设置 customCss，它会将 CSS 样式引入到页面中：
------ -- ---- ----------------
----- --------- - -
---------- -
------- - -----
---------- -----
---------------- ---------
-
---------- ----- --- ---------- ----- --- ---------- ----- -- -
------- --- ----- -----
-------- -------
-
---------- ----- ---
----------------- --------
-
----------
------ --------
-
--
----- ------- - --------- ---总结
@tessdata/mkd 是一个非常实用的 npm 包，它具有多种功能和灵活的配置，可以帮助我们更好的生成美观的 markdown 页面。我相信在前端开发和文档系统中都会有它的一席之地。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005625881e8991b448df957