介绍
在前端开发中，我们经常需要解析和渲染 Markdown 文本。prmisder-markdown 是一个基于 markdown-it 开发的 npm 包，它提供了丰富的 Markdown 扩展和样式。本文将介绍如何使用 primer-markdown 来解析和渲染 Markdown 文本。
安装
通过 npm 安装：
npm install primer-markdown
使用
加载模块
在使用 primer-markdown 之前，我们需要先加载模块：
const PrimerMarkdown = require('primer-markdown');初始化
然后，我们需要创建一个 PrimerMarkdown 的实例：
const markdown = new PrimerMarkdown();
配置
如果需要配置 primer-markdown，我们可以传入一个配置对象：
const markdown = new PrimerMarkdown({
html: true,
linkify: true,
typographer: true,
breaks: true
});以上配置会打开 markdown-it 自带的一些扩展功能。
渲染
使用 render 方法可以将 Markdown 文本渲染成 HTML：
const markdownText = '# Hello, primer-markdown!'; const htmlText = markdown.render(markdownText); console.log(htmlText); // "<h1>Hello, primer-markdown!</h1>\n"
渲染选项
render 方法还可以接收一个用于渲染的选项对象：
const options = {
gfm: true,
breaks: true
};
const markdownText = 'Hello, **primer-markdown**!';
const htmlText = markdown.render(markdownText, options);
console.log(htmlText);
// "Hello, <strong>primer-markdown</strong>!\n"以上选项会打开 GitHub Flavored Markdown 的一些扩展功能。
插件
primer-markdown 还提供了一些插件，可以扩展 Markdown 的语法和样式。
emoji 插件
const emojiPlugin = require('@primer/markdown-it-emoji');
const markdown = new PrimerMarkdown().use(emojiPlugin);
const markdownText = 'Hello, :smile:';
const htmlText = markdown.render(markdownText);
console.log(htmlText);
// "Hello, <p>Hello, <img class="emoji" alt=":smile:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png" valign="bottom"></p>\n"task lists 插件
-- -------------------- ---- ------- ----- --------------- - ------------------------------------------ ----- -------- - --- -------------------------------------- ----- ------------ - - - --- -------- -- ------- - - - ------ -- ---- ------------ -- ----- -------- - ------------------------------ ---------------------- -- ---- ------------------------- ------------------------------- --------------------------------- ----------------- ------- --------- -------- -- ----------------- ------------------------------- --------------------------------- ----------------- --------- ------ -- ---- ---------------------------
代码块
primer-markdown 还提供了一些样式来美化代码块。使用以下的样式类可以实现不同的效果：
.highlight: 高亮样式；.line-numbers: 显示行号；.diff-highlight: 显示差异。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/github.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
<pre class="highlight line-numbers"><code class="language-javascript"> const greeting = 'Hello, primer-markdown!'; console.log(greeting); </code></pre>
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ---------------
----- ---------------- ----------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------
-------
------
---- ---------------
--------
----- -------------- - ---------------------------
----- ----------- - -------------------------------------
----- --------------- - ------------------------------------------
----- -------- - --- ----------------
----- -----
-------- -----
------------ -----
------- ----
-----------------------------------------
----- ------- - -
---- -----
------- ----
--
----- ------------ - -
- ---------------
- -------- ------- ---- ------
-- ------------
--------
--- ------- ---------------
------
-- -----
---
--
----- -------- - ----------------------------- ---------
----- --- - -------------------------------
------------- - ---------
------------------------------
---------
-------
-------总结
到这里，我们已经学习了 primer-markdown 的使用方法和一些扩展功能，包括插件和代码块。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3e74ffdbf7be33b2567170