備忘録でも、プログラムのソースコードを表示することが、あると思うのでGistというサービスを使って表示させようと思います。
1．GitHubにアクセスしてログインしてください。
アカウント情報は、ブログ管理者に聞いてください。
Gmailで簡単に習得できるので、自分のメールアドレスでもいいかもしれません。
2．GitHubサイトの上部のメニューに「Gist」があります。
メニューをクリックすると入力欄が表示されます。
【入力欄の説明】
*Gist description...
説明的なものを入力できると思います。
*name this file...
ファイル名を指定できます。
未入力だと自動で指定されます。
名前入力時には拡張子までつけると言語が紐付きます。
example.html → html
*language:
言語を指定できます。
ファイル名が未入力のときのみ手動で変更できます。
*indent mode:
SpacesかTabsかを指定できます。
*indent size:
TABキーで挿入されるスペースの数を指定できます。
indent mode:Spacesのときのみ使用可能です。
Spacesの2ぐらいがちょうどいいかもしれません。
*Add Anothier File
入力欄が追加されます。
3．入力欄にソースコードをコピペして、Update Gistでアップロードします。
4．アップロードが終わったら、画面左のLink to this gistの入力欄のURLをコピーします。
5．コピーしたスクリプトを、アメブロに下記タグと合わせて貼り付けてください。
<div class="g2ab" data-url="ここにGistのスクリプトを貼る"></div>
これでソースコードを表示出来ます。
始めはベタ書きしようかと思いましたが、見栄えを良くするのにCSSの設定が必要だったり
実体参照変換しないといけなかったりするので、Gistにしました。
実態参照とは
記事で投稿する時に、タグを書いてしまうと普通にタグとして認識され、変換して表示されてしまいます。
例えば↓
<a href="http://www.day-b.jp/">株式会社デイブレイク</a>と記事に書いて、投稿すると
株式会社デイブレイク
このように、リンクになります。
下記参考サイト:
Gistの使い方を覚えました - tyoshikawa1106のブログ
アメブロにGistのソースコードを貼り付る 3人目の挑戦者｜さたなべのブログ