Crayon Syntax Highlighterの設定!WordPress記事内にソースコードを!

ワードプレスの記事内にソースコードを
記入したい時に便利なWordPressプラグイン
「Crayon Syntax Highlighter」
を紹介します。

このプラグインを使用することで、
簡単に、しかも、キレイで読者が
見やすい表示にしてくれます。

ソースコードを記事内に挿入したい場合は、
プラグイン「Crayon Syntax Highlighter」
をインストールしておきましょう。
 

このプラグインは
インストール&有効化だけではなく、
設定する項目があります。

設定方法を紹介しますので、
この記事を参考に設定してみてください。

Crayon Syntax Highlighterのインストール

まず、
「Crayon Syntax Highlighter」
のインストールと有効化をします。

ダッシュボードの「プラグイン」
→「新規追加」をクリック。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード 
 

「Crayon Syntax Highlighter」を検索して、
【いますぐインストール】をクリック。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード プラグインを追加
 

有効化まで完了したら、
次に設定をしていきます。

Crayon Syntax Highlighterの設定方法

ダッシュボードの「設定」→「Crayon」
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード 初期設定
 

設定項目がたくさんありますが、
基本的にデフォルトで問題ありません。

ここでは、デフォルトから
変更する部分のみ紹介します。

ツールバーを「常に表示」に設定

ツールバーは、以下のように
ソースコードの上部に出てきます。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード ツールバー
 

このツールバーを「常に表示」
するように設定します。

設定画面を以下です。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード ツールバーの設定
 

デフォルトの「マウスオーバー時」ですと、
マウスがソースコードの上を通るたびに
ツールバーの表示・非表示が繰り返されます。

常に表示させた方が読者も見やすいので
「常に表示」にしておきましょう。

「常にスクロールバーを表示する」に設定

以下のように、コードの
「常にスクロールバーを表示する」
にチェックを入れます。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード 常にスクロールバーを表示する
 

スクロールバーが表示されるのは、
一行のソースコードが画面の幅以上
に長い場合です。以下参照。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード スクロールバー
 

これもツールバーの時と同様、
常に表示させておくことで
ユーザーが見やすくなります。
 

以上で、設定は完了です。

一番下にある
【設定を保存】をクリックします。

Crayon Syntax Highlighterの使い方(ソースコードの挿入方法)

まず、ソースコードを
記事本文内にコピペします。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード 記事作成
 

そして、
ソースコード部分を選択した状態で
【CRAYON】ボタンをクリック。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード ボタンクリック
 

以下の様な
「挿入画面」ウィンドウが表示されます。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード 挿入画面 add code
 

そのまま何もせず、
右上になる【挿入】をクリックすれば完了です。

HTMLタグの「<」や「>」は
ブラウザ上では本来表示されませんが、

「Crayon Syntax Highlighter」を使用すると
自動的に「&lt;」「&gt;」に変換され、
ブラウザ上で「<」「>」と表示することができます。
 

挿入時のオプション設定でよく使うのが、
上の画像で赤枠で囲んだ「マークするライン」です。

ここに目立たせたい(色付けしたい)行番号
を入力すると、その行に色付けがされます。

この例では
「3行目と7行目」に色付けをしています。

以下、
挿入した結果の記事プレビュー表示です。
Crayon Syntax Highlighter 設定 WordPress 記事内にソースコード 挿入結果
 
 
以上が「Crayon Syntax Highlighter」の
設定方法と使い方です。

いろんな設定項目があるため
複雑に見えますが、実際に
使用する設定は非常に少ないです。

今回の記事で紹介した項目のみ
設定すれば十分でしょう。

WordPress記事内に
ソースコードを挿入する場合は

「Crayon Syntax Highlighter」
が非常に便利で簡単に使えますので、
一度使ってみることをおすすめします。

「Crayon Syntax Highlighter」
をインストールしたら、
以下も合わせて設定しましょう。
Crayon Syntax Highlighterのスクロールバー高さ(幅)の変更方法

↓変更前
Crayon Syntax Highlighter スクロールバー 高さ 幅 変更方法 デフォルト

↓変更後
Crayon Syntax Highlighter スクロールバー 高さ 幅 変更方法 編集後

 

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!
(PDFとサイト版の両方をプレゼント)
AFFIKATSUGuideBook

>> メルマガ登録はこちら <<

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。

CAPTCHA