npm 包 mdium 使用教程

什么是 mdium

mdium 是一个用于在 Markdown 中渲染数学公式的 npm 包,它使用 KaTeX 渲染引擎进行渲染,并支持能够在 Markdown 中插入的大多数 LaTeX 命令。

安装

安装 mdium 包非常简单,只需要在 cmd 或终端中输入以下指令即可:

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

使用

在需要在页面中展示渲染公式的地方,我们可以使用 mdium(string) 函数,它接受一个字符串类型的 Markdown,返回一个包含渲染后公式的字符串。

下面是一个使用 mdium 渲染公式的示例:

  1. 使用 node.js 编写一段脚本,命名为 test.js
----- ----- - -----------------

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

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

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

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

----------------------
  1. 打开命令行或终端,切换到项目根目录下,执行以下命令:
- ---- -------

控制台将输出以下结果:

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

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

其中 <div> 标签和 <p> 标签是 mdium 渲染的公式包裹的 HTML 标签。

支持的命令

mdium 支持几乎所有在 LaTeX 中使用的命令,这里列出一些较为常用的命令:

  • $$ 直接插入 LaTeX 公式
  • $ 将 LaTeX 公式嵌入到文本中
  • \\frac{a}{b} 向上分数线
  • \\sqrt[a]{b} 方根符号
  • \\vec{a} 向量符号
  • \\sum 累加符号
  • \\prod 累乘符号
  • \\int 积分符号

更多命令可以查看 KaTeX 官方文档。

注意事项

由于 KaTeX 渲染引擎是在客户端上渲染公式的,因此 mdium 只适用于在浏览器端和 Electron 之类的客户端应用程序中使用,并不适用于 Node.js 端的渲染。

结语

mdium 是一个非常方便且易于使用的 npm 包,它为我们在 Markdown 中渲染数学公式带来了非常大的便利性。在项目中,只需要简单地导入这个包,就可以很容易地展示对美观而又详尽的数学公式了。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600671d730d0927023822e3a


猜你喜欢

  • npm 包 cellular-automata-patterns 使用教程

    在前端开发中,我们经常需要使用动态的背景图案来美化页面,比如格子背景、图案背景等。而 npm 包 cellular-automata-patterns 可以帮助我们在页面中生成多种样式的图案背景。

    4 年前
  • npm 包 bronze 使用教程

    在前端开发中,npm 是一个非常重要的工具,它提供了海量的开源包便于我们使用。其中,bronze 是一个非常有用的 npm 包,下面我们来详细讲述一下它的使用教程。

    4 年前
  • npm 包 sql-match 使用教程

    在前端开发中,处理 SQL 语句是一项非常常见的任务。在 JavaScript 中,可以使用 npm 包 sql-match 来方便地处理 SQL 语句匹配和过滤。

    4 年前
  • npm 包 author-credit-postinstall 使用教程

    在开发前端项目时,我们常常需要依赖各种第三方库和框架。这些依赖通常通过 npm 进行管理。但是在使用这些依赖包时,我们可能会忽略掉它们的作者们的贡献。为了向作者们表示尊重和感谢,我们可以使用 npm ...

    4 年前
  • npm 包 any-match 使用教程

    在前端开发中,我们会用到各种各样的 npm 包来提高开发效率和质量。今天我们要介绍的是 any-match 这个 npm 包,它可以帮助我们快速和方便地进行字符串通配符匹配。

    4 年前
  • npm 包 @rangy/core 使用教程

    在前端开发的过程中,我们经常需要对文本进行处理、选中、高亮等操作。这时候,@rangy/core 这个 npm 包就可以派上用场了。它是一个功能强大的文本选区操作库,可以用于实现复杂的文本选区操作,例...

    4 年前
  • npm 包 @rangy/serializer 使用教程

    在前端开发中,许多时候需要对 HTML 文本进行处理和操作,而在实际场景中我们常常需要对 HTML 进行序列化和反序列化,方便我们在各种应用中使用和传输。这时,@rangy/serializer 就是...

    4 年前
  • NPM 包:react-native-select-option 使用教程

    简介 react-native-select-option 是一个用于 React Native 开发的下拉选择器库,它可以帮助你快速实现可定制化的下拉选择器组件。

    4 年前
  • npm 包 marble-dropdown 使用教程

    前言 前端开发中,经常使用各种 npm 包来帮助我们快速开发。其中,marble-dropdown 是一个非常有用的下拉菜单 npm 包,可以快速实现下拉菜单效果。

    4 年前
  • npm 包 tables 使用教程

    在前端开发中,我们时常需要对数据进行表格化展示。为了有效地处理数据并展现它们,我们需要在 HTML 页面中创建表格。然而,手动创建表格费时且繁琐,而且在数据量多的情况下,这种方式更是无法承受。

    4 年前
  • npm 包 vue-vtree 使用教程

    在前端开发过程中,开发者经常需要使用复杂的树型结构。但是,手工构建一个树结构非常困难,也容易出错。因此,在这篇文章中,我们将介绍如何使用 npm 包 vue-vtree 来构建一个树型结构。

    4 年前
  • npm 包 machinepack-github 使用教程

    前言 在前端领域,我们经常需要进行与 GitHub API 相关的操作,例如获取仓库信息、创建 issue 等。但是,直接使用 GitHub API 进行编程会比较麻烦,需要自己处理请求、响应等细节。

    4 年前
  • npm 包 mice.js 使用教程

    随着前端开发的发展,前端工具越来越多。而 npm 是现在最常用的一种包管理工具。mice.js 是一个小而美的 javascript 动画库,专注于鼠标交互动画。它提供了丰富的交互效果,比如鼠标追踪、...

    4 年前
  • npm 包 @skantus/eslint-plugin-config 使用教程

    在前端开发中,我们经常会用到 ESLint 工具来保证代码的质量和风格一致性。而 @skantus/eslint-plugin-config 就是一个可以帮助我们快速配置正确的 ESLint 规则的 ...

    4 年前
  • npm 包 @rangy/highlighter 使用教程

    简介 @rangy/highlighter 是 Rangy 库的一部分,它用于在 HTML 页面上添加文本高亮/标记。 安装 使用 npm 安装: --- ------- --------------...

    4 年前
  • npm 包 ketrics-ui 使用教程

    前言 在前端开发中,我们经常要使用各种 UI 框架来优化页面的展示效果,提高用户体验。而 ketrics-ui 就是一个优秀的 UI 框架,它提供了许多常用组件和工具,可以大大简化开发者的工作量。

    4 年前
  • npm 包 @rangy/selectionsaverestore 的使用教程

    前言 在前端开发中,我们经常需要处理用户在浏览器中的选中文本。虽然浏览器提供了一些默认的 API,但是功能有限,我们需要借助一些第三方的库,在此推荐一款实用的 npm 包 @rangy/selecti...

    4 年前
  • npm 包 generator-geopost 使用教程

    generator-geopost 是一个可快速生成地理位置数据的 Node.js 模块。该模块为数据分析师、GIS 工程师以及其他需要大量地理位置数据的人员提供了便利。

    4 年前
  • npm 包 sample-plugin-capacitor 使用教程

    前言 如今,在前端开发中,npm 是一个极其重要的工具,可以帮助我们轻松管理第三方库与组件。其中,sample-plugin-capacitor 就是一个常用的 npm 包之一,它是一个专为 capa...

    4 年前
  • npm 包 eurus-comments 使用教程

    欢迎来到本文,我们将介绍如何使用 npm 包 eurus-comments。 什么是 eurus-comments eurus-comments 是一个轻量级的评论系统 npm 包,用于快速集成到任何...

    4 年前

相关推荐

    暂无文章