Crayon Syntax Highlighterの使い方-ソースコードを記事内に表示する設定

Crayon Syntax Highlighter

今回は、記事内にソースを表示するためのWordPressプラグイン『Crayon Syntax Highlighter』を紹介します。

このプラグインを使用することで、簡単に綺麗にソースを表示することができます。ちなみに、こちらが実際に使用してみた際の表示例です。

 

設定方法

それでは早速Crayon Syntax Highlighterの設定方法を解説していきます。

 

1.『Crayon Syntax Highlighter』をインストールして有効化します。

WordPressプラグインをインストールし、有効化する方法はこちらを参考にしてください。

▶ WordPressプラグインの3つのインストール方法から有効化まで

 

2.WordPressの管理画面から『設定』→『Crayon』と進みます。

Crayon Syntax Highlighter

すると設定画面に移ります。

Crayon Syntax Highlighter

 

3.基本的には変更しなくても良いのですが、1箇所変更することをおすすめします。

『ツールバー』の『』のチェックを外すことです。

Crayon Syntax Highlighter

わかりやすく画像で説明しますね。

 

チェックがついたままだと…

Crayon Syntax Highlighter

というようにマウスオーバーした際にツールバーがコードに被ってしまいます。

そこで、先ほどのチェックを外すと…

Crayon Syntax Highlighter

といようにコードに被ることなく表示されるのです。最初にサンプルとして表示したコードも被らないように設定されていますので、コードの部分にマウスオーバーしてみてください。

設定はこれで完了ですので実際に記事に挿入してみましょう。

 

4.記事の投稿画面に移り、挿入したい箇所にきたら下の画像の赤枠で囲ったマークをクリックします。

Crayon Syntax Highlighter

すると、このように挿入することができます。

実際に記事を見てみると…

Crayon Syntax Highlighter

というように表示され、完了です。

 

最後に

ソースコードを挿入するWordPressプラグインは他にもありますが、私がいろいろ使用してみた感じだと、このプラグインが一番使いやすかったです。

おすすめプラグインの一つなのでぜひ使用してみてください。

メールマガジン登録





コメントを残す

サブコンテンツ

このページの先頭へ