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』をご紹介しました。

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

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

 

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

チェーンfooter を最下部に固定したい場合のコード前のページ

Photoshopで簡単!!画像に枠線を作る方法次のページ海を背景にフレームを持つ女性の手

関連記事

  1. 郵便受け

    WEB

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

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

  2. ネットショッピング

    WEB

    エックスサーバーで常時SSL化する方法について

    こちらでは、Webサイトを常時SSL化する方法について、説明していきま…

  3. 子猫をのせた乳母車を押す親猫

    WEB

    とっても簡単!!WordPress(ワードプレス)の子テーマの作り方

    ずっと面倒だと思っていた WordPress(ワードプレス)の子テーマ…

  4. 緑のドア

    WEB

    ドメインって何? どうやって決めるの?

    WordPress でブログを始めるには、レンタルサーバーとの契約、ド…

  5. パン

    WEB

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

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

  6. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の使い方

    データベース内の文字列の書き換えに便利な『Search Replace…

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

wordpress

よく読まれている記事

  1. ガッツポーズする男性
  2. 黄色い壁を背に喜ぶ女性
  3. ネットショッピング
  4. ガネーシャ
  5. 子猫をのせた乳母車を押す親猫
  6. 3匹のカエル
  7. サーバー
  8. 洗濯物
  9. 空にかざした水晶
  10. 腕を交差させる草原に座った男性

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

Gutenberg 完全対応のテーマならコレ!!

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

パソコンを覗き込む二人の女子
  1. ペンを持つ手

    WordPress

    TCDさんのテーマ『MAG』を愛用する理由
  2. ガッツポーズする男性

    WEB

    アドセンスのサイト追加審査に一発合格したブログの詳細を公開!!
  3. 緑のドア

    WEB

    ドメインって何? どうやって決めるの?
  4. チェックリスト

    WEB

    『wpX Speed』でDNSレコードから所有権を確認する方法
  5. ドメイン

    WEB

    お名前.com でドメインを取得する方法
PAGE TOP