wordpressでプログラムのコードをかっこよく表示させる方法

ワードプレス

プログラムのコードを色分けしたい!

他の人のブログではコードの色分けしてあるんだけどなぁ。
自分のブログではやり方がわからないな。
どうすればいいんだろ?

みんな大好きプラグインさんに助けてもらおう!
というわけで、やっていこう!

本日ご紹介するプラグインは…

本日ご紹介するプラグイン。
それは『Crayon Syntax Highlighter

プログラムのコードを色分けして表示してくれるよ。

こんな感じ。コードがこの前の使いまわし?
ちょっとわからないなぁ。

調べて入れてみよう。

使い方

まず、上の方。太字とかのとこに<>こんな感じのやつが増えてるはず。
そこをクリックしてみよう!

基本的にこの上の部分しか使わない。

そしてこれは、実際上のやつを書いてた時のやつだね。
まず、コードのタイトル。個々の場合test-1。

Languageで使ってる言語の選択。
今回はC#だね。
割といろんな言語に対応しています。(C#しか使ってない)

そしてでっかい枠にはコードをコピペか、ここで書くか。
ちなみにその辺のエディターとかと違ってここでは色分けされません。

そして最後に右上のAddをクリックで終わり!
これで色分けされますよ。

え?色分けされてない?!

これは俺が初めてこのプラグインを入れたとき。
ビジュアルエディターで色が変わらなかった…。
しかし!実はこれは仕様でプレビューを見てみるとちゃんと色分けされているのだ!

だから気にしない。
ビジュアルエディターでは灰色で塗りつぶされた箱です。

使ってないけどできるらしい

どうやら色を変えたりできるらしい。
やってないけど。

よし。やってみよう。

お。変わった。
下のClassicってとこを変えてみたよ。
他にもGitHub風とかもあったね。

まぁいいか。
めんどくさいしめったに使わないだろう。

注意

今回書いたのはクラシックエディターを使った方法です。
グーテンベルクではどんな動作するのかわかりません。

グーテンベルク。使い方がわからないので。
クラシックエディターを使う方法は下の記事から。

wordpressにアップデート。エディターを旧エディターに元に戻す方法【gutenbergになれない人に】
あれ?ブログ書こうと思ったのに…どうすればいいねん

グーテンベルクが嫌な人は必見。

終わりに

このソースコードをかっこよくするプラグイン。
俺のUnityの記事には必須だね。
そして自動補完機能がないから基本的に別のエディタで書いたコードをコピペしてる。

それでは!

コメント