WordPressでソースコードを表示させるプラグインCrayon Syntax Highlighter

WordPressでソースコードを表示させるプラグインCrayon Syntax Highlighter

WordPressでブログを書いている時に、HTMLコードやCSS、PHP、JavaScriptコードをキレイに表示させるプラグインを紹介します。

ブログでHTMLやCSSのソースコードを公開したり解説したりされる方にとっては最高のプラグインと思います。

 

サンプルとして、以下のようにソースを表示させることができます。

Crayon Syntax Highlighterをインストール

インストールはとても簡単です。

以下の手順でWordPressに「Crayon Syntax Highlighter」をインストールできます。

 

WordPressのダッシュボードから「プラグイン」→「新規追加」へ進みます。

 

キーワードに「Crayon Syntax Highlighter」と入力します。

 

「Crayon Syntax Highlighter」が検索されてきますので「今すぐインストール」をクリックします。

 

インストールが終わったら「有効化」をクリックします。

これで、インストールは完了です。

Crayon Syntax Highlighterの設定

WordPressのダッシュボードから「設定」→「Crayon」へ進みます。

 

僕は、基本的にデフォルトで使っていますが、設定の一部を紹介します。

① Theme(テーマ)

テーマは、デザインを数ある中から選択できます。デザインのサンプルをいくつか紹介します。

画像をクリックすると大きくなります。

② Font

フォントサイズと行間のサイズを指定できます。

③ Toolbar

マウスを置いた時にタイトルなど表示するかどうかの設定です。

使い方

使い方は、すごく簡単です。普通にブログを書く感覚で出来ます。

ソースコードを挿入する

 

ソースコードを入れたい行で「<>」のアイコンをクリックします。

 

①にタイトルを入力します。

②ソースコードを入力します。

③Addをクリックします。

これだけです。

 

その3箇所を入力したら、以下のように表示されます。

デザインやフォントサイズなど、個別にも設定できますので、色々試してみるのもいいでしょう。

ソースコードを修正する

一度、入力したソースコードを修正する場合は、以下のようにソースコードの上にマウスを持っていき、クリックしてから「<>」アイコンをクリックすると修正できます。

まとめ

普通にソースコードを書くより、このプラグインを使ってキレイに表示させた方が見栄えがいいですよね。

ソースコードを公開するようなサイトを運営されている方には重宝されるのではないでしょうか。

よく見かけるデザインなのでかなりの方が使用されています。

 

この記事が気に入ったら
いいね ! しよう

WordPressカテゴリの最新記事