WordPressでソースコードを説明する時のオススメプラグイン「Crayon Syntax Highlighter」

・WordPressに綺麗にソースコードを挿入したい
・ソースコードを書く時に先頭のスペースを保持したい

という悩みを解決する為の記事です。

WordPressは自動で先頭のスペースを削除したり、文字をエンコードしたりする為、そのままだとソースコードを綺麗に記述することができません。
特にPythonなどインデントに意味がある言語ではこのWordPressの仕様は致命的です。

今回は、ソースコードのインデントを保持しつつ綺麗に埋め込むことができるプラグイン「Crayon Syntax Highlighter」について紹介します。

関連記事>>SEブロガーにオススメのWordPressプラグイン

「Crayon Syntax Highlighter」のメリット

「Crayon Syntax Highlighter」の主なメリットとしては「ソースコードコードのインデックスを保持できる」、「ソースコード内の特殊文字をそのまま出力できる」の2つです。

ソースコードのインデックスを保持できる

WordPressの記事の先頭にスペースを入力しても自動的に削除されてしまいますが、「Crayon Syntax Highlighter」で出力したタグの中であればインデックスを保持したまま記事に表示することが可能です。

ソースコード内の特殊文字をそのまま出力できる

WordPressは悪意のあるコードを実行しない為に、HTMLタグなどの一部の文字は特殊文字として扱われる為、そのまま表示できない場合があります。
「Crayon Syntax Highlighter」で出力したタグの中であれば、特殊文字であってもそのまま出力することができます。

「Crayon Syntax Highlighter」の導入方法

通常のプラグインと同様にプラグインの新規追加から追加することができます。

1.WordPressメニューのプラグインの「新規追加」をクリックします
2.「Crayon Syntax Highlighter」の「今すぐインストール」をクリックします
Crayon Syntax Highlighterのインストール
3.「有効」をクリックします

以上でインストールは完了です。

「Crayon Syntax Highlighter」の使い方

1.WordPressの記事を開き、「crayon」ボタンをクリックします
crayonボタンをクリック
2.ソースコードを入力して、「add」ボタンをクリック
ソースコードを入力して、「add」ボタンをクリック

以上で、ソースコードをpreタグでくくった状態で出力できます。

「Crayon Syntax Highlighter」の出力内容

◆表示結果

以上、「Crayon Syntax Highlighter」の導入方法と使い方でした。

まとめ

ソースコードを説明する場合に、HTMLやWordPressの仕様によりただソースコードを記述するだけでは思った通りの記述はできません。
エンジニアの中には自分の力で解決したくなる方もいると思いますが、記事と関係ない部分に必要以上に労力を割くのは避けましょう。

そこに時間を使うよりも良い記事をたくさん書くことに時間を使った方が読書の為になります。
自分の力で解決する前に有効なプラグインがないか探すようにしましょう。

コメント

タイトルとURLをコピーしました