Wintus
3/16/2014 - 9:51 AM

Gistの使い方のメモ

Gistの使い方のメモ

vietnam.jpg
content_copyfile_download
  • Rendered
  • Source
style.css
content_copyfile_download
/* -*-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;
}
HowToGist.md
content_copyfile_download
  • Rendered
  • Source

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などいくつかのファイルと.git/ディレクトリがcloneされる。

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

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

１つのエントリーには１つのディレクトリが割り当てられ、そこに複数のファイルを置くことができる。 複数のファイルの表示順序は現在はアルファベット順のようである。 （以前は ASCIIbetical order で あった。）

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

Gistに.gitignoreを置くと見せたいファイルよりアルファベット順でで前にきてしまって、 .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ファイルに変換するには次に挙げるようないくつかの方法がある。

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

git add vietnam.jpgで後から画像を置くこともできる。 その画像は https://gist.github.com/t-nissie/9580883/raw/vietnam.jpg とgistのURLと画像のファイル名との間にraw/を挿入することで参照することができる。 2016年1月現在、この方法はJPEG, PNG, GIFファイルには有効だが、SVGファイルだとうまくいかない。

図: GFM文章の中に画像を挿入した例。ベトナムみやげのクマのぬいぐるみの写真。

ブログなどにGistの内容を貼り付ける

ブログなどにGistの内容を貼り付けるには、Gistの最上部でEmbedを選択して得られる

 <script src="https://gist.github.com/t-nissie/021f09aa327f02d0a710.js"></script>

などを使う。たとえば https://gist.github.com/t-nissie/021f09aa327f02d0a710 を貼り付けてみると

となる。（Gistでは表示されない。手元でgfm2html.rbを使って変換したHTMLなら表示される。）

Secret Gistとは

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

例えば、学術論文のLaTeXソースコードや図のPDFファイルをSecret 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 を通して報告すれば、数時間以内に直してもらえる。