ワードプレスの記事内で綺麗にコードを表示するならGistがおすすめ

Blog

 

ワードプレスにコードを表示したいときはGithub社の「Gist」がおすすめ。

 

プラグインの有名どころは、「Crayon Syntax Highlighter」が有名です。

 

Crayon Syntax Highlighterの場合

 

h2 {
 
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;

}

 

このプラグインでも十分に綺麗ですが、Gistの場合はどうでしょう。

Gistの場合

 

 

 

Gistではこのように表示されます。

 

好き好みあると思いますが、Gistもおすすめです。

 

 

Gistの使い方

 

  1. GitHubのアカウントを作成し、ログイン。
  2. ログインできたら、サイト上部の「+」をクリックし、「New Gist」をクリックする。

 

 

 

クリックしたら、次の画面で

 

  1. 説明欄を記入。
  2. タイトルを記入。
  3. コードを記入。

 

 

 

 

最後に「Create public gist」をクリック。

 

 

 

 

 

記事内にGistを表示する

 

 

wordpressの記事内にGistを表示してみます。

 

  1. 作ったGistにいき、コードをコピーする。

 

 

 

 

 

  1. wordpressの投稿ページでテキスト表示にし、コピーしたものを貼り付ける。

 

 

 

 

これでプレビューで見るとこうなります。

 

 

 

 

 

 

プラグインの方が簡単ですが、綺麗に表示したいときはおすすめです。

 

あと、Gistのいいところはバージョン管理ができることです。

 

編集することも可能です。

 

 

Gistの編集方法

 

 

  • 「Edit」をクリック。

 

 

 

  • 編集し、「Update public gist」をクリックする。

 

 

 

 

バーション管理は「Revision」で確認できる。

 

 

 

 

 

一度Gistを使ってみてはいかがでしょうか?

 

 

 

コメント