WordPress上でのソースコード表示(Gistを使用)


1.Gistのメリット・デメリット

メリット

  • プラグインが不要
  • 表示が軽い
  • シンプルに書ける

デメリット

  • ソースコードをGistに登録する手間がかかる
  • プラグインを使う場合と比べると表現の自由度が低い
  • 見た目が貧相

2.Gistの使用方法

①GitHubのアカウントを取得(既に持ってる人はスキップ)

まずは↓のサイトで登録を行います。
https://github.com/


メールアドレス・ユーザ名(ニックネームOK)・パスワードのみで登録可能。

※非公開のコードもGitHub上で管理したい等のwillがないのであれば無料プランで十分です。

②ソースコードをアップロード

ログインした後の画面から、右上の+マークを選択し、New gistをクリックします。

すると↓のような画面になるので、ここにソースコードを貼り付けます。

ファイル名・スペースかタブか・インデントの深さの設定もお忘れなく。

右下の「Create public gist」ボタンをクリックすると、登録することができます。
※「Create secret gist」は課金垢向けなので無課金勢は押せません。

③Webサイトへの貼り付け

②から↓の画面に推移すると思うので、スクリプトコードをコピーします。

Embedになってなること。

WordPressデフォルトのエディタを使用している場合は、HTMLカスタムブロックを使用して以下のように貼り付けます。

デフォルトのエディタ使ってる人どれだけいるんだろ。

すると、↓のように表示されます。

Leave a Reply

Your email address will not be published. Required fields are marked *