在 Web 前端开发中，我们经常需要将 Markdown 格式的文本展示出来。在实现这个功能的时候，使用一个高效、易用的工具，是提高开发速度的一个不错选择。而在此领域，npm 包 @npm-polymer/marked-element 则是一个备受欢迎的选择。
什么是 @npm-polymer/marked-element
@npm-polymer/marked-element 是一个基于 Polymer 库开发的 npm 包，它可以让开发者轻松在网页中展示 Markdown 格式的文本。该包支持自定义样式和特性，并且拥有很多有用的配置选项。
安装
在使用该包之前，必须先安装它。可以通过以下命令在项目中安装 @npm-polymer/marked-element：
npm install @npm-polymer/marked-element --save
安装完成后，可以通过以下方式在项目中引入：
import '@npm-polymer/marked-element';
基本使用
以下是一个简单的示例代码，演示了如何使用 @npm-polymer/marked-element 在页面中展示 Markdown 格式的文本：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
----------------
---- ---------------------------
------- -------------------- ----------------
- ------
----------
--------
---------
-----------------
------- ------------- ------------------------
-------
-------可以看到，上述代码中包含了一个 marked-element 元素。其中，文本的 Markdown 格式内容放在了 <script> 标签中，而该元素会自动将其转化为 HTML。展示出来的结果会显示在标签为 markdown-html 的 <div> 中。整个过程非常简单。
配置选项
除了基本的用法，@npm-polymer/marked-element 还支持许多有用的配置选项。以下是一些常用的配置示例：
-- -------------------- ---- -------
---------------
------
---
--------
-----
---------
------------------- ----
------------------ ---------
--------------------- ---------------------- ---------------
---- ---------------------------
---- ------------------------------
-----------------其中，各项配置的含义和说明如下：
breaks：表示支持 GFM 的换行符。如果该选项为 true，则可以通过在行尾加上双空格来进行换行。gfm：表示启用 GitHub Flavored Markdown（GFM）支持。如果该选项为 true，则会在文本中识别特殊的注释、链接、表格等。sanitize：表示启用过滤器，防止 XSS 攻击。如果该选项为 true，并且在 Markdown 中存在不安全的内容，则会被自动过滤掉。emoji：表示启用 emoji 支持。如果该选项为 true，则会自动将文本中的 emoji 表情符号替换为对应的图片。highlight：表示启用代码语法高亮。如果该选项为 true，则会对 Markdown 中的代码块进行语法高亮。href-schemes：表示允许访问的链接协议，可以是一个字符串，也可以是一个数组。默认只允许 http 和 https 协议。markdown：表示 Markdown 格式的文本内容，可以通过该选项直接设置。style：表示该元素的样式表，可以直接设置样式。
除了上述选项，该包还支持许多其他有用的配置，例如：
autolinkunderlinestriketablesdeflistfootnotesmathmermaidprism
使用这些配置选项，可以轻松地实现如表格、注脚、公式、流程图等更高级的功能。
总结
通过本文，我们学习了如何在前端网页中展示 Markdown 格式的文本。@npm-polymer/marked-element 是一个通用、高效的工具，方便开发者在不同的场景中使用。通过充分掌握该包的用法和配置选项，并结合实际开发需求，可以优化开发流程、提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb5e