WordPressブログ関連サービス

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

アイキャッチ画像 ソースコード管理サービス GitHub
この記事は約3分で読めます。
スポンサーリンク

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の編集画面では表示されないのが残念なところです。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ブラック・サージナイト
リネージュ2M
商人放浪‪記
ドラゴンとガールズ交響曲
エグゾスヒーローズ
魔剣伝説
ロードモバイル
パズにゃん

おすすめWordPressテーマ!
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ WING(AFFINGER5)
WordPressテーマ Diver

MASAa.net

コメント