WordPressの記事内にソースコードをキレイに表示できるプラグイン「Crayon Syntax Highlighter」

HTMLやCSSなどのソースコードをWordPressの記事内にキレイに表示したいと思うことがあると思います。

「整形済みテキスト」でもソースコードを表示できますが、より見やすく細かい設定までできる「Crayon Syntax Highlighter」を使うとよりキレイに表示させることがデキます。

プラグインの特徴

  • さまざまなプログラミング言語のソースコードを記事内にキレイに挿入できる

プラグインのダウンロード

プラグインのダウンロードは下記のリンク先からもできますしWordPress内で「Crayon Syntax Highlighter」と検索してもダウンロードが可能です。現在のバージョンは「2.8.4」。

Crayon Syntax Highlighter
Crayon Syntax Highlighter
Developer: Aram Kocharyan
Price: Free

プラグインの使い方

管理画面の場所

「設定」>「Crayonという欄が表示されます。

crayon1

こちらをクリックすると詳細設定ができますが、特にどこも変更することなくデフォルトで利用できます。

プラグインの設定

投稿ページのテキストモードにすると、「Crayon」という項目が出てくるのこちらをクリックします。

crayon2

ビジュアルモードの場合は下図赤枠の「<>」この記号です。

crayon-2

挿入するソースコードにタイトルを入力し、ソースコードの部分に挿入したいコードを記述します。

crayon3

細かい設定をしたい場合は、詳細設定から任意で設定が可能です。

決定して、「挿入」をクリックすると次のようにソースコードがキレイに挿入されます。

crayon4

下記の言語に対応しています。

crayon5

使ってみた感想のまとめ

整形済みテキストでの表示よりもよりわかりやすくキレイにソースコードを表示できるので、よくソースコードを挿入する記事を書くような方は利用するといいですね。

最新の更新を
プッシュ通知で購読しよう

The following two tabs change content below.

山田 どうそん

現在「電子書籍出版株式会社」というグループ会社の代表をするとともに、個人事業として「トリガーマインド」を運営しています。 法人では電子書籍の出版代行やプロダクトローンチの企画運営、メディア制作代行、などを行っています。「トリガーマインド」は個人向けの教育事業を中心として展開しており個人の方がネットから低資金で集客できるようなノウハウを提供しています。 他には仮想通貨の自動売買の販売。仮想通貨の情報配信なども行っています。

【WordPressの最適な初期設定をすべて解説した動画78個を今だけ無料プレゼント】

 

 

あなたがもしこれからWordPressをはじめようとしているならこのプレゼントをぜひお受け取りください。

 

最初の初期設定を間違えてしまうと、あとから変更することができず、せっかくのWordPressの効果を最大限に活かすことができなくなってしまいます。

 

「長時間かけて作ったブログがあとから間違っていてすべて作り直し」

 

なんてことにならないために、このプレゼントを受け取って正しい設定をしてからスタートしてください。

 


コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

現在「電子書籍出版株式会社」というグループ会社の代表をするとともに、個人事業として「トリガーマインド」を運営しています。 法人では電子書籍の出版代行やプロダクトローンチの企画運営、メディア制作代行、などを行っています。「トリガーマインド」は個人向けの教育事業を中心として展開しており個人の方がネットから低資金で集客できるようなノウハウを提供しています。 他には仮想通貨の自動売買の販売。仮想通貨の情報配信なども行っています。