前言
在前端开发中，我们常常需要在网页中呈现上标文本。通常的实现方式是使用 <sup> 标签，但如果想要添加超链接则需要借助 JavaScript 实现。而 @gerhobbelt/markdown-it-sup 包提供了一种更为便捷的方式，让我们可以在 Markdown 语法中直接插入上标文本，并且可以直接添加超链接、样式等。
安装
使用 npm 进行安装：
--- ------- --------------------------- ------
使用
在需要使用上标的地方，我们可以使用类似下面的 Markdown 语法：
----- -- --- ------- --- ------
其中 ~ 符号表示是上标。
在代码中引入 @gerhobbelt/markdown-it-sup：
----- ---------- - ----------------------- ----- ------------- - --------------------------------------- ----- -- - -------------------------------- ----- ------ - ---------------- -- --- ------- --- --------- --------------------
打印结果为：
----------------- -- --- ------- --- ----------
可以看到，@gerhobbelt/markdown-it-sup 可以将 Markdown 语法转化为 HTML 标签，并将 ~ 符号内的内容转化为上标。
进阶使用
超链接
在上标内使用超链接是一个很常见的需求。在 @gerhobbelt/markdown-it-sup 中，我们可以直接使用下面的 Markdown 语法：
---- -- --- ----------------
其中 ^[url] 表示超链接。
在代码中引入 @gerhobbelt/markdown-it-anchor：
----- ---------- - ----------------------- ----- ------------- - --------------------------------------- ----- -- - -------------------------------- ----- ------ - --------------- -- --- ----------------------------------------------------- --------------------
打印结果为：
------- -- --- ---------------- ---------------------------------------------------------------
可以看到，@gerhobbelt/markdown-it-sup 可以正确地将超链接添加到上标内部。
样式
@gerhobbelt/markdown-it-sup 还支持使用 CSS 对上标进行样式设置。例如，我们可以在 HTML 中添加下面的样式：
-------
--- -
------ ----
-
--------这个样式会将上标文本的颜色设置为红色。
总结
@gerhobbelt/markdown-it-sup 提供了一种便捷的方式让我们在 Markdown 语法中插入上标文本。它还支持超链接、样式等进阶功能，可以在实际开发中很好地满足需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f02c870403f2923b035bd91