深入前端开发领域，我们发现各种工具和框架层出不穷，而 npm 包作为一种十分流行的前端开发工具，能给我们带来巨大的便利。在本文中，我们将介绍 npm 包 @npm-polymer/marked，并提供详细的使用教程和示例代码。同学们可以通过本文的学习和实践，更好地理解和应用这个包。
简介
@npm-polymer/marked 是一个基于 marked 库的扩展，用于在 Polymer 应用程序中呈现 Markdown 格式的文本。它可以轻松地在 Polymer 网页应用程序中使用 Markdown，而不需要处理打包和导入。
安装
使用以下命令安装 @npm-polymer/marked：
npm install --save @npm-polymer/marked
使用
首先，你需要导入 @npm-polymer/marked 和 Polymer 库。
<!-- 导入库 --> <script src="./node_modules/@npm-polymer/marked/marked.js"></script> <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
接下来，你可以创建一个自定义元素来使用 @npm-polymer/marked。在该元素中使用 marked 函数，该函数将 markdown 格式的文本转换为 HTML。
-- -------------------- ---- -------
---- ---- ---
----------- -----------------
----------
---- -----------------------
-----------
--------
-- ---
------ - -------------- - ---- --------------------------------------
------ --------------------------------
----- ---------- ------- -------------- -
------ --- ---- - ------ -------------- -
------ --- ------------ -
------ -
--------- -
----- -------
------ ---
--------- ------------------
-
--
-
-------------------- -
-- - -- --- ---- --- --- -
---------------------------------------------------- - -----------
-
-
------------------------------------ ------------
---------
-------------在上述代码中，我们使用 Polymer 库创建了一个自定义元素 MyMarkdown，并定义了一个 markdown 属性。在属性变化时，我们调用 marked() 函数将其转换为 HTML 并将结果插入 DOM。
最后，在你的页面中使用自定义元素：
<my-markdown markdown="# Hello World!"></my-markdown>
这将在页面上呈现一个标题为 "Hello World!" 的 H1 标签。
深入学习
在使用 @npm-polymer/marked 后，你可以深入地学习 Markdown 的基础知识，包括：
- 标题：使用不同数量的 # 标记不同级别的标题。
- 段落：文本不使用任何标记即视为段落。
- 列表：使用 * 或 - 标记无序列表，数字和 . 标记有序列表。
- 链接：使用 链接文本 格式创建链接。
- 图片：使用
格式插入图片。 - 引用：使用 > 标记引用。
- 粗体和斜体：使用 ** 粗体或 * 斜体标记文本。
格式插入图片。示例代码
以下是一些示例代码，展示了如何使用各种 markdown 格式：
-- -------------------- ---- ------- ------------ ---------- - --- -- --- --- --- --- --- - ----- - - ----- - -- ----- - -- ----- - ---------------------------- -------------------------------------- - -- ------ ---- ----------------
结论
通过本文的学习和实践，您现在应该了解如何使用 @npm-polymer/marked，在 Polymer 应用程序中呈现 Markdown 格式的文本。我们提供了基础的使用教程和示例代码，并鼓励您进一步深入学习 Markdown 格式及其使用。好好练习，愉快学习！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb5c