Crayon Syntax Highlighter

ブログのカスタマイズとかの解説記事で

『ここの記述をこう書き換えて・・・』

って説明したいときに、綺麗に分かりやすくソースコード表示させたいですよね!

 

そのまま記事中にコードを記載すると、見にくかったりコピー&ペーストをした時におかしくなったりする事もあるので、

便利なプラグインCrayon Syntax Highlighter】を使っていきましょう。

設定もほとんど必要なく、使い方も簡単です。

 

それではインストールから順番にご紹介していきますね(^-^)

 

『Crayon Syntax Highlighter』のインストールから有効化

①WordPressダッシュボードの『プラグイン』から【新規追加】をクリック

Crayon Syntax Highlighter

矢印

②右上の検索窓に【Crayon Syntax Highlighter】と入力すると、左の赤枠のように表示されます

Crayon Syntax Highlighter

矢印

【今すぐインストール】をクリック

Crayon Syntax Highlighter

矢印

④ボタンが【有効化】に変わるのでクリック

Crayon Syntax Highlighter

これでインストールと有効化は完了です!

 

『Crayon Syntax Highlighter』の設定

このプラグインは特別な設定をしなくても使えますが、デザインや文字サイズなどを変更もできますので一通り見ていきましょう。

 

①ダッシュボードの『設定』から【Crayon 】をクリック

Crayon Syntax Highlighter

矢印

②『テンプレート』と『文字』の変更

Crayon Syntax Highlighter

・・・テンプレートの変更ができます。

下にプレビューが表示されるので、ここで各種設定後のデザインを確認しましょう。

・・・フォントの種類・フォントサイズ(文字サイズ)の変更ができます

矢印

③赤枠部分で『上下の余白』を調整

Crayon Syntax Highlighter

矢印

④『ツールバー』をどのように表示させるか選択

Crayon Syntax Highlighter

初期状態では『マウスを載せた時に表示させる』設定になっています。

私は常に表示させる【Always】にしました。

矢印

⑤下の方の『Attempt to load Crayon’s CSS and JavaScript only when needed』にチェックを入れる

Crayon Syntax Highlighter

『必要なときにのみCrayonのCSSとJavaScriptを読み込もうと試みる』という意味で、ここにチェックを入れておくと表示速度への影響を多少抑えられるかもしれません。

矢印

⑥最後に【Save Changes(変更を保存)】をクリック

Crayon Syntax Highlighter

以上で設定は完了です。

プレビューを見ながらお好みで変更してみてください(^-^)

 

記事にソースコードを表示させる方法

今回は記事内のこの場所に↓表示させていきたいと思います!

Crayon Syntax Highlighter

 

 

①『ビジュアルエディタ』で【<>】のマークをクリック

Crayon Syntax Highlighter

矢印

②必要箇所を入力します(以外は未入力でもOK)

Crayon-Syntax-Highlighter

タイトル
入力するとツールバーに表示されます(未入力でもOK)

言語
選択するとツールバーに表示されます(未選択でもOK)

マーカー
入力すると黄色いマーカーがひかれます(未入力でもOK)
何行目かを指定するので、複数の場合は【2,5,8】など『,』で区切って入力、
複数行にわたってマーカーをひく場合は【3-5】など『』でつなげて入力します

コード
表示させたいコードを入力します(必須

矢印

③下の部分でデザインやフォントなどを個別に設定することもできます

Crayon-Syntax-Highlighter

※ここでの設定は、このコードに限って有効です。

すべての設定を変えたい場合はダッシュボードの『設定→Crayon』から設定変更をする必要があります。

矢印

【Add(挿入)】をクリック

Crayon Syntax Highlighter

矢印

⑤記事内にソースコードが表示されました。(入力画面ではこのような表示です)

Crayon Syntax Highlighter

矢印

⑥記事を公開すると、実際にはこのように見やすく設定されています(^-^)

 

記事内からコピーするときは・・・

これはあなたが自分のブログにソースコードを記述するときではなく、他のサイトやブログからソースコードをコピー&ペーストするときの方法です。

 

①ツールバーの右から2番目のマークをクリック

Crayon Syntax Highlighter

矢印②コードがすべて選択されて、【CTRL+C】でコピーして、【CTRL+V】で貼付けるように指示が出ます

矢印

③該当の箇所に貼り付けます

 

おわりに

【Crayon Syntax Highlighter】はいかがでしたでしょうか?

読者さんにとって見やすいことはもちろん、コピペがしやすく便利になります(^-^)

(そのまま記載されていると、正しく選択できなかったりするので。。。)

 

ブログカスタマイズの方法の記事を書く事があるなら、ぜひ使ってみてくださいね。