マナビエンタただいまアップデート中!

ブログのソースコードをハイライト化したい!

ブログのソースコードをハイライト化したい!

「色々記事を調べて、よくわからないJavaScriptファイルを作ったり、phpファイルをいじったりしたけど上手くいかない」

なんて困ったりしていませんか?いや、きっとしているはず。

そんな「困った」を解決します。

ソースコードをハイライト化したい!

個人ブログでソースコードを書かれる方は結構いらっしゃるかと思います。

小学校でプログラミングが必修化したり、コロナ渦でプログラミングの勉強を始める方が増えたり、単にブログの装飾用のCSSやHTMLを変更したいというユーザー向けに発信したりとソースコードは至る所で表示されるようになりました。

ですが、大体のテーマでは整形済みテキストを用いても普段見ているソースコードっぽいソースコードの表示にならない(VScodeとか Atomみたいな)のでなんとなく格好悪く見えてしまいますよね。

僕はWordPressのテーマとしてSANGOを使わせていただいているのですが、初心者ながら実際にUnityで困ったことや、解決方法についての記事を書く際に「整形済みテキストの格好悪さ」には困っていたので、なんとかしたいと思っていました。

どうにかしてこんな感じのソースコードにしてみたかったのです。

helloWorld.py
print("Hello World");

ハイライト化する2通りの方法

そこで色々調べた結果、大きく分けて「highlight.jsを用いる」もしくは「WordPressのプラグインを用いる」の2つの方法でハイライト化ができそうだということがわかりました。

方法1: highlight.jsを用いる

方法2: WordPressのプラグインを用いる

個人的には「WordPressのプラグインを用いる」が圧倒的にオススメです。

理由は後述しますが、ざっくりいうと「楽だから」です。highlight.jsとかいう見慣れないファイルが出ただけで嫌気が差す方も多そうですし、、

方法1: highlight.jsを用いる

highlight.jsを用いたハイライト化を実現する場合、手順はおおよそ下のような感じです。

STEP.1
function.phpへの追記
function.phpにhighlight.jsをCDN経由で読み込むスクリプトと、読み込んだhighlight.jsを実行するためのJavaScriptファイルの読み込みを行うスクリプトを記述する。
STEP.2
script.jsの追加
script.js(function.phpで参照する名前と同じならなんでも良い)を追加して、highlight.jsの初期化スクリプトを記述する。
STEP.3
style.cssの上書き
シンタックスハイライトが適用されるようにstyle.cssを上書きする。
STEP.4
完成

処理手順だけ聞けば特に難しそうな感じはしませんが、契約しているサーバーのFTPサーバーからscript.jsを追加したり、最終的には自分が使いたいようにカスタマイズする必要があるので、理解しながら進めていかないとファイル操作やプログラミングの記述に慣れていない方には少し難しいかもしれません。

実際、僕はこれらで扱うプログラミング言語の基本は学んでいたのですが、色々な記事を参考にしてハイライト化をしようと思いましたが、なかなかうまくいきませんでした。

これがファイル権限のせいなのか、はたまた自分が変な誤解をして記述を間違っていたのかはわかりません…

細かな方法やスクリプトの内容などは詳しく説明されている記事がありますので、そちらをご覧ください。

記事によっては時間が経っているものもあるので、highlight.jsのバージョン確認などは個人でされることをお勧めします。

参考 【SANGOカスタマイズ】highlight.jsでソースコード表示をかっこよくする方法ゆうやの雑記ブログ 参考 SANGOのコードをhighlight表示にする方法【WordPress】SELEGEE 参考 highlight.jsを使ってコードをVSCode風に見せる方法。WordPressのSANGOで実践。クリワンのPython講座

Qiita風にハイライト化したい方にオススメの参考記事。当ブログのハイライト化でも参考にさせていただきました。

参考 ソースコードボックスをQiita風のシンタックスハイライトにしてみたカフーブログ

ハイライト化を施したけど、SANGOの整形済みテキストのデフォルトデザインを変更したいといった方にもオススメです。レスポンシブにまで対応されていてとても参考になりました。ありがとうございました。

しん

新しいものを適用する作業は昼間か朝にやることをお勧めします。夜中に上手くいかないと、とてもストレスが溜まるので…

方法2: WordPressのプラグインを用いる

本当に色々な記事を参考にさせていただいて、本当に色々な方法を試した(CDNの仕組みを調べたり、highlight.jsのホームページを読んだり等)のですが、僕の理解力の無さのせいなのか全然上手くいかなかったので他の方法を調べました。

すると、下のようなページを発見しました。

参考 ソースコードにシンタックス・ハイライトを適用させたいサルワカ

なんでもっと早くこのページを見つけられなかったんだろうか、、というかなぜプラグインを使うという一番初めに思いつきそうなことを思いつかなかったんだろうか、、よくあることなので慣れてはいますが流石にショックでした笑

ということで、WordPressのプラグインを用いてでもソースコードのハイライト化が実現できるようです。

手順としては、「プラグインを導入するだけ」なのでとっても簡単です。

ですが、前述した参考文献で使用されている「WP Code Highlight.js」は現在は公開されていないようなので(2021/2/4現在)、他のプラグインを使用する必要があります。

プラグイン>新規追加 から、”code highlight”などと検索すると、下のようにプラグインが色々表示されるので、Prismaticというカラフルなプラグインをインストールして有効化にします。

インストールと有効化が済んだら、設定>Prismatic から下の画像のように設定を行います。

Themeのドロップダウンを押すと、色々なテーマが表示されるので、お好みのテーマに設定してください。僕の場合はよくVScodeを使うのでVS2015にしてみました。(画像ではなぜか違う文字列になってる)

これだけでもハイライト化はできるのですが、このままだとSANGOのデフォルトのデザインが残っているのでソースコードの後ろにテーマで設定している色のボックスがあると思います。

これを消してQiita風にするために先ほど紹介させていただいた、カフーブログさんの記事を参考にさせていただきました。

参考 ソースコードボックスをQiita風のシンタックスハイライトにしてみたカフーブログ

テーマエディターから編集をしなくても、外観>カスタマイズ>追加CSS からCSSを上書きすれば実現できます。その場合、下記のようなCSSを記述すれば上手くいくかと思います。(スクリプトの内容はこちらを参考にさせていただいています。)

style.css
#container  pre{
    padding: 0;
    white-space: pre;
    -moz-tab-size: 2 ;	/* Firefox用 */
    tab-size: 2 ;
  }
#container code{
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
    border-radius: 0;
  }
#container .hljs{
    padding: 1em 32px;
  }
#container  pre{  
    margin-left: -15px;
    margin-right: -15px;
  }
  @media only screen and (min-width: 481px){
#container pre{
			font-size: 14px; /*フォントサイズを14pxに*/
      margin-left: -25px;
      margin-right: -25px;
    }
  }
  @media only screen and (min-width: 768px){
#container pre{
      margin-left: -25px;
      margin-right: -25px;
    }
  }
  @media only screen and (min-width: 1030px){
		#container pre{
			font-size: 16px; /*フォントサイズを16pxに*/
      margin-left: -40px;
      margin-right: -40px;
    }
  }
注意
#containerを用いないと、SANGOにもともとあるpreとcodeの内容を上書きすることができないため、記述が必要です。

もし上手くいっていれば上に示すようなソースコードのハイライト化ができているかと思います。

終わりに

いかがでしたでしょうか。

今回の記事は、僕が実際に困ったことに対する解決の手順をそのまま記事にしているので、流れとしてはわかりやすくなっているかと思います。

わからなければググって、それでもダメならまたググってを繰り返して解決しているので必然的に参考文献が多くなってしまっていますが、こちらの記事が皆さんのお役に立てたら幸いです。

プラグイン最高!!

ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA