Skip to content

Instantly share code, notes, and snippets.

@ryosuke-endo
Forked from t-nissie/HowToGist.md
Last active September 15, 2015 12:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryosuke-endo/3c65128a995f4621647a to your computer and use it in GitHub Desktop.
Save ryosuke-endo/3c65128a995f4621647a to your computer and use it in GitHub Desktop.
Gistの使い方のメモ

Gistの使い方のメモ

Gistを使い始めて気がついた点をメモした。 Gistはこのようなメモや短いコードをバージョン管理しながら公開するのに便利。

特にこのメモでは、画像を同一ディレクトリに置いて、 それGFMファイル内に挿入する方法を解説。

このメモにはgitコマンドの使い方の解説はない。 このメモは随時更新される予定。 Tipsなどのコメントを乞う。

gitコマンドで手もとにcloneできる

例えば git clone https://gist.github.com/9580883.git HowToGist もしくは git clone git@gist.github.com:9580883.git HowToGist とすればHowToGistというディレクトリが作られ、 その中にHowToGist.mdなどいくつかのファイルがcloneされる。

Gistのwebエディタ Ace は特に日本語の編集に難があるので、Gistの文章は手もとで編集してgit pushするのが便利である。

1つのエントリーに複数のファイルを置くことができる

1つのエントリーには1つのディレクトリが割り当てられ、そこに複数のファイルを置くことができる。 複数のファイルの表示順序は ASCIIbetical order との こと

.gitignoreはローカルだけに置く

Gistに.gitignoreを置くと見せたいファイルより ASCIIbetical order で前にきてしまって、.gitignoreが前面に出てきてしまう。 Gist用の.gitignoreはローカルだけに置くことにする。 その場合.gitignoreの中に.gitignoreも書く。 例えば https://gist.github.com/t-nissie/9771048 のための.gitignoreはこんなかんじ:

*.dSYM
*.log
*.o
crd2enex
science.crd
science.enex
.gitignore

GitHub Flavored Markdown (GFM) で書かれたものはHTMLに変換されて表示される

このHowToGist.mdのように、 GitHub Flavored Markdown (GFM) で書かれたファイルはHTMLに変換されて表示される。 意味のあるファイル名を持ったGFMファイルが先頭に置かれてうまくHTML表示されるには、 ディレクトリ内のすべてのファイル名を工夫する必要がある。

手もとでGFMファイルをHTMLファイルに変換するには次に挙げるようないくつかの方法がある。

後から画像を置くこともできる

画像ファイルをドラッグ・アンド・ドロップでGistにアップロードしたり、 selecting themをクリックしてアップロードすることもできる。 また、git add vietnam.jpgで後から画像を置くこともできる。 その画像は http://bl.ocks.org/ を使って http://bl.ocks.org/t-nissie/raw/9580883/vietnam.jpg と参照することができる。

vietnam

図: http://bl.ocks.org/ を使ってGFM文章の中に画像を挿入した例。ベトナムみやげのクマのぬいぐるみの写真。

Secret Gistとは

Gistを作るとき、それをSecret Gistと指定することもできる。 Secret GistのURLを友人に送ればそのGist文書を友人間で共有できる。 Secret GistはGoogleなどのサーチエンジンの対象外にはなるが、 閲覧にパスワードが必要というわけではない。 Secret Gistは自分のGistのページで金色の枠が付いて表示される。

GitHubにspammer/spammyと誤認されてしまったら

あなたがあなたのGistにアクセスして "Whoops. We seem to have missed the gist of that gist you were looking for." 表示されたら、あなたはGitHubにspammer/spammyと誤認されている。 GitHubにアクセスして "One of our mostly harmless robots seems to think you are not a human." と赤で表示される場合も同様に誤認されている。

焦らずに https://github.com/contact を通して報告すれば、数時間以内に直してもらえる。

/* -*-CSS-*-
* style.css for README.html of feram
* Time-stamp: <2013-11-30 12:19:00 takeshi>
* Author: Takeshi NISHIMATSU
*/
body {
color: black;
font-family: verdana, arial, helvetica, sans-serif;
}
h1, h2, h3, h4, h6 {
font-family: verdana, arial, helvetica, sans-serif;
}
h1 {
color: #dd0000;
background-color: #fff0f0;
font-size: 240%;
}
h2 {
border-top: red 5px solid;
border-bottom: red 1px solid;
padding-left: 8px;
background-color: #fff0f0;
}
h3 {
border-top: red 2px solid;
border-bottom: red 1px solid;
padding-left: 4px;
}
h4 {
border-top: red 1px solid;
padding-left: 4px;
background-color: #fff0f0;
}
h5 {
font-size: larger;
font-family: courier, verdana, arial, helvetica, sans-serif;
padding-top: 10px;
color: darkred;
}
pre {
font-family: monospace, courier, verdana, arial, helvetica, sans-serif;
padding-right: 0.5em;
padding-left: 0.5em;
padding-top: 0.1ex;
padding-bottom: 0.1ex;
margin-left: 0.5em;
margin-right: 1.0em;
white-space: pre;
color: darkred;
background-color: #f3f3f3;
}
div.figure img {
width:50%;
margin: auto;
display: block;
}
div.figure div.figcaption {
width: 60%;
margin: auto;
display: block;
}
div.navi {
text-align: right;
margin-right: 1.0em;
}
div.contents {
margin-left: 10%;
}
figure img{
width: 50%;
margin: auto;
margin-top: 3.0em;
display: block;
}
figure figcaption{
width: 60%;
margin: auto;
margin-bottom: 3.0em;
display: block;
}
table {
border: blue 2px solid;
text-align: center;
margin: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment