【WP】ソースコードを綺麗に表示するプラグイン「Crayon Syntax Highlighter」

ブログ運営
スポンサーリンク

<pre>タグと<code>タグは見づらい

<pre>タグと<code>タグを使用してソースコードの記述を表示するには、デフォルトだとこのようになります。

しかし、これでは縦幅が大きく、色味も無いので見づらいです。

 

そこで、Wordpressのプラグインで何か良いのはないかなと探していたところ「Crayon Syntax Highlighter」と言うプラグインを発見しました。

 

ソースコードを綺麗に表示するWordpressプラグイン「Crayon Syntax Highlighter」

完成図のビジュアル

 

インストール方法

管理画面 > プラグイン > 新規追加 > 「rayon Syntax Highlighter」で検索 > 今すぐインストール > 有効化 >

 

設定方法

管理画面 > 設定 > SyntaxHighlighter

設定は下の方にプレビューがあるので、見ながら設定を変更していましょう。

私はデフォルトのままで何もいじっていません。

 

使い方

投稿や固定ページの「ビジュアル」ではなく「テキスト」の方に「crayon」とあるのでクリック

 

下のような画面が出てくるので「Title」や「コード」に記述して「Add」をクリック

 

このように表示されました!
見やすい!!

 

 


参考記事
https://miningoo.com/154
http://michisugara.jp/archives/2011/syntax_highlighter.html

ありがとうございました!

コメント