在前端开发中，我们都有编写文档和博客的需求。但是要想让这些页面有更好的阅读体验，就需要使用一些 Markdown 工具将文本转化成 HTML。今天我们来介绍一个 npm 包，它可以让我们轻松地将 Markdown 转化为 HTML，同时支持代码高亮、表格等常用 Markdown 语法。
安装
我们可以通过 npm 安装 remark-preset-survivejs：
npm install remark-preset-survivejs --save-dev
使用
将 remark-preset-survivejs 加入到我们的备注选项中：
-- -------------------- ---- -------
--- ------ - ------------------
--- ---- - -----------------------
--- ----------- - ------------------------------
--- ---- - -----------------------
--- --- - ----------------------
--- --------- - -------------------------------
--- ---- - -----------------------
--- ----- - ------------------------
--- --------- - ----------------------------
--- -- - --------
----------------- ---------
----------
---------
---------------
----------
----------
-----------
---------------
----------------- -
------- -------------
----- -----
--------- -----
------- -----
------------ ----
--
-----------------------------------------
----------------------------- ----- --------------------remark-preset-survivejs 的实现其实就是对Markdown的一些默认设置进行了修改，比如对标题进行了样式定义，让它看起来更加美观，同时支持代码的高亮显示，让代码更加易读。使用该包可以让我们在编写 Markdown 文档时，不用考虑太多样式的问题。
示例
-- -------------------- ---- -------
---
------ -- ----
----- ----------
----- -------
---
- ----
------------ --------------------------
- -------- --- ---- ------------
-- ----
- -- - -- -
- -------- - ---- -
- ------ - ---- -
- ------- - ----- -
- ------- - ---- -
-- ----
-------------
--- ------ - ------------------
--- ---- - -----------------------
--- ----------- - ------------------------------
--- ---- - -----------------------
--- --- - ----------------------
--- --------- - -------------------------------
--- ---- - -----------------------
--- ----- - ------------------------
--- --------- - ----------------------------
--- -- - --------
----------------- ---------
----------
---------
---------------
----------
----------
-----------
---------------
-----------------------------------------
----------------------------- ----- --------------------数学公式
使用 remark-math 和 rehype-katex 可以将 LaTeX 公式转换为 HTML：
$$ \int_{-\infty}^\infty e^{-x^2}dx=\sqrt{\pi} $$
这个 Markdown 文件路径放在 `my-blog.md`，执行： ```sh remark-cli my-blog.md --output
就会将其转换成 HTML 并打印到控制台，输出的 HTML 如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------------
----- --------------- ---------------------------------------------
-------
------
-------------
--------------- -------------------------------------
- -------- --- ---- ----------------
--- -------------------
-------
-------
----
-----------
-----------
-----
--------
-------
----
---------------
-------------
-----
----
----------------
--------------
-----
----
----------------
-------------
-----
--------
--------
--- -------------------
---------- --------------------------------------------
--- -------------------
----- ------------------------ - ------------------------- --- ----- ----- ---------
---
----- ----------------------
----- ------------------- -------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------ ------------------------ ------------------ ------------- -------------------------------------- ------------------ -------------------------------- -------------- -------------------------------------------------------------- --------------------------------- -------------- ------------------------------------------------------- ------------------ ------------------------------- -------------------------- --------------------------------------------------- -------------- ------------------------------------------------------- ----------------- ------------------------------------------ ------------------ ------------------------- -------------------------------- ------------------ -------------------------- ----------------------------------- -------------------------------------------- -------------------------------- -------------- ------------------------------------------------------- ------------------ ------------------------------- -------------- ------------------------------------------------------- ------------------ ------------------------------- ------------------------ -------------- -------------------------------------------------------------- ------------------ ------------------ ---------------------- ------------------------------ ------------------------------------------------------ --------------------- ------------------------------ ---------------------- ---------------------------------- ------------------------------------------ ---------------------------- ---------------------------- ---------- ----------------- ----------------- ------------------ -------------------------------------------------------------------- ---------------- ----------- ---------------------- ----------------------------- --- ---------------- -------------- --------------- --------------- ---------------- --------------- ----------------------------- --- ---------------- ---------------- -------------- -------------- --------------- -------------- ----------------------------- --- ---------------- --------------- --------------- --------------- ---------------- -------------- ----------------------------- --- ---------------- --------------- ------------- -------------- -------------- -------------- ----------------------------- --- ---------------- -------------- --------------- ---------------- ----------------- --------------- ------------------------------------------------------ ------------------ ----------------------------------------- -----------------------------------------
--
-------
-------总结
remark-preset-survivejs 这个 npm 包提供了一个方便快捷的解决方案，让我们可以在不考虑样式问题的情况下，专注于内容的书写。同时该包内置了一些实用的 Markdown 插件，方便我们使用。希望这篇文章能对大家有所启发，欢迎留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005562781e8991b448d312c