ワードプレスにソースコードを簡単に表示するならgistがおすすめです

スポンサーリンク

以前からブログ記事内にソースコードを表示たいと思っていたのですが、どうやったら簡単に・見やすく表示できるかわからず困っていました。

そこでネットで色々検索していたら、簡単にソースコードを表示できるサイトを見つけ、使ってみたら思ったより簡単に表示することができました。

私と同じように記事にソースコードを表示したいがやり方がわからない、難しそうと思っている人がいるならぜひこの記事を読んで挑戦してほしいです。

この記事ではプラグインを使わずにソースコードを綺麗に表示するgistについて、サイトへの登録方法、使い方を説明しています。

それではいってみましょう!

コード

ワードプレスの記事にソースコードを表示する方法

私がこのブログにソースコードを表示したいと思った理由は、html/cssを少し勉強したので、見出しのデザイン、ボタンを作成の方法をわかりやすく説明したいと思ったのが理由です。

ワードプレスにソースコードを表示する簡単な方法としては、プラグインを入れるのが一般的です。

有名なのが下の2つです

  • Syntax Highligter Evolved
  • Crayon Syntax Highlighter

このプラグインを使えば、簡単にソースコードを記事に挿入できるですが、ブログが非常に重くなる、ビジュアル表示⇔テキスト表示を切り替えると表示が崩れることがあるそうです。(使っていないので、実際のところはわかりません。表示が重くなるというのは多くのブログで書かれています)

私はこのブログでいくつかのキャッシュ系プラグインを使用していて、以前2度もブログが表示されない不具合が発生しています。

そのため、2つのプラグインのデメリットの記事を読んで使うのをためらってしまいました。

他にソースコードを簡単に入れられる方法はないかな〜と検索しているとこちらのサイトにgistの簡単な導入方法、使い方が書かれていて、これなら自分にも簡単にできるんじゃないの?と思ったので登録してみました。

gistの登録方法

gistを使用するにはGitHubのサイトに登録する必要があります。

サイトを表示すると英語表記になっているので、戸惑うかもしれませんがマウスで右クリック➡翻訳 すれば日本語に翻訳されるので

  • ユーザ名
  • アドレス
  • パスワードを決める

を入力すれば登録は完了して直ぐに使用することができます。簡単ですね

スポンサーリンク

gistの使用方法

gistは使い方も非常に簡単でシンプルです。

GitHubのトップ画面上部にあるgistをクリックします

gist

するとこの画面が表示されます。細かいことはどうでもいいならソースコードを貼り付けて非公開保存・公開保存どちらでもいいのでクリックしてください。

公開保存するとgistを使うすべての人にソースコードが公開されます。自分のブログにソースコードを貼るのが目的なら気にする必要はありません。

gistの使い方

保存ボタンをクリックするとこの画面になります。

Embedになっているのを確認して、コピーボタンを押してください。後はブログのテキストエディタに貼り付ければ自動でコードが表示されます。

ソースコードの貼付け方

こんな感じで表示されます。

ちなみにこのソースコードは下のボタンを表示するためのものです。

ボタン

まとめ

いかがでしょうか、gistを使えばブログ記事にもきれいにソースコード表示できます。

登録が必要だと説明があったので、使うまでいろいろな設定があるのかと思ったのですが、あまりに簡単なのでびっくりしてしまいました。

ブログにコードを表示したいと思っているなら、使ってみてはどうでしょうか。カスタム系の記事を取り入れるとブログの幅が広がりアクセスアップにつながるかもしれません。