crayon,クレヨン

WEB

記事内にソースコードを表示する『Crayon Syntax Highlighter』

「記事内にソースコードを記述したい場合、どうしたら綺麗に書くことができるのだろう?」

そんなあなたに、Wordpress のプラグイン『Crayon Syntax Highlighter』をご紹介します。

『Crayon Syntax Highlighter』をインストールしよう

『Crayon Syntax Highlighter』は、記事内にエディタ形式でソースコードを表示できるとても便利なプラグインです。

では、早速インストールしてみましょう!!

WordPress の管理画面からプラグインの新規追加を開き『Crayon Syntax Highlighter』を検索します。

Crayon Syntax Highlighter

こちらをインストールして、有効化します。

『Crayon Syntax Highlighter』で検索して見つからない場合は、公式サイトからダウンロードして、wp-content / plugins ディレクトリにインストールして利用することもできます。

Crayon Syntax Highlighter
 

『Crayon Syntax Highlighter』を使ってみよう

『Crayon Syntax Highlighter』のプラグインをインストールすると、投稿画面に下の画像の赤枠で囲んだ <>のマーク が表示されるようになります。

Crayon Syntax Highlighter

 

<>マーク をクリックして、crayon のウィンドウを開いてみましょう。

Crayon Syntax Highlighter

① Title ファイル名
② Language 使用言語
③ Code ソースコード

① の『Title』に記述がないと、コードの知識があまりない方には分かりませんので、なるべく記述するようにしましょう。

④ の『Marked Lines』は、記述することで指定した行を強調することができます。

例えば、3行目を強調したいのであれば『3』と記入します。カンマで区切れば1行ずつ、ハイフンでつなげば複数行を指定できます。

Crayon Syntax Highlighter

上の画像( )では、1行目を強調したかったので『Marked Lines』に『1』と記述しました。背景がクリーム色になっていますね。

ただし、後ほどご紹介する『Theme』で何を選択するかによって、あまり目立たない場合もあります。いろいろと試してみてください。(上の画像で使用しているテーマは『Prism Like』です。)

最後に ⑤ の Add をクリックしたら、完了です。

エディタをカスタマイズしてみよう

プラグインを有効化すると、Wordpress の管理画面の『設定』に『Crayon』という項目が追加されますので、そちらをクリックします。

私の場合は、下の画像の赤枠で囲んだ『Theme』と『Font』と『Toolbar』を変えて使っています。

水色の枠で囲んだ『Enable Live Preview』に を入れると、プレビュー画面が見られるようになります。

Crayon Syntax Highlighter

 

Theme』をいくつかご紹介しますと……

crayon-thema

crayon-thema

crayon-thema

初期設定のままでも充分使えますが、ぜひあなたのサイトに合わせたカスタマイズをしてみてください。

表示速度が遅くなってしまったら?

ブログの表示速度が遅くなってしまったら、Wordpress の管理画面 > 設定 > Crayon を開き、『Misc』の赤枠で囲まれた部分に を入れましょう。

こちらには『必要な時だけ Crayon の CSS と JavaScript を読み込むように試みる』と書かれています。

しかしチェックを入れても、表示速度があまり変わらないこともあるようです。

まとめ

記事内にエディタ形式でソースコードを表示するプラグイン『Crayon Syntax Highlighter』をご紹介しました。

私もこちらのプラグインを取り入れてから、ソースコードの記述がとても楽になりました。読者の方も見やすくなって、一石二鳥ですよね。

ぜひ、あなたも試してみてください。

 

 
スポンサードリンク
 
スポンサードリンク

関連記事

  1. 窓

    WEB

    TCDのテーマ『MAG』で『関連記事カードリンク』を新しいタブで表示する方法

    私も大のお気に入りで、このブログでも使用しているTCDさんのテーマ『M…

  2. cyclists

    WEB

    【意外と簡単?!】FTPソフト『FileZilla』のダウンロードから使い方まで

    FTPソフト『FileZilla』をダウンロードしてインストールする方…

  3. ペンを持つ手

    WordPress

    TCDさんのテーマ『MAG』を愛用する理由

    潔いまでのシンプルさ。それは、私が『MAG』を愛用する一番の理由です。…

  4. 郵便受け

    WEB

    『WP Mail SMTP』のテスト送信でのエラー表示(Could not authenticate…

    『WP Mail SMTP』は、Gmailなどのメールサーバーを使って…

  5. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法

    幅が 960px の inner の中に、幅が 300px、右側のマー…

  6. 404

    WEB

    Broken Link Checker でリンクエラーになってしまう?その対処法について

    Broken Link Checker というプラグインで、リンクエラ…



== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. Google Search Console
  2. コントローラー
  3. 歩道を歩く男性
  4. pencils
  5. ガネーシャ
  6. 海を背景にフレームを持つ女性の手
  7. wordpress,ワードプレス
  8. ケーブル
  9. 404
  10. サーバー

当サイトで使用しているテーマはこちら!!

アフィリエイトサイトにはDiverもお勧め!!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. mistake

    WEB

    『FileZilla』で転送に失敗した場合の操作方法について
  2. チェックリスト

    WEB

    『wpX Speed』でDNSレコードから所有権を確認する方法
  3. いいえ、結構です。

    WEB

    お名前.comの自動更新の設定を解除する方法
  4. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!
  5. 段ボールを持つ女性

    WEB

    エックスサーバーから『wpX Speed』へ移行する方法
PAGE TOP