Github·Gist使用攻略

发表于 | | 阅读次数

Gist 是 Github 推出的基于 Git 的代码片段管理服务。用户可以提交自己的代码片段或任意的文本，可以作为个人的代码管理库、文档管理库等。同时 Gist 页面提供访问的 JavaScript 片段用于嵌入其他网站，如：个人博客等。下面说说gist的一些正确打开姿势。

一、使用、管理Gist

1.1 使用 Github Gist

github官网默认功能，这里不多说了

1.2 gistboxapp

gistboxapp是一个gist集成管理工具，GistBox 是可以直接用 Github 账户登录的，实时同步你的 Gist 到 Github，很方便。GitBox 从体验上来说更加方便，界面元素丰富，功能也比较全。如果不想用 Sublime Text, 又觉着 Github 自己的 Gist 管理太简单，GistBox是一种不错的方式。官网是 https://app.gistboxapp.com/，功能功能截图如下：

gistboxapp

1.3 使用 Sublime Text + Gist插件

安装插件：Gist

配置token: 插件下的user setting下配置，

添加 Github Token:

1
2
3
4
5
{
    // Your GitHub API token
    // see: https://github.com/condemil/Gist#generating-access-token
    "token": "a28b686c3a74······c300f42414c7", // 从命令行得到的 token
}

分享Gist代码

这里直接粘贴部分代码片段：

1
2
3
4
5
<!-- 使用iframe加载 -->
<iframe width="100%" height="300" src="https://gist.github.com/boxcore/9abd100553a3585c50b7c348e50e2f87.pibb" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<!-- 使用js加载 -->
<script src="https://gist.github.com/boxcore/9abd100553a3585c50b7c348e50e2f87.js"></script>

或者添加通用的处理规则在function中：

1
2
3
4
5
6
7
8
9
10
11
// wordpress usage
/**
 * WordPress 使用 iframe 嵌入Github Gist代码
 * https://www.wpdaxue.com/wp-iframe-handler-gist.html
 */
function wp_iframe_handler_gist( $matches, $attr, $url, $rawattr ) {
	$iframe = '<iframe width="100%" height="300" src="https://gist.github.com/'. esc_attr($matches[1]) .'/'. esc_attr($matches[2]) . '.pibb" frameborder=0 ></iframe>';
	return apply_filters( 'iframe_gist', $iframe, $matches, $attr, $url, $rawattr );
}
wp_embed_register_handler( 'gist_iframe', '#https://gist.github.com/(.*?)/([\d]+)#i', 'wp_iframe_handler_gist' );