【WordPress】プラグインCrayon Syntax Highlighterを使ってプログラムコードを表示する

投稿記事の中でサンプルとしてプログラムコードを表示したいときがあります。そんなときに便利なプラグインがあります。プログラムコードを綺麗に表示することができるプラグインです。使い方は簡単です。

 

 

Crayon Syntax Highlighterのインストール

下図のプラグインをインストールして有効化します。

 

 

Crayon Syntax Highlighterの使い方

下図の通り、記事の投稿画面を表示させます。

 

 

投稿欄には、「ビジュアル」タブと「テキスト」タブがありますが、「テキスト」タブを選択し、crayonボタンをクリックします。crayonボタンをクリックすると下図の画面が表示されます。

 

 

「Title」欄にタイトルを入力します。ここは、未入力でも良いのですが、きちんと入力しておいた方がSEOの観点からも良いのではないかと思います。

「Language」ドロップダウンリストから該当するプログラミング言語を選択します。

「code」欄にプログラミングコードを記述します。

Settings欄については、わたしは、デフォルトのままでも良いかなと感じていますので、すべてデフォルト設定のままにしています。

「code」欄にプログラムコードを記述したら、あとは右上の「add」をクリックするだけです。Settingsでいろいろとデザインの変更なんかもできるようですが、結局はデフォルトが一番しっくりきたのでそのままで使っています。

 

 

表示結果

実際に「code」欄に短いJavaScriptを入力して、「Language」欄でJavaScriptを選択し、最後に「add」をクリックします。そして、プレビューしたところ下図のように表示されました。

プログラミングコードらしいデザインになりました。では今回はここまでです。

>コアース株式会社

コアース株式会社

業務システム開発一筋32年

コアースは、オーダーメイドでシステム開発を行う大阪の会社です。 特に中小企業様のニーズにぴったりなシステムをご提案いたします。

CTR IMG