2016年10月16日

ソースコードを記事上に簡単に表示できるプラグイン「Crayon Syntax Highlighter」を入れてみました【WordPress】


WordPress

ブログに技術的な事も書いていこうと考えると、どうしても記事上にソースコードを記載する必要性が出てきます。

しかしソースコードを正しく表記するには変換しないといけないので手間がかかります。

そこで簡単にソースコードを記事内に貼り付けられるWordPressのプラグインを導入する事にしました。

スポンサードリンク

Crayon Syntax Highlighter

今回私がインストールしたプラグインは「Crayon Syntax Highlighter」。殆どの言語に対応しているようです。

インストール方法

WordPressの管理画面 > プラグイン > 新規追加

に移動し、キーワードに「Crayon Syntax Highlighter」を入力し検索。インストール後、有効化をクリックすればインストール完了です。

設定管理画面

このプラグインの管理画面はこちらになります。

WordPressの管理画面 > 設定 > Crayon

ただ個人的には管理画面をいじる必要性は特になく、有効化してすぐに使って問題ありませんでした。

ソースコードの挿入方法

WordPressの管理画面 > 投稿 > 新規投稿

で記事の入力方法を「ビジュアル」ではなく「テキスト」を選択すると、編集エディタに「Crayon」というボタンがあるので、それをクリックします。

挿入画面が出てくるので「コード」の部分にソースコードを入力して「挿入」ボタンを押せば記事への入力が完了します。

こんな感じです。

ソースにカーソルを持っていくと上部左側にメニューが出てきて、コピーも簡単です。

複雑な設定も可能なようですが、インストール後そのままサクッと使えてしまうのはありがたいですね。


プロフィール

サムリ
  • サムリ
  • 埼玉県三郷市在住。フリーランス。小4と小1の男の子の父。ミニチュアダックス(10才)のモカを溺愛
  • 2016年10月現在月間12万PVの地域情報ブログ「三郷ぐらし」の編集長
個人アカウント


ブログ更新通知アカウント

週間人気記事ランキング

月別アーカイブ

リンク