npm 包 mori-preview 使用教程

什么是 npm 包

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

什么是 mori-preview

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

安装 mori-preview

使用 npm 命令安装 mori-preview：

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

使用 mori-preview

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

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

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

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

在 JavaScript 代码中调用 mori-preview：

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

其中 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

阅读全文

猜你喜欢

  • npm 包 dynamodb-csv-export 使用教程

    DynamoDB 是一个 NoSQL 数据库，它提供了快速和灵活的方式来存储和检索数据，而且它具有高可扩展性和可靠性。 但是，当我们需要将 DynamoDB 中的数据导出到 CSV 文件中时，它并不提...

    2 年前
  • npm包 tiny-jsonp使用教程

    在前端开发中，经常需要与后端进行数据交互，而 JSONP 是一种跨域数据交互的方式。然而，原生的 JSONP 存在一些不便之处，如缺乏错误处理和回调超时机制等。这时候，一个名叫 tiny-jsonp ...

    2 年前
  • npm 包 d3sho 使用教程

    在前端开发中，数据可视化是一个常见且非常重要的任务。而 d3.js 这个 JavaScript 数据可视化库可以帮助我们轻松地创建各种类型的图表和数据可视化呈现。 在 d3.js 的基础上，有一款名为...

    2 年前
  • npm 包 neutrino-middleware-progress 使用教程

    在前端开发过程中，我们经常需要使用 npm 包来扩展自己的项目。npm 是一个非常强大的工具，它可以让我们很容易地发现和使用第三方模块。在本文中，我将介绍如何使用一个名为 neutrino-middl...

    2 年前
  • npm 包 @tiagoantao/pyes6 使用教程

    前言 在现代前端开发中，使用 npm 包已经成为日常工作的重要一部分。而在寻找合适的 npm 包时，我们会发现一些非常有用的 npm 包，他们能够简化我们的开发方式，提高我们的开发效率。

    2 年前
  • 使用 npm 包 pair-distance 计算点之间距离

    介绍 pair-distance 是一款 npm 包，它可以用于计算平面上两点之间的距离。在前端开发中，我们可以利用它来优化页面中的位置计算或者实现一些可视化的功能。

    2 年前
  • npm 包 svg2base64-loader 使用教程

    前言 在前端开发中，SVG 图片经常被使用到，它可以缩放而不失真，同时也不会增加过多的网络请求。但如果要将 SVG 图像嵌入到 HTML、CSS 或 JavaScript 中，则需要将其编码为 Bas...

    2 年前
  • npm 包 vktoken 使用教程

    简介 vktoken 是一个用于获取 VK API Token 的 Node.js 包。VK（Vkontakte）是俄罗斯最大的社交网站。使用 vktoken，我们可以轻松地获得 VK 的 API T...

    2 年前
  • npm 包 @doublepi/dom-ready 使用教程

    在前端开发中，我们经常需要在文档加载和解析完成后执行一些操作。为了实现这个目的，我们可以使用 JavaScript 原生方法 window.onload 或者 DOMContentLoaded。

    2 年前
  • npm 包 es-sifter 使用教程

    前端开发中经常需要对数据进行筛选、排序等操作，而 es-sifter 此 npm 包可以方便地实现这些操作。本文将详细介绍 es-sifter 的使用方法，包括安装、引用、API 和示例代码等。

    2 年前
  • npm 包 karma-add-matchers 使用教程

    简介 Karma是一个测试运行工具，常用于前端自动化测试。而 karma-add-matchers 是一个 Karma 插件包，它允许您在测试中使用更多的自定义匹配器(matchers)。

    2 年前
  • npm 包 redux-universal-promise 使用教程

    在前端开发中，Redux 已成为状态管理的标配，而且随着 React Hooks 的出现，Redux Hooks 的使用也变得越来越普遍。但是，当你在项目中需要处理异步操作时，手写一大坨中间件或者 r...

    2 年前
  • npm 包 grid-container 使用教程

    在现代网页设计中，栅格系统是一个非常重要的概念。栅格系统可以帮助我们快速地布局网页，并让布局看起来更加整齐。在前端开发中，有很多优秀的栅格系统，比如Bootstrap、Foundation等，这些栅格...

    2 年前
  • npm 包 hubot-hot-gif-action 使用教程

    在目前互联网行业中，机器人已经成为了一种很重要的存在，它们能够减轻人们的工作负担，增强员工的工作效率，那么在机器人中最常用的就是 Hubot 机器人，而其中的一个 npm 包——hubot-hot-g...

    2 年前
  • npm 包 data-flow-task 使用教程

    在前端开发中，数据流处理是非常常见的任务，而 npm 包 data-flow-task 能够帮助我们更加高效地处理数据流。本文将对该 npm 包进行详细介绍，并提供使用教程和示例代码。

    2 年前
  • npm 包 mb-bson 使用教程

    JavaScript 是一种流行的语言，广泛应用于 Web 开发、后端开发以及移动端开发。在前端中， npm 是一个最常用的工具，用于管理项目依赖以及发布自己开发的包。

    2 年前
  • npm 包 rn-heading 使用教程

    在 React Native 开发中，很多时候需要对文本进行样式控制和内容分类，这时候就需要用到标题组件。在这篇文章中，我将会介绍如何使用 rn-heading 这个 npm 包来实现标题样式控制。

    2 年前
  • npm 包 angular-bootstrap-fileinput 使用教程

    什么是 angular-bootstrap-fileinput angular-bootstrap-fileinput 是一个基于 Angular 和 Bootstrap 的文件上传插件。

    2 年前
  • npm 包 get-uri-tftp 使用教程

    在前端开发过程中，我们可能会遇到需要使用 tftp 进行文件传输的情况。get-uri-tftp 是一个 npm 包，可以帮助我们在代码中实现对 tftp 协议的处理。

    2 年前
  • npm 包 any-env 使用教程

    在进行前端开发时，我们经常需要在不同的环境中测试我们的代码，比如本地开发环境、测试环境、生产环境等。这些环境可能会有不同的配置参数，如 API 地址、端口号等。为了方便地管理这些参数，我们可以使用 n...

    2 年前

相关推荐

    暂无文章