Skip to content

Instantly share code, notes, and snippets.

@cemo
Forked from t-nissie/HowToGist.md
Created May 3, 2022 22:18
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 cemo/9da01901cdac1738bfa3ae8688df8b31 to your computer and use it in GitHub Desktop.
Save cemo/9da01901cdac1738bfa3ae8688df8b31 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などいくつかのファイルと.git/ディレクトリがcloneされる。

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

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

1つのエントリーには1つのディレクトリが割り当てられ、そこに複数のファイルを置くことができる。 複数のファイルの表示順序は現在はアルファベット順のようである。 (以前は 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ファイルだとうまくいかない。

vietnam

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

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

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

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

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

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

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

Secret Gistとは

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

例えば、学術論文のLaTeXソースコードや図のPDFファイルをSecret Gistに置いて、 それらを共著者と共有すると便利である。 編集の履歴が残るので、論文の正当性の証明の1つとして使えるかもしれない。

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