WordPressブログパーツ

ソースコード管理サービス GitHubに登録する!

アイキャッチ画像 ソースコード管理サービス GitHub
スポンサーリンク

Cocoonでブログ記事にソースコードを掲載する方法

WordPressテーマ Cocoonでは、ソースコードのハイライト表示の設定が可能です。

「Cocoon 設定」-「コード」タグで設定することが出来ます。

ソースコード管理サービス GitHubに登録する!

ソースコードを表示する場合は、preタグを使用します。

preタグは「Preformatted Text(整形済みテキスト) 」の略になります。

使い方としては、<pre>~</pre>で囲んだ整形済みテキストに対して、スペースや改行などをそのまま等幅フォントで表示します。

手軽にソースコードを表示したいときに便利なタグです。

ソースコード管理サービス GitHub

その他の方法として、「ソースコード管理サービス GitHub」のGistを使う方法が有ります。

この場合、登録したソースコードを一括して管理することが出来るので、過去のソースコードを見返したり使い回ししたいときに便利です。

ソースコードを頻繁に掲載される方は、この「ソースコード管理サービス GitHub」を使う方が良いと思います。

ソースコード管理サービス GitHubに登録する!

このソースコード管理サービス GitHubの利用するためには、アカウント登録を行う必要が有ります。

こちらのサイト「How people build software · GitHub」にアクセスします。

ソースコード管理サービス GitHubに登録する!

この画面で、

  • Pick a username(ユーザー名)
  • Your email address(メールアドレス)
  • Create a password(パスワード)

の3項目を入力し、最後に「Sign up for GitHub」をクリックするとアカウント登録が完了します。

ソースコード管理サービス GitHubを使ってみる!

それでは、実際にソースコード管理サービス GitHubを使ってみたいと思います。

  1. GitHubのアカウント登録後、「Gist」のページにアクセスします。
    ソースコード管理サービス GitHubに登録する!
  2. 「Gist description...」の欄にタイトルを入力します。
  3. 「Filename including extension...」の欄にファイル名(拡張子要)を入力します。
  4. 「Enter file contents here」の欄にソースコードを入力します。
  5. 「Create public gist」をクリックします。
    ソースコード管理サービス GitHubに登録する!
  6. Embedを選択して、その横の欄のコードをコピーします。
    ソースコード管理サービス GitHubに登録する!
  7. コピーしたコードをブログ記事のソースコードを表示したい位置に貼り付けて完了です。

最後に

ソースコードを頻繁にアップする場合は、このソースコード管理サービス GitHubを使う事で、手軽に管理することが出来ます。

また、見た目もpreタグを使うよりも、綺麗に表示されてブログを見る人にとっても見やすいでしょう。

ネックは、WordPressの編集画面では表示されないのが残念なところです。

コメント

タイトルとURLをコピーしました