wordPressでブログにコードをエディタ風に記載する方法を調べた

コードをエディタ風に投稿しよう！やり方がわからないので調べてみよう！
ということで調べてやってみた。実際には15分くらいで出来る作業だったが、勘違いから60分以上かかることになってしまいました。反省を込めて備忘録

調査開始

「ワードプレスコードブログ」
「ワードプレスブログエディタ」
「ブログコード記載」
などのキーワードでネット検索し、参考になるサイトを調べて、記事を10個程読んだ。

方法は大きく分けて３つ

1.WordPressのプラグインを使う

2.外部サービス利用する

3.cssでカスタマイズする

プラグインが一番楽そうなので、プラグインを試してみることにした。

WordPressのプラグインを使う

「Crayon Syntax Highlighter」をインストールした。
方法はこちらを参考にした。
URL：https://design-plus1.com/tcd-w/2018/04/crayon-syntax-highlighter.html

プラグインの設定はめっちゃ簡単だった。
実際に使ってみた。ワードプレスの投稿記事の編集画面上は以下のように表示されている。

投稿記事の編集画面上のキャプチャー
あれ？エディタ風に表示されないの？と疑問を感じた。

ところが、更新をクリックしてプレビューを押すと、エディタ風にちゃんと表示された。あれ？ちゃんと表示されている。

更新ボタンクリック後のキャプチャー

早とちりだった。知識不足が恥ずかしくなる。本当なら10分くらいで出来ていたが、出来ないと思い込み、プラグインではなく、外部サービスを探して60分くらい時間をかけてしまった。

投稿編集画面ではちゃんと表示されていなくても、更新してプレビューを押すとエディタ風に表示される

※背景を黒色にしたかったので設定を変更したら問題なくできた。結構簡単。

#!python3
print("Hello World")

結局、プラグインが成功していたのにも関わらず、早とちりで、外部サービスを調べて試すことになった。せっかく調べて実行したので、外部サービスの方もついでに記載しておく。

外部サービスを利用する

他の人のブログを見ていると、GitHubというサイトのＧistというので出来るらしい。

サイト名:　GistHub
サイトURL:　https://gist.github.com/

登録は以下のサイトを参考に進めた。非常にわかりやすかった。

記事名：GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】
サイトURL：　https://uranaka-shobou.com/github-gist/

特に問題なく進められた。サイトが英語なので、会員登録の時にエラーがでて面倒だった。
理由は、IDが短いとか、PASSが短いとかそんなんだと思う。結構厳しかった。

ちなみに、これも、投稿編集画面上では、以下のように表示されている。
（投稿画面上のキャプチャ）

こんなの、初心者の私には正直わかりません。
実は、この再生ボタンが怪しいと思って、更新してプレビューを見たことで、プラグインの方がうまくいっていることに気が付いた。何はともあれ、無事にコードをブログに表示できるようになったので、今後はプラグインを使っていく。補足として一つ勉強になったのは、GitHubというサイトがかなり便利で、仕事でも使われているサイトだということ。自分のレベルではまだ使う必要性を感じていないが、いずれ使う時がくるのかなと思った。