この記事は約 3 分で読めます ( 約 1298 文字 )

記事の概要

この記事ではWordPressでソースコード等を扱いやすく・見やすくすることができるプラグインである「Aram Kocharyan」氏の「Crayon Syntax Highlighter」を紹介します。

「Crayon Syntax Highlighter」とは?

WordPressにソースコード等を扱いやすく・見やすくすることができる「Syntax Highlighter」を導入できるプラグインです。

「Simple Custom CSS and JS」の導入方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”プラグイン”をクリックします。
wp_plugin-001

手順3

”プラグイン”の中の”新規追加”をクリックします。
wp_plugin-002

手順4

画面右上の検索欄に”Crayon Syntax Highlighter”と入力します。
crayon_syntax_highlighter-001

手順5

下記画像のプラグインを探して”インストール”をクリックします。
crayon_syntax_highlighter-002

手順6

”インストール”のボタンが”インストール中”を経て”有効化”ボタンに変わるので、”有効化”ボタンをクリックしたらインストールは完了です。

「Crayon Syntax Highlighter」の設定方法

手順1

WordPressの管理画面の左メニューの”設定”にカーソルを持っていき、その後”Crayon”をクリックします。
crayon_syntax_highlighter-003

手順2

「Crayon Syntax Highlighter」の設定内容は以下画像の通りです。管理人はデフォルトで使用しているため説明は割愛します。
crayon_syntax_highlighter-004-1 crayon_syntax_highlighter-004-2 crayon_syntax_highlighter-004-3 crayon_syntax_highlighter-004-4

「Crayon Syntax Highlighter」の挿入方法

手順1

記事執筆中に表示される上部メニューの”Crayon”ボタンをクリックします。
crayon_syntax_highlighter-005

手順2

タイトルを記入し、プログラム言語を選び、コードを入力し、挿入をクリックします。下部に設定もあります。
crayon_syntax_highlighter-006-1 crayon_syntax_highlighter-006-2

手順3

記事にはこんな感じに表示されます。言語はC言語、マークを5-7に設定してみました。
#include <stdio.h>

int main(void){
    int x,y;
    printf("二つの整数を入力してください");
    printf("整数x:"); scanf("%d",&x);
    printf("整数y:"); scanf("%d",&y);

    printf("x + y = %d\n",x + y);
    printf("x - y = %d\n",x - y);
    printf("x * y = %d\n",x * y);
    printf("x / y = %d\n",x / y);
    printf("x % y = %d\n",x % y);

   return (0);
}

まとめ

この記事ではWordPressでソースコード等を扱いやすく・見やすくすることができるプラグインである「Crayon Syntax Highlighter」について書きました。

あなたがもし、HTMLやCSS、PHP等のスクリプトをブログで公開する際はぜひとも導入しておきたいプラグインです。

この記事があなたのお役に立てれば幸いです。