npm 包 mori-preview 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 npm 包

npm 是 Node.js 包管理器，大量的前端技术工具和库都可以在 npm 上下载和安装。使用 npm 包可以方便地扩展自己的项目，提高开发效率和代码质量。

什么是 mori-preview

mori-preview 是一个轻量级的 npm 包，用于在浏览器中预览 Markdown 文档。它提供了一些自定义配置选项，可以方便地适配自己的 Markdown 文档样式。

安装 mori-preview

使用 npm 命令安装 mori-preview：

npm install mori-preview --save-dev

使用 mori-preview

在项目中引入 mori-preview 的样式和脚本文件：

<link rel="stylesheet" href="node_modules/mori-preview/mori-preview.min.css">
<script src="node_modules/mori-preview/mori-preview.min.js"></script>

然后在页面中创建一个容器元素，用于嵌入 Markdown 文档：

<div id="markdown-container"></div>

在 JavaScript 代码中调用 mori-preview：

var mdText = '# Hello World';
var previewer = new MoriPreview({
  el: '#markdown-container',
  markdown: mdText
});

其中 el 选项指定容器元素的 ID，markdown 选项是待预览的 Markdown 文本。调用 new MoriPreview() 创建一个 mori-preview 实例，会自动将 Markdown 文本转换成 HTML 并渲染到指定容器中。

mori-preview 配置选项

Mori-preview 提供了一些自定义配置选项，可以根据实际需求灵活配置。以下是常用的配置选项：

el：（必选）容器元素的 ID
markdown：（必选）待预览的 Markdown 文本
toolbar：是否开启工具栏，默认为 true
scrollsync：是否开启滚动同步，默认为 false
linenumber：是否显示行号，默认为 false
monospace：是否使用等宽字体，默认为 false
gfm：是否启用 GitHub 风格的 Markdown 扩展，默认为 true
toc：是否显示目录，默认为 false

使用方式如下：

-- -------------------- ---- -------
--- --------- - --- -------------
  --- ----------------------
  --------- -------
  -------- -----
  ----------- -----
  ----------- -----
  ---------- -----
  ---- -----
  ---- ----
---

示例代码

下面是一个完整的示例代码，可以直接运行查看效果：

-- -------------------- ---- -------
--------- -----
----- -------------
------
  ----- ----------------
  ---------------------------
  ----- ---------------- ------------------------------------------------------
-------
------
  ---- ------------------------------
  ------- -------------------------------------------------------------
  --------
    --- ------ - -- ----- ----------- ---------------------------- ------- --- ---------------------------------------- ----------------
    --- --------- - --- -------------
      --- ----------------------
      --------- -------
      -------- -----
      ----------- -----
      ----------- -----
      ---------- -----
      ---- -----
      ---- ----
    ---
  ---------
-------
-------

这个例子中，mori-preview 会在页面中渲染一个 Markdown 文本，每一行都带有行号和代码高亮，同时显示工具栏和目录。您可以根据自己的需要，灵活配置 mori-preview 的选项，方便地预览和编辑 Markdown 文档。

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