npm 包 gist-embedder 使用教程：-JavaScript中文网-JavaScript教程资源分享门户

简介

如果您是前端开发人员，您肯定知道 GitHub Gist 的威力。您可以在 GitHub Gist 上创建代码片段，并与其他人共享，但是如果要在文章中引用它们，Gist 在文章中嵌入的代码不是很好看，难以阅读。因此，我们可以使用 npm 包 gist-embedder，简化在文章中嵌入 Gist 的方式。

安装

使用 npm 安装 gist-embedder 十分简单：

npm install gist-embedder --save

示例代码

以下是如何将 Gist 嵌入到您的应用程序中的示例代码：

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

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

参数说明

url

这是最重要的参数。它是一个字符串类型的 URL，指向您想嵌入的 Gist。

file

您可以选择单个 Gist 文件嵌入到您的应用程序中。文件 ID 是文件的 URL 的一部分，是以句点开头的最后一部分。例如，对于以下 URL https://gist.github.com/username/1234abcd5678efghijklmnopqrst，该文件的 ID 是 5678efghijklmnopqrst。

loggedInUser

如果您想查看嵌入的 Gist，您必须登录到 GitHub 帐户。在未登录的情况下，您将看到一条警告消息。您可以使用此参数来指定要登录的 GitHub 帐户的用户名。

stylesheet

默认情况下，嵌入的 Gist 会继承页面的样式。您可以使用此参数来指定指向 CSS 样式表的 URL。

callback

默认情况下，当 Gist 嵌入到您的应用程序中时，没有任何反馈。但是，您可以在嵌入 Gist 之后执行一些操作。您可以使用此参数来指定回调函数，在 Gist 嵌入后运行。

深度分析

要深入了解嵌入 Gist 的原理，让我们来查看 gist-embedder 的源代码。核心代码位于 gist-embedder.js 文件中，可以在 GitHub 上找到。

这个包的核心代码是 gistEmbed（）函数，它带有 URL 或 ID 参数，然后执行上下文化操作来解析 Gist 文件的内容，并将其添加到嵌入 Gist 的 div 中。

function gistEmbed(url, id, callback, stylesheet, loggedInUser) {...}

要使用 gist-embedder 在您的应用程序中嵌入 Gist，只需要在 HTML 文件头部中包含两个 JavaScript 文件的链接，并在HTML文件的 body标签内部添加一个div标签，即可实现Gist的嵌入，代码示例如下。

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

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

指导意义

Github 是目前全球最大的极客社区，而 Gist 允许我们以一种简单的方式分享和发布代码，那么如何在文章中嵌入自己的代码方便阅读呢？这个时候，npm包 gist-embedder 就出现了，实现了嵌入 Gist 代码的目的。

保持自己的阅读习惯是极其重要的，因此，如果您是前端开发人员且经常在博客或教程中分享代码片段，那么 gist-embedder 可以使您的代码更加优美、易于阅读和易于共享。

此外，使用诸如这样的开源包来引入新的实用程序可以使您的项目更具可维护性，而不需要花费额外的时间和精力来构建自己的解决方案，因此 npm 包的重要性日益突显。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055ae381e8991b448d8892

npm 包 gist-embedder 使用教程：

简介

安装