npm 包 @gerhobbelt/markdown-it-sup 使用教程

前言

在前端开发中，我们常常需要在网页中呈现上标文本。通常的实现方式是使用 <sup> 标签，但如果想要添加超链接则需要借助 JavaScript 实现。而 @gerhobbelt/markdown-it-sup 包提供了一种更为便捷的方式，让我们可以在 Markdown 语法中直接插入上标文本，并且可以直接添加超链接、样式等。

安装

使用 npm 进行安装：

npm install @gerhobbelt/markdown-it-sup --save

使用

在需要使用上标的地方，我们可以使用类似下面的 Markdown 语法：

H~2~O is the formula for water.

其中 ~ 符号表示是上标。

在代码中引入 @gerhobbelt/markdown-it-sup：

const markdownIt = require('markdown-it');
const markdownItSup = require('@gerhobbelt/markdown-it-sup');

const md = markdownIt().use(markdownItSup);
const result = md.render('H~2~O is the formula for water.');

console.log(result);

打印结果为：

<p>H<sup>2</sup>O is the formula for water.</p>

可以看到，@gerhobbelt/markdown-it-sup 可以将 Markdown 语法转化为 HTML 标签，并将 ~ 符号内的内容转化为上标。

进阶使用

超链接

在上标内使用超链接是一个很常见的需求。在 @gerhobbelt/markdown-it-sup 中，我们可以直接使用下面的 Markdown 语法：

This is the footnote.^[url].

其中 ^[url] 表示超链接。

在代码中引入 @gerhobbelt/markdown-it-anchor：

const markdownIt = require('markdown-it');
const markdownItSup = require('@gerhobbelt/markdown-it-sup');

const md = markdownIt().use(markdownItSup);
const result = md.render('This is the footnote.^[https://en.wikipedia.org/wiki/Footnote]');

console.log(result);

打印结果为：

<p>This is the footnote.<sup><a href="https://en.wikipedia.org/wiki/Footnote">url</a></sup></p>

可以看到，@gerhobbelt/markdown-it-sup 可以正确地将超链接添加到上标内部。

样式

@gerhobbelt/markdown-it-sup 还支持使用 CSS 对上标进行样式设置。例如，我们可以在 HTML 中添加下面的样式：

<style>
sup {
    color: red;
}
</style>

这个样式会将上标文本的颜色设置为红色。

总结

@gerhobbelt/markdown-it-sup 提供了一种便捷的方式让我们在 Markdown 语法中插入上标文本。它还支持超链接、样式等进阶功能，可以在实际开发中很好地满足需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c870403f2923b035bd91