ultramarked 是一个轻量级、快速且易于使用的 Markdown 解析器和渲染器，适用于前端开发工作。它支持常见的 Markdown 语法，同时还扩展了一些非常有用的功能，例如 hljs（代码高亮）和 katex（数学公式渲染）。本文将介绍如何在前端项目中使用 ultramarked。
安装
首先，我们需要在项目中安装 ultramarked。使用 npm 安装很简单，只需要在终端中运行以下命令：
npm install ultramarked
然后，我们可以在代码中引入并使用 ultramarked：
import ultramarked from 'ultramarked'; const markdown = '# Hello, ultramarked!'; const convertedHtml = ultramarked(markdown); console.log(convertedHtml);
基本用法
ultramarked 是基于 marked 开发的，它将 Markdown 源代码解析成 HTML 元素，并支持以下选项：
-- -------------------- ---- ------- - -- ------ ---- ------ ---- ----- -- ---- ------ -------- --------------- ------- ----- -- ---- --- -- ------- ------ -- -------------- --------- ------ -- ------- ---- ------ ----------- ----- -- ------------- ---- ------------ ------ -- -------------------- ----------- ---- -- ----------- ------------ -- --------- --- ---- ------------- --- -- -------- --- ---- --------- --- ----------- -- ------- ------ ------ -- ---- ----- -- --
比如我们可以打开 GFM 的支持，这样就能够渲染出表格、任务列表等语法：
-- -------------------- ---- ------- ------ ----------- ---- -------------- ----- -------- - - - ----------- - ----------- --- ---- -------- ------ --- -------- --- --- -------- -- -------- - --------- --- ---- ----- -- -------- --------- - ------------ ---------- ------ --- ---------- ------ - --------------- --- ------- -- -- ----- - --------- ---- --- --- -------- -- ------- --------- ---------- - ------- - ------- - - ------- - ------- - - ------ ------ - - - - ---- ------- ------ - - - - ------- ---- --- - - - - ---- ----- ------- ------- - - - -- ----- ------------- - --------------------- - ---- ----- --- ---------------------------
拓展功能
ultramarked 还支持很多拓展功能，下面介绍两个比较实用的：
代码高亮
如果我们想要实现代码高亮，就需要使用到 hljs，一个支持多种编程语言的代码高亮库。使用 hljs 很简单，只需要在项目中安装并引入即可：
npm install hljs
-- -------------------- ---- -------
------ ----------- ---- --------------
------ ---- ---- -------
----------------------------------- --------------------------------------------------
---------------------------- -------------------------------------------
----------------------------- -------------------------------------------
----- -------- - -
- -----------
- ----------- --- ---- -------- ------ --- -------- --- --- --------
-- --------
- --------- --- ---- ----- -- -------- ---------
- ------------ ---------- ------ --- ---------- ------
- --------------- --- ------- -- -- -----
- --------- ---- --- --- ---------- -- ------- --------- ----------
----------------
------------------- ---------
------
----------
---- ---------------
------
---------
---- -
---------- -----
-
------
--
----- ------------- - --------------------- -
---- -----
---------- ------ ----- -- -
------ ---- - -------------------- ----------- - -------------------------------
--
---
---------------------------数学公式
如果我们需要在文本中插入数学公式，就需要使用 katex，一个支持 LaTeX 语法的数学公式渲染库。使用 katex 也很简单，只需要在项目中安装并引入即可：
npm install katex
-- -------------------- ---- -------
------ ----------- ---- --------------
------ ----- ---- --------
----- -------- - -
- -----------
- ----------- --- ---- -------- ------ --- -------- --- --- --------
-- --------
- --------- --- ---- ----- -- -------- ---------
- ------------ ---------- ------ --- ---------- ------
- --------------- --- ------- -- -- -----
- --------- ---- --- --- ---------- -- ------- --------- ----------
--
------------ - ------------ - ------------
--
--
----- ------------- - --------------------- -
---- -----
--------- --- ----------------------
-- ----------
-- ------- ----- -------- ---- ---
----- ------- -- -
------ --------------------------- -
------------- ------
---
--
---
---
---------------------------结语
本文介绍了 ultramarked 的基本用法以及如何使用 hljs 和 katex 进行代码高亮和数学公式渲染。了解了这些之后，我们就可以在前端项目中轻松地使用 ultramarked，提高 Markdown 的渲染效率和质量，为产品的交互带来更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74059