ブログ運営

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

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

調査開始

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

方法は大きく分けて3つ

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

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

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

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

WordPressのプラグインを使う

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

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

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

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

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

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

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

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

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

外部サービスを利用する

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

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

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

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

 

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

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

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

CSSでカスタマイズする

今回目的は、コードをエディタ風に表示する。出来れば黒色で。ということだったので、プラグインで成功したので、CSSは調べていない。
HTMLとCSSは勉強していないので、おいおいやる機会があると思うので、その時にやる。

まとめ

調べていくとやり方がわかるし、試してみると理解できる。今回は勝手な早とちりでコードをエディタ風にが表示できない!と思ってしまったが、これからは何でも早とちりしないように気を付けよう。