什么是 @hellstad/marked
@hellstad/marked 是一个能够将 Markdown 文本渲染为 HTML 的 JavaScript 库，它基于 markdown.js 和 Prism.js 实现。相比普通的 markdown.js，@hellstad/marked 具备更多的语言支持和代码高亮功能。
安装
你可以使用 npm 进行安装：
npm install @hellstad/marked --save
基本使用
引入 @hellstad/marked：
import marked from "@hellstad/marked";
使用 marked 渲染 Markdown 文本：
const markdown = "# This is a title"; const html = marked(markdown);
配置
@hellstad/marked 的配置分为两部分：
- markdown.js 的配置
- Prism.js 的配置
这里使用的是 markdown.js 的配置，具体配置项可以参考 markdown.js 的文档。
-- -------------------- ---- -------
-------------------
--------- --- ------------------
---------- -------- ------ ----- -
------ --------------------- ---------------------- ------
--
----------- ------------
--------- ------
---- -----
------- ------
--------- ------
----------- -----
------------ ------
------ ------
---Prism.js 的配置可以在引入时进行配置，如下：
-- -------------------- ---- ------- ------ ----- ---- ---------- ------ ----------------------------------- ------ ------------------------------------ ------ ------------------------------------------ ------ ------------------------------------ ------ -------------------------------------- ------ ----------------------------------- ------ ----------------------------------- ------ ------------------------------------------
这里只给出示例，具体的语言支持和主题可以根据项目需求进行选择。
示例
下面是一个使用了配置项和 Prism.js 语言高亮的示例：
-- -------------------- ---- -------
------ ------ ---- -------------------
------ ----- ---- ----------
------ -----------------------------------
------ ------------------------------------
------ ------------------------------------------
------ ------------------------------------
------ --------------------------------------
------ -----------------------------------
------ -----------------------------------
------ ------------------------------------------
-------------------
--------- --- ------------------
---------- -------- ------ ----- -
------ --------------------- ---------------------- ------
--
----------- ------------
--------- ------
---- -----
------- ------
--------- ------
----------- -----
------------ ------
------ ------
---
----- -------- - -
- ---------------- ----
----------------
------ ------ ---- -------------------
------ ----- ---- ----------
------ -----------------------------------
------ ------------------------------------
------ ------------------------------------------
------ ------------------------------------
------ --------------------------------------
------ -----------------------------------
------ -----------------------------------
------ ------------------------------------------
-------------------
--------- --- ------------------
---------- -------- ------ ----- -
------ --------------------- ---------------------- ------
--
----------- ------------
--------- ------
---- -----
------- ------
--------- ------
----------- -----
------------ ------
------ ------
---
----- -------- - -- ---- -- - -------
----- ---- - -----------------
------------------
------
-- --
----- --- -----
----------
--- ------- ---------------- ------
------
-- ----
-- -----------------
----------------
------ ------ ---- -------------------
------
-- ------ -- -------- ---
----------------
----- -------- - -- ---- -- - -------
----- ---- - -----------------
------
--
----- ---- - -----------------
------------------输出结果：
-- -------------------- ---- -------
-------------------- ---------
---------- ---------------------------------- ------ ---- -----------------------------
------ ----- ---- --------------------
------ ---------------------------------------------
------ ----------------------------------------------
------ ----------------------------------------------------
------ ----------------------------------------------
------ ------------------------------------------------
------ ---------------------------------------------
------ ---------------------------------------------
------ ----------------------------------------------------
-------------------
--------- --- ------------------
---------- -------- ------ ----- -
------ --------------------- ---------------------- ------
--
----------- ----------------------
--------- ------
---- -----
------- ------
--------- ------
----------- -----
------------ ------
------ ------
---
----- -------- - ------- ---- -- - ------------
----- ---- - -----------------
------------------
-------------
-----------
---------- ------------------------- ------- ---------------- ------
-------------
-------------
---------- --------------------------------- -------- - ------- ---- -- - ------------
----- ---- - -----------------
-------------小结
本文介绍了 @hellstad/marked 的基本使用和配置方法，同时给出了示例代码。也可通过查看源码来进行更深入的学习和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552c481e8991b448d0291