npm 包 gatsby-remark-generic-extensions 使用教程

简介

在前端开发中，使用 Gatsby 时需要对 markdown 文件进行处理，如添加图片、链接等。而 gatsby-remark-generic-extensions 包就是用于扩展 markdown 的功能。

安装

首先需要安装 Gatsby 和 gatsby-transformer-remark 插件，以及 gatsby-remark-generic-extensions 包。

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

使用方法

在 Gatsby 配置文件 gatsby-config.js 中添加以下插件：

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

添加完插件后，markdown 文件可以使用以下语法：

  1. 添加 tooltip
----- ------------------- -------
  1. 添加脚注
---- -- - -------- -------- - ---------

----- ---- -- --- ---------
  1. 添加公式
--- ----------- ------- --- ---- - --- - -----

示例代码

tooltip 示例

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

解析后：

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

脚注示例

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

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

解析后：

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

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

公式示例

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

解析后：

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

总结

以上是 npm 包 gatsby-remark-generic-extensions 的使用教程，通过对 markdown 进行扩展可以方便地实现一些在原生 markdown 中不支持的功能。需要注意的是，使用过程中要避免过分依赖扩展，保持 markdown 的简洁性。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065b47c6eb7e50355dbf24

阅读全文

猜你喜欢

  • npm 包 bitcore-build-dinero 使用教程

    在前端开发中，我们经常会需要使用一些开源的第三方库和工具来完成项目的开发。其中，npm 是 Node.js 自带的包管理器，可以方便快捷地安装、管理和更新模块。在本文中，我们将介绍一个 npm 包 b...

    3 年前
  • npm 包 bitcore-lib-dinero 使用教程

    在前端开发中，我们经常需要使用数字货币相关的功能。 bitcore-lib-dinero 是一个基于 BitcoinJS 的 JavaScript 库，可以帮助我们轻松地实现比特币和类似数字货币的功能...

    3 年前
  • npm 包 react-mic-2 使用教程

    react-mic-2 是一个用于录制麦克风音频的 React 组件。它可以很方便地在网页上进行录音，支持各种自定义操作和配置，同时还附带了多种事件回调。 安装 在项目根目录下运行以下命令： --- ...

    3 年前
  • npm 包 shunfeng 使用教程

    什么是 shunfeng? shunfeng 是一个基于 Gulp 的前端自动化构建工具。它提供了许多常用的任务，如 LESS 编译、CSS 压缩、JS 压缩、图片优化等等，可以轻松地将前端工程化。

    3 年前
  • npm 包 banyan-react-tree 使用教程

    当我们需要在前端页面中展示大量的层级关系数据时，例如树形结构，banyan-react-tree 可以帮助我们快速地实现。 banyan-react-tree 是一个基于 React 的组件库，提供了...

    3 年前
  • npm 包 db-monitor 使用教程

    db-monitor 是一个在 Node.js 环境中监控数据库的 npm 包，能够实时监测 SQL 语句的执行情况以及慢查询的信息。本文将教你如何使用 db-monitor 并深入理解它的实现原理。

    3 年前
  • npm 包 ionic-tab-slider 使用教程

    介绍 ionic-tab-slider 是一个能够在 Ionic 框架中实现滑动选项卡效果的 npm 包。通过使用 ionic-tab-slider，我们可以方便地在 Ionic 应用中实现选项卡功能...

    3 年前
  • 使用 react-fullpage.js 开发网站全屏滚动

    介绍 react-fullpage.js 是一个 NPM 包，它是基于 FullPage.js 封装的 React 组件，用于实现网站全屏滚动效果的开源组件。它极大地简化了全屏滚动的开发，使开发者可以...

    3 年前
  • npm 包 menu-args 使用教程

    前端开发中，我们经常会遇到需要编写命令行工具的情况，而在编写命令行工具时，如何优雅地解析命令行参数，是我们所面临的一个重要问题。而 menu-args 就是一个可以帮助我们解决这个问题的 npm 包。

    3 年前
  • npm 包 merge-encore-manifest-files 使用教程

    介绍 在前端开发中，需要将多个 webpack 构建后的 manifest.json 合并为一个，使得在多个应用中共享一份公共的 manifest.json，这时候可以使用 npm 包 merge-e...

    3 年前
  • npm 包 transient-fixed-data-table 使用教程

    前言 在实际的前端开发中，数据表格是一种常用的数据展示方式。然而，很多时候数据表格的列数较多，而网页的宽度比较有限，这就需要对数据表格进行固定列或滚动的处理。常规的处理方式是使用 CSS 或 Java...

    3 年前
  • npm 包 gx-di 使用教程

    gx-di 是一个前端框架依赖注入库，它可以帮助我们实现依赖注入。依赖注入是一种设计模式，可以解决程序中的耦合问题。如果我们使用依赖注入，我们可以将不同部分之间的依赖关系分离开来，这样，我们就可以轻松...

    3 年前
  • npm 包 ice-engine 使用教程

    简介 在前端开发中，我们经常使用第三方库来提高开发效率和降低代码复杂度，其中 npm 是前端开发中非常重要的一个工具。npm 是 Node.js 的包管理器，可以用来搜索、安装、升级、卸载 Node....

    3 年前
  • npm 包 sounds-webpack-plugin 使用教程

    在前端开发中，我们经常需要在应用程序中播放音频效果。在 Webpack 中，我们可以使用 sounds-webpack-plugin 这个 npm 包来帮助我们实现这个目标。

    3 年前
  • npm 包 timetable-tags 使用教程

    如果需要在前端开发中实现时间表标签的展示，可以考虑使用 npm 包 timetable-tags。本文将具体介绍这个包的使用方法，包括其安装方法、主要 API 和示例代码，帮助读者更好地使用这个包。

    3 年前
  • npm 包 ttk-edf-app-role 使用教程

    ttk-edf-app-role 是一个针对前端开发的 npm 包，它提供了一系列用于角色权限管理的功能和组件，可以帮助开发者快速实现角色权限管理功能。在本文章中，我们将介绍如何使用 ttk-edf-...

    3 年前
  • npm包 vue-photo-carousel-preview 使用教程

    前言 在 Web 前端开发中，展示图片是经常会用到的场景。在这种情况下，我们可以使用 Carousel（图片轮播）组件来展示多张图片。Vue.js 是 JavaScript 的前端框架之一，提供了丰富...

    3 年前
  • npm 包 ubtour-tools 使用教程

    概述 ubtour-tools 是一个提供前端开发工具的 npm 包，包含了一些常用的工具方法。在前端开发过程中，借助 ubtour-tools 可以有效地提高开发效率和代码质量。

    3 年前
  • npm 包 @gulewei/scroller 使用教程

    在 Web 开发中，经常需要使用滚动条来控制页面内容的可视范围。@gulewei/scroller 是一个基于 React 的 npm 包，提供了一种简单易用的滚动条组件，可以方便地集成到你的 Rea...

    3 年前
  • npm包 did-universal-resolver-driver 使用教程

    近年来，区块链技术愈发受到关注，DID（Decentralized Identifiers）身份认证也逐渐走入人们视野。在DID中，DID Resovler 起着至关重要的作用。

    3 年前

相关推荐

    暂无文章