npm 包 adf-widget-github 使用教程

前言

在我们开发项目的过程中，总会遇到一些需要使用到外部第三方库的情况。由于现代化的前端技术生态不断发展，前端工具库也是愈加丰富，这里要为大家介绍的就是一款 npm 包 adf-widget-github，它可以用于在文本编辑器中插入 GitHub 代码块和 Gist 代码块。

安装和使用

安装

使用命令行工具安装 npm 包 adf-widget-github：

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

使用

展示 GitHub 代码块

在 React 项目中使用 adf-widget-github 可以很方便地创建 GitHub 代码块，具体步骤如下：

1. 为组件引入 npm 包：

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

1. 在组件代码中使用 GithubWidget 组件，传递 repo（存储库名称）和 path（文件相对路径）作为参数：

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

1. 在文本编辑器中插入该组件，即可预览到 GitHub 代码块。

展示 Gist 代码块

同样地，在 React 项目中使用 adf-widget-github 可以很方便地创建 Gist 代码块，具体步骤如下：

1. 为组件引入 npm 包：

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

1. 在组件代码中使用 GistWidget 组件，传递 gist（Gist 的 ID）作为参数：

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

1. 在文本编辑器中插入该组件，即可预览到 Gist 代码块。

指导意义

adf-widget-github 是一款十分实用的前端工具库，在需要在文本编辑器中插入 GitHub 代码块和 Gist 代码块时有很大的用处。同时，在使用过程中，我们需要注意以下几点：

1. 当使用 GitHub 代码块时，我们需要根据传递的 repo 和 path 参数来确定代码资源文件的存储仓库和相对路径。
2. 当使用 Gist 代码块时，我们需要在 GitHub 上创建自己的 Gist，并根据其 ID 来确定代码块。

我们需要在项目开发的过程中合理使用 adf-widget-github，它能够大大提高我们的开发效率。

示例代码

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

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

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

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