技術の備忘録

WordPressでソースコードを簡単&綺麗に埋め込むなら「Gist」がオススメ

mani
mani
ブログで技術系記事書きたいけど、ソースコードを綺麗かつ簡単に埋め込んでくれるプラグインがねぇ…どれも古くせぇ…

どうも、iOSデベロッパー(笑)のmani(@mani_transm)です。

技術系の記事を書きたいと思っていたんですが、WordPressのソースコード埋め込みプラグインにしっくりくるものがなくて記事を書けずにいました。言い訳じゃないよ。

一応ググって下記のプラグインを見てみたのですが、なんかどれもピンとこない。

  • Crayon Syntax Highlighter
  • Mivhak Syntax Highlighter
  • Code Prettify
  • SyntaxHighlighter Evolved
  • WP Code Highlight.js

というか「WordPress コード埋め込み プラグイン」で検索したら「Crayon Syntax Highlighter」をオススメしてる記事しか出てこなくて、「新手の情報操作かな?」と錯覚したくらい。

ソースコード埋め込みプラグインでは有名どころなのは分かるけど、僕には合わなかったですごめんなさい。

というわけで頑張ってWordPressで手軽かつ綺麗にソースコードを埋め込める方法を探してたんですが、ついにバッチリ僕のニーズに合った方法を見つけました。

それはプラグインではなく、ソースコード共有サービス「Gist」を使う方法。

プラグインよりも手軽かつ綺麗、そして余りあるメリットもたくさんあって、「プラグインなんて使う意味ある?」って思うレベルだったので、今回はそんな「Gist」を使って「WordPressでソースコードを埋め込む方法」を記事として残しておこうと思います!

Gistはソースコードの共有サービス

まずGistって何やねんって人のためにGistを簡単に説明すると、Gistはソースコード管理サービスGitHubが提供している「ソースコードの外部共有サービス」のこと。

Gistで出来る事としては基本的にはこの2つ。

  • ソースコードの部分的なバージョン管理
  • ブログ等でのソースコードの埋め込み公開

あとはFork(他の人のコードを自分の所にコピーすること?)が出来るらしいけどFork使った事がないのでよくわからないです。教えてエロい人。

まぁなにはともあれ百聞は一見に如かずなので、Gistを使ってソースコードを埋め込みしてみるとこんな感じになります。

シンタックスハイライト(コードの色分け)もきっちりされてるし、見やすいですよね!デベロッパーならGitHubはよく使うツールだし、普段使ってるツールで埋め込みも完結できるのでかなりお手軽です。

GistをWordPressに埋め込む手順

さて、肝心のソースコードをGistでWordPressの記事に埋め込む手順はたった3手順。

  1. Gist(https://gist.github.com/)にて埋め込みたいソースコードを入力し、公開
  2. 埋め込み用コードをコピー
  3. WordPressの埋め込みたい記事にペースト

これだけでさっきの様なソースコード埋め込みが出来ます。ヤッフー

ただし、GitHubアカウントを持っていない方はまず最初にGitHubアカウントを作る必要があるので、そこだけ注意が必要です。

1. ソースコードを入力し、公開

Gist(https://gist.github.com/)にアクセスすると、画像の様な画面に出ると思いますが、これがGistのソースコード入力画面です。

それぞれ必要な情報を入力していきます。

  • 「Gist description」 … 公開するコードの説明文を入力する箇所。
  • 「Filename including extension…」… ファイル名を入力します。「適当なファイル名.使用言語」というように拡張子に使用しているプログラミング言語を書くと、その言語が紐付けされます。未入力だと自動で命名されるらしい。
  • 「1 … 」… ここにソースコードを入力。
  • 「Create secret  or public gist」… ソースコードを一般/限定で公開する。

「Gist description」は必須ではないので必要なければ入力しなくてOK。

ファイル名を決めて、ソースコードも入力したら「Create secret gist(限定公開)」か「Create public gist(一般公開)」のどちらかのボタンを押して公開する。

ブログで埋め込むだけなら限定公開で多分いいです。

2. 埋め込み用コードをコピー

Gistが作成できたら、あとは埋め込みコードをコピーして記事に埋め込むだけです。(※「Embed」の部分はデフォルトで「Embed」になってるので毎回気にする必要はないはず)

画面右上にある埋め込みコードの横のプルダウンが「Embed」になっていることを確認して、埋め込みコードをコピーします。

3. WordPressの埋め込みたい記事にペースト

WordPressに戻り、ソースコードを埋め込みたい記事に埋め込みコードを貼り付けたら完了。めちゃ簡単です。

ただしこの時一点注意なのが、この時ビジュアルモードでは無くテキストモードで埋め込みコードを挿入することビジュアルモードで挿入してしまうと正常に動作しない可能性があるのでここだけ注意ですね。

GitHubを使っているデベロッパーは、「Gist」を使えば幸せになれる

Gistを使ってみて分かったことなんですが、Gistはソースコード埋め込みプラグインを使うよりも断然メリットが多いんですよね

  • Gistはプラグインではないので、他に有効化しているプラグインと干渉することがない
  • 下手なプラグインよりデザインも良い
  • Gitなだけあって言語の対応が早い
  • GitHubユーザーならソースコード埋め込み以外にも「一部コードのバージョン管理」としても使える

言い方を変えれば、プラグインを使うとリスクが高いとも言えますよね。他プラグインとの干渉リスクや言語未対応のリスク、更新停止のリスクなどなど、Gistと比較すると色んなリスクが見えてくるのがわかります。

GistならデベロッパーであればGitHubはほとんどの人が使っているはずだし、プラグインが抱えるリスクがほとんど無いに等しいので、もはやソースコード埋め込みはGist一択です

Gistでデベロッパーは幸せになれることでしょう。というか僕が幸せになってます。

そんなわけで、WordPressでのソースコード埋め込みに困っている方は是非「Gist」を使ってみてくださいな。

それでは!