[WordPress]ソース表示プラグイン

Contents

ソースコードをブログで表示したい

ブログを書いていて、ソースコードを表示したいと思って調べました。

仕事でプログラムを書くのですが、調べていてソースコードを提示してくださっているサイトがあると大変助かります。
そして、そのソースコードの表示が見やすいなぁと思っていましたので、自分もブログを書いたら、ソースコード表示してみたいと憧れてました。

実際に書くコードはあるのか、と言われると今のところはないのですが、とりあえずかっこよく表示できるプラグインがあるのかと調べてみました。

表示方法はいろいろあるみたい

調べたところ以下のような方法があるようです。

プラグインを使う
jsファイルを使う
GitHubを使う

大きく分けると上記の3つでしょうか。

プラグインを使う

プラグインと使えそうと思ったのは以下の3つです。

Syntax Highlighter Evolved
Crayon Syntax Highlighter

「Syntax Highlighter Evolved」と「Crayon Syntax Highlighter」は有名どころで高機能な感じがしました。

jsファイルを使う

プラグインはどうしても動作が重くなりがちです。
ソースコード表示を見やすくすると、複雑なHTMLを出力するので仕方ないとはいえ、あまり重たいと見ている人が不快感を持つかもしれません。

そこで高速表示させる方法として「highlight.js」を使う方法があるようです。
こちらはプラグインに比べるとシンプルな表示しかできないようですが、その分動作が軽いみたいです。

GitHubを使う

面白い方法としてはGitHubを使う方法があります。
GitHubはソースのバージョン管理ができるクラウドサービスで公開も可能です。
このGitHubで公開しているソースコードをWordPressに表示する方法があるようです。「Gits」というものをGitHubで生成して、そのURLを貼り付けるというやり方です。

このGistの利点としてはプラグインもjsファイルも要らないということですね。
ただ、GitHubに登録する必要があるので、そのあたりをどう判断するか。

もっと簡単に使いたい

お手軽なのはプラグインだが、表示が重たくなるのは避けたい
jsファイルの導入は、まだ未経験な部分が多くて少し面倒な感じ
GitHubは登録してまで使うのかという問題がある

どれも一長一短な感じです。
単に「ブログでソースコードをそれなりに見せたい」だけなのに…。

と思って調べると「WP Code Highlight.js」というプラグインを見つけました。
どうやら、highlight.jsを簡単に使えるようにするプラグインらしいです。

「これが一番簡単で、表示も速いんじゃない」

ということで、「WP Code Highlight.js」を使うことに決定！

試しに表示してみました。

〇 HTML表示

<body>
<h2  class="title">ソースコードをブログで表示したい</h2>
</body>

〇 Java表示

int function(int a){
  int i=a+1;
  return i;
}

なかなかいい感じじゃないですか(^^♪

詳しい使い方はこちらのブログにありますのでご参考にどうぞ！

https://youland.net/wp_code_highlight-js