ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

【WordPress】投稿記事内にソースコードを綺麗に表示させるプラグイン Crayon Syntax Highlighter

| カテゴリー : WordPress

ホームページ制作の技術メモに役立つ!日本語対応のWordPressプラグイン

Web制作やアプリ開発を行っていて、ソースコードを自分のブログにメモしたい時ってありますよね。

今回はそんな時にコードをスッキリと綺麗に表示させることができるWordPressプラグイン「Crayon Syntax Highlighter」をご紹介します。

Crayon Syntax Highlighter

似たようなプラグインはたくさんあるのですが、私は以下のような点が気に入っています。

  • 日本語対応が嬉しい
  • 行数表示、折り返し、ハイライトなどのオプションが柔軟に設定できる
  • 操作方法がシンプルでわかりやすい
  • 記事表示時の見た目

最後の項目は完全に好みの問題ですが、使いやすいプラグインなのでオススメです。

まずはインストール

WordPressの管理画面のメニューにある「プラグイン > 新規追加」からCrayon Syntax Highlighterを検索してインストールします。インストール後にプラグインを有効にすることを忘れずに。

ファイルをアップロードしてインストールする場合はWordPress.orgからプラグインファイルをダウンロードしてください。

豊富なオプション設定

インストールが済んだらプラグインの設定を確認しておきましょう。といってもデフォルト設定のままでも問題なく使えます。

WordPress管理画面の「設定 > Crayon」からプラグインの設定を確認・変更することができます。

カラーテーマや余白などソースコードの見た目の調整から、ツールバーの表示の仕方など様々な項目が設定できます。

設定変更をしたらページ下の「変更を保存」ボタンで保存しておきましょう。

今回はマウスオーバー時のツールバーのアニメーションが邪魔だったのでツールバーを「常に表示」に、コードの折り返しを有効にするために「Wrap lines by default」にチェックを入れました。

wp-plugin-crayon01

他にも多くの項目が触れますので好みの設定にしてみてください。

簡単操作で記事内にソースコードを挿入

実際に記事にソースコードを埋め込む操作は簡単です。

wp-plugin-crayon02

記事投稿画面のテキスト入力フォーム上に配置されている「crayon」ボタンをクリックするだけで、ソースコードを挿入するためのエディタが現れます。

wp-plugin-crayon03

現れたテキストエリア部分にソースコードをコピーして「挿入」リンクをクリックすればOKです。

実際にはソースコードが以下のサンプルのように表示されます。

以上になります。

ホームページ制作やプログラミングのソースコードを残す際にぜひ活用してみてください!

Crayon Syntax Highlighter

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。