【WordPress】ソースコードを綺麗に表示する!!

Contents

はじめに

プログラミングスクールに通いながら、未経験でITエンジニア転職を目指しているごんにんごんです。

Ruby on Railsを用いてWebアプリケーションの実装を行なっているのですが、理解を深めるためにValidationを深掘りしたいと思います。

・・・と、ここまで記載していて驚きの事実に気がつきました。

Validationに関するソースコードを載せたいんだけど、markdown方式のコードブロックを入れる書き方(コード部分を“`rubyで囲む)をしても、rubyの書式にならない。むしろちょっと装飾されて表示されてしまいます。

これは、追加CSSで<code>タグにエフェクトが入るようにしてしまったことが原因のようです。
markdown方式では、“で囲った部分を強調できるのですが、ソースコードのブロックを表示する“`rubyも、この“と同じだと認識されるのですね。

このままでは、ソースコードを入れれば入れるほど視認性が悪くなっていく・・・。

ということで、今回はキレイなソースコードを載せる方法について、紹介したいと思います。

validates :title, presence: true

背景白だとこんな感じで載せたいです。

背景Darkもカッコいいですね。

こういった書式で表示できるプラグインを紹介します。

今回使用したプラグインはこちらです。

Highlighting Code Block`

まずWordPress管理画面からプラグインの新規追加を行いましょう。

プラグインを有効化した後、クラシックエディタの場合、上部のCode Blockプルダウンから入れたい言語を選びます。

例えばRubyを選択すると、ソースコードの入力欄が記事内に入ります。こちらのボックスにコードを入力します。これだけです。

validates :completed, inclusion: { in: [true, false] }

これでキレイなソースコードを差し込むことができるようになりました。

お次は、記述の途中だったValidationについて、ソースコードをモリモリ入れて書きたいと思います。

それでは、また。