前言
在我们开发项目的过程中，总会遇到一些需要使用到外部第三方库的情况。由于现代化的前端技术生态不断发展，前端工具库也是愈加丰富，这里要为大家介绍的就是一款 npm 包 adf-widget-github，它可以用于在文本编辑器中插入 GitHub 代码块和 Gist 代码块。
安装和使用
安装
使用命令行工具安装 npm 包 adf-widget-github：
npm install adf-widget-github --save
使用
展示 GitHub 代码块
在 React 项目中使用 adf-widget-github 可以很方便地创建 GitHub 代码块，具体步骤如下：
- 为组件引入 npm 包：
import GithubWidget from 'adf-widget-github';
- 在组件代码中使用
GithubWidget组件，传递repo（存储库名称）和path（文件相对路径）作为参数：
<GithubWidget repo="mdn/webdocs" path="web/html"></GithubWidget>
- 在文本编辑器中插入该组件，即可预览到 GitHub 代码块。
展示 Gist 代码块
同样地，在 React 项目中使用 adf-widget-github 可以很方便地创建 Gist 代码块，具体步骤如下：
- 为组件引入 npm 包：
import GistWidget from 'adf-widget-github';
- 在组件代码中使用
GistWidget组件，传递gist（Gist 的 ID）作为参数：
<GistWidget gist="my_gist_id"></GistWidget>
- 在文本编辑器中插入该组件，即可预览到 Gist 代码块。
指导意义
adf-widget-github 是一款十分实用的前端工具库，在需要在文本编辑器中插入 GitHub 代码块和 Gist 代码块时有很大的用处。同时，在使用过程中，我们需要注意以下几点：
- 当使用 GitHub 代码块时，我们需要根据传递的
repo和path参数来确定代码资源文件的存储仓库和相对路径。 - 当使用 Gist 代码块时，我们需要在 GitHub 上创建自己的 Gist，并根据其 ID 来确定代码块。
我们需要在项目开发的过程中合理使用 adf-widget-github，它能够大大提高我们的开发效率。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- --------------------
------ ---------- ---- --------------------
-------- ----- -
------ -
-----
------------- ------------------ -------------------------------
----------- -------------------------------
------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005551381e8991b448d247f