対象読者は？
- githubアカウント作成済み
- ブログにソースコードを貼りたい
何が書かれている？
- gistの使い方
- gistをコードに貼る方法
ブログにソースコード貼る時って、、、面倒じゃないですか？
私はwordpressを使っているのですが、レイアウトが崩れて微調整したりと結構手間に感じてました。
今回、githubのサービスの1つであるgistを使うとコード貼るのが楽になりそうということでやり方をまとめてみまし。
gistとは？
Githubで使えるサービスです。
ソースコードを１コード単位でも管理できます。
今回はブログにソースコードを貼るために使用します。
gist作成方法
では、早速使い方を。
Githubアカウントは既に作成ずみ前提で話を進めます！
Githubにログインしてください。
その後、右上の「+」ボタンをタップします
New gistをタップします。ここから、gistを作成することが出来ます。
遷移後の画面です
jsit作成に必要な項目
- タイトル：お好きな名前を入力してください。使用目的＝タイトルの方が後々見やすいかも
- ファイル名：拡張子付きでファイル名を入力します
- コード：ブログに添付したいコードを記載します
- create secret gistボタンタップでgist作成
jistで作成したコードをブログに貼る
jist作成後の画面の見方
- こちらをソースをコピペして、ブログに添付します
- 編集する
- Git画面に戻る
- コメントなどメモがあれば、ここに記載する。ソースコードとは別枠
ブログに作成したjistのソースを貼る
<script src=”https://gist.github.com/satoNobu/e540eda07cb5554e4bcae25cb80f6544.js”></script>
このコードをブログに貼り付けると以下のようになります。
wordpressの場合
ビュジュアル側ではなく、テキスト側にソースコードを貼ってください。
Githubのホーム画面から再度、gistを確認するには
ホーム画面右上のプロフィール画像をタップ
その後、your gistsをタップします
遷移後の画面。編集したい場合は、コードをタップすればOK
まとめ
私自身gistを使ってコードを貼り付けること、レイアウトを気にしなくて良くなりました！
