WordPressに実行コマンドやソースコードを埋め込む際に、以下のようなブロックを作成し、直接記述している方が多く見受けられます。
print(out_str)
- ブロックのスタイル設定を毎回行う必要があり、全てのフォーマットを統一させるのに手間がかかる
- ソースコードを更新するたびに「WordPressにログイン」->「投稿ページを編集」という手順を踏む必要がある
- ソースコードを更新した後に記事内容を更新している場合、ソースコードのみリビジョンを戻すことが困難
「Gist」を使用することで、以下のようなメリットがあります。
- 品質面: ソースコードのフォーマットを統一することができる
- 管理面: ソースコード単体でバージョン管理することで、ブログ記事から独立して管理できる
- 拡張性: 複数の記事に同一のソースコードを埋め込む際に、埋め込みコードをコピーするのみで対応できる
- 利便性: WordPressにログインすることなく、GitHub上の操作のみでブログ記事上のソースコードを更新できる
「Gist」の埋め込みコードを使用した場合の表示フォーマット
この記事では、「Raspberry Pi 3 MODEL B」と「Motor Driver HAT」を使用して、2つのDCモータを別々に駆動させるアプリケーションをご紹介します。 1. アプリケーション概要 今回作成したアプ[…]
導入手順
1. GitHubアカウント作成
1-1-1. GitHubの公式ページにアクセス
1-1-2. 「ユーザ名」「メールアドレス」「パスワード」を入力
- ユーザ名（Username）: 任意の名前を入力 ※既にサーバ上に存在する名前は使用できません
- メールアドレス（Email）: 任意のメールアドレスを入力 ※入力したメールアドレスに認証情報が送られてきます。
- パスワード（Password）：任意のパスワード ※15文字以上 or 8文字以上、かつ数字と小文字を含む組み合わせ
1-1-3. 「Sign up for GitHub」をクリック
1-1-4. 遷移先ページ「Create your account」の中央部分の「検証開始」をクリックし、問題に回答
1-1-5. 「Next: Select a plan」をクリック
1-1-6. 遷移先ページ「Choose a plan」の左側の「Choose Free」をクリック
1-1-7. 「Welcome to GitHub」と表示されたページに遷移されればアカウント作成手順は完了
1-1-8. 登録したメールアドレスに届いたメール（タイトル: [GitHub] Please verify your email address.」）を開く
1-1-9. 「Create a new repository」と表示されたページに遷移されればメールアドレスの認証は完了
2. Gist作成
2-1. Gist作成ページにアクセス
2-2. 「ファイル名」を入力
2-3. 「ソースコード」を記述
2-4. 画面右下の黄色ボタン「Create secret gist」をクリック
2-6. 手順2-5でコピーした埋め込み用コードを本文中に貼り付ける
（テキストエディタ形式）
（ビジュアルエディタ形式）
（プレビュー画面）