WordPressの使い方！ ソースコードを記事に埋め込んで見やすく表示する方法

ブログにプログラミングコードを載せるとき、構文ごとに色分け（シンタックス・ハイライト）した方が見やすいです。

“Crayon Syntax Highlighter”というプラグインを利用すれば、ソースコードをプログラミング用のエディタのようにきれいに表示することができます。

プラグインの使い方

プラグインをインストール、有効化すると記事の編集エディタにボタンが追加されます。

追加された専用ボタンをクリックすると、コード挿入の設定画面が表示されます。

下図の設定画面で、必要な設定（タイトル、言語、コード登録など）をして、右上にある”Add”をクリックすると、記事の編集エディタにコードが表示されます。

コードの表示例

次にコードの表示例を示します。ひとつめがビジュアルエディタにソースコードを直接ペーストしたもの、ふたつめがプラグインを使ってソースコードを挿入した例になります。

今回プラグインを導入することで、ブログ上のコードを圧倒的に見やすくできました！

他にもコードの外観を変更できるテーマが多く用意されているようなので、今後試していきたいです。

プラグイン未使用

void setup()
{
size(400, 240) ;
}

void draw()
{
background(0) ;
fill(#03FF1D) ;
textSize(40) ;
text(“Hello, world”, 15, 50) ;
}

プラグイン使用