简介
在Web开发中，我们常常需要与他人分享代码或者展示自己的代码。但是，有些语言或者格式的代码不容易直接在Web页面上展示。为此，有一种叫做gist的东西可以帮助我们将代码展示给他人查看。但是如果我们想将自己的代码与gist相结合，这时我们就需要用到一个名为gist-it的npm包。
gist-it是一种能够将任意语言的代码置于GitHub的gist中，并且以HTML格式在网页中显示出来的npm包。下面是安装与使用gist-it的详细教程。
安装
要使用gist-it，首先需要在本地使用npm来安装它。在终端中，输入以下命令：
npm install gist-it --save
这将会将gist-it包安装到node_modules文件夹中，并将其保存至package.json文件中的dependencies部分。
使用
使用gist-it，首先我们需要引入它。在html的head标签中添加以下代码：
<script src="node_modules/gist-it/dist/gist-it.js"></script>
接下来，我们需要配置一个gist-it的div。这个div的id属性必须唯一，并包含data-gist-id属性，这个属性应该指定gist的ID。下面是一个例子：
<div id="gist-container" data-gist-id="5c5ddead94152f67648710f00e763b2d"></div>
接下来，我们在JavaScript中定义:
var gistDiv = document.querySelector('#gist-container');
gistIt.render(gistDiv);最后一步，我们在终端中使用以下命令：
npm start
在浏览器中打开 http://localhost:8000/，就可以看到gist-it在页面中的效果了。
示例代码
下面是一个完整的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- ---------- ------- ---------------------------------------------------- ------- ------ ------------------ ---- ------------------- ------------------------------------------------------ -------- --- ------- - ------------------------------------------ ----------------------- --------- ------- -------
总结
gist-it可以方便地将代码以HTML格式展示给其他人查看，我们只需要在HTML中引入它，然后配置需要展示的ID即可。本文介绍了gist-it的安装、使用以及示例代码。对于Web开发人员来说，gist-it可以是一个很好的工具，来分享代码和展示自己的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055db981e8991b448db76c