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

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

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

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

既にCrayon Syntax Highlighterは50,000人以上の方がインストールされています。

 

Crayon Syntax Highlighter」は、以下のようにソースコードを表示させることができます。

 

Crayon Syntax Highlighterをインストール

インストールはとても簡単で、以下の手順でWordPressに「Crayon Syntax Highlighter」をインストールできます。

 

 手順1:プラグインの新規追加 

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

プラグインの新規追加

 

 手順2:Crayon Syntax Highlighterを検索

  キーワードに「Crayon Syntax Highlighter」と入力し、プラグインの検索をします。

Crayon Syntax Highlighterの検索

 

 手順3:Crayon Syntax Highlighterのインストール

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

Crayon Syntax Highlighterのインストール

 

 手順4:Crayon Syntax Highlighterの有効化

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

Crayon Syntax Highlighterの有効化

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

 

Crayon Syntax Highlighterの設定

 

 手順1:Crayon Syntax Highlighterの初期設定

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

Crayon Syntax Highlighterの初期設定

 

 手順2:Crayon Syntax Highlighterの設定

基本的には、デフォルトでOKですが、テーマとフォントだけ好みに設定しましょう。

 

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

 Theme(テーマ)

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

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

 

 

 フォント

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

 

 Toolbar

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

 

Crayon Syntax Highlighterの使い方

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

 

ソースコードを挿入する

 

 手順1:<>をクリック

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

Crayon Syntax Highlighter

 

 手順2:ソースコードを入力

表示された画面にタイトルとソースコードを入力します。

  • タイトルを入力します。
  • ソースコードを入力します。
  • Addをクリックします。

Crayon Syntax Highlighter

これだけです。

 

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

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

 

ソースコードを修正する

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

Crayon Syntax Highlighter

 

ソースコードの一部をハイライトする

ソースコードの一部を黄色のマーカー等でハイライトして目立つようにできます。

 

 ハイライト前

 

 ハイライト後

6行目の「width: 100%;」を強調したい場合

 

ハイライトしたい行数を確認したら「Marked Lines」に行数を入力します。

6行目の場合は「6」と入力し、6行目〜8行目をハイライトしたい場合は「6−9」と入力します。

Crayon Syntax Highlighter

「ここが重要ですよ!」とか「この部分を変更してください」とアクセントをつけたい部分にハイライトすると便利ですね。

 

 Facebookのいいね!を2倍に増加させるプラグイン

 

まとめ

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

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

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

 

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

WordPressカテゴリの最新記事