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

使ってみた感想のまとめ

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

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

ABOUTこの記事をかいた人

こんにちは。山田どうそんです。37歳未婚。現在、東京都江東区に住んでいます。出身は佐々木希と同じ、秋田県秋田市。趣味は筋トレで週3回トレーナーをつけてジム通いしています。ビジネスは、コンテンツ制作のコンサルティングを行っています。
もともと、月収15万円の借金だらけ。未来に何一つ希望を持てなかった僕ですが、インターネットのビジネスをしたことで今では値段を気にせず買い物ができるようになりました。そうなれた要因の一つに「コンテンツ制作のスキル」を身につけたことがあります。
なぜ、「コンテンツ制作のスキル」を身に着けたことで稼げるようになったのか?それは、「コンテンツの質」=「集客力」だからです。多くの方がビジネスをはじめて、うまくいかないのは集客ができないからです。集客をするために、Facebookを始めたり、インスタグラムをはじめたり、YouTubeをはじめたり・・・。いろいろ試してみても、思ったようにうまくいかない人が多いのが現状です。
そんな、集客で悩んでいる人のために、どうやってコンテンツ力を上げて集客力を身につけられるのかをコンサルしています。
僕は、ネットビジネスで人生を大きく変えることができました。一生貧乏で一生自分に自信を持てない人生を歩み続けると思っていました。それが、今では上場企業の部長クラスの人よりも稼げるようになり、自分に大きな自信を持てるようになりました。それは、正しい知識を正しく学んでいったからです。ビジネスで集客力を身に着けて自分のビジネスを成功させたいという方のために力になりたいと思っています。
そして、僕は、もっともっと成長して人生を楽しみたいと思っています。