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

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します

    画像を圧縮するならパンダでおなじみの『TinyPNG』、画質を落とさず…

  2. パン

    WEB

    MAGでトップページのみ、パンくずリストを非表示にする方法

    TCDさんのテーマ『MAG』は、デフォルトのままだとトップページにもパ…

  3. 404

    WEB

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

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

  4. ペンを持つ手

    WordPress

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

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

  5. 窓

    WEB

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

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

  6. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で即解決!!

    WordPressでは『Contact Form 7』というプラグイン…



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

wordpress

よく読まれている記事

  1. ドメイン
  2. Google Search Console
  3. 子猫をのせた乳母車を押す親猫
  4. 広告
  5. 黄色い壁を背に喜ぶ女性
  6. いいえ、結構です。
  7. 緑のドア
  8. タイプライター
  9. パン
  10. シャットダウン

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

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

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

パソコンを覗き込む二人の女子
  1. 段ボールを持つ女性

    WEB

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

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!
  3. 緑のドア

    WEB

    ドメインって何? どうやって決めるの?
  4. いいえ、結構です。

    WEB

    お名前.comの自動更新の設定を解除する方法
  5. ブランコに乗る女の子

    WEB

    エックスサーバーで『サブドメイン』を設定して、WordPressをインストールし…
PAGE TOP