ワードプレスのカスタマイズをしたいとき、親切に方法を教えてくださっている方のページから、コードをコピーさせていただいて、うまくできた時、とっても嬉しいですね！

でも、このソースコードの表示。
そのまま書くと、コードにしたがって作用してしまいます。

ソースコードが働くことなく表示させるにはどうすれば良いのか・・・いろいろやってみて、なかなかうまくいきませんでしたが・・・。
ついに、とっても簡単な方法を見つけました！！！！

WordPressプラグイン「Crayon Syntax Highlighter」を使う方法です。このプラグインは、ソースコードの表示もとってもわかりやすい！

さっそく使って見ました。

エディタ形式にソースコードを表示するプラグイン「Crayon Syntax Highlighter」

ではまず、この「Crayon Syntax Highlighter」というプラグインをインストールして有効化します。

「Crayon Syntax Highlighter」は、こんなアイコンのプラグインです。

なんと、このプラグインを有効化するだけで、記事投稿画面に「crayon」というアイコンが表れます。

投稿画面は「テキストエディタ」にしておきます。「crayon」をクリックします。

すると、次のような画面がポップアップされます。

まず、「Title」欄にファイル名を入れます。
このファイル名は、自分で後々わかりやすいものを入れればOKです。ファイル名をいれておかないと、後から自分が何を書き込んだかわからなくなることがありますので、入れておくのがおすすめです。

次に、「Code」の四角の中に、自分が表示させたいコードを入れます。

最後に右上の「Add」を押せば完了です。

こんな感じで表示されます。

簡単ですね！

[chat face=”1574546982283.jpg” name=”クリミア” align=”right” border=”blue” bg=”blue”]意外に簡単にできました！[/chat]

エディタの色を変更する

[chat face=”1574546982283.jpg” name=”クリミア” align=”right” border=”blue” bg=”blue”]背景が黒のエディタ良く見ますよね。
あれ、かっこいいんだけど、どうすればいいのかな？[/chat]

エディタのデザインはたくさんあって、選び放題ということがわかりました。

「setting」の部分の「Classic]をクリックすると、プルダウンでたくさんの種類が出てきます。そこからお好きなデザインを選んでおけば、背景黒や、文字カラーなどなど・・・。いろいろなデザインがあります。

こんなにいろいろ。
まだまだ、たくさんありますよ。

エディタのデザインを選ぶのも楽しいですね。