WordPress

WordPressプラグイン「Crayon Syntax Highlighter」でソースコードを表示する設定方法

WordPressでコードを表記する際に使うプラグイン「Crayon Syntax Highlighter」について説明します。

 

私は、記事にコードを貼り付ける時、「Power Point」を使って、画像を作成し、それにコードを貼り付けていました。

 

「Crayon Syntax Highlighter」を使うと、そのような手間をかけずに、貼り付けることができますよ。

 

 

Sponcerd Link



1.プラグイン「Crayon Syntax Highlighter」のインストー、有効化

まず「Crayon Syntax Highlighter」をインストールし、有効化ましょう。

手順を説明して行きます。

 

①「プラグイン」-【新規追加】をクリックしてください。

②キーワードに「crayon」と入力し、「Crayon Syntax Highlighter」の【今すぐインストール】をクリックしてください。

③【有効化】をクリックしてください。

 

できました。

 

設定を選択し、【Crayon】をクリックしてみてください。

 

 

英語で表示されていて、よくわかりません。

 

 

WordPressのバージョンによっては、日本語表示されない場合があります。日本語表示させる方法を説明します。

 

2.「Crayon Syntax Highlighter」の日本語化

以下の2つのファイルを削除すると日本語化されるのでやってみましょう。
「crayon-syntax-highlighter-ja.mo」「crayon-syntax-highlighter-ja.po」

 

①FTP接続するのにフリーソフトの「FileZilla」を使います。サイトのSSL化の際も使いましたので覚えていますね。

忘れているようなら、以下の記事を読んでみてください。

ロリポップサーバーでSSL化(無料)の設定方法(WordPress)②「.htaccess」ファイルの設定

②「FileZilla」で接続したら、リモートサイト(サーバー側)「 /wp-content/languages/plugins」 に移動してください。


③ 「crayon-syntax-highlighter-ja.mo」「crayon-syntax-highlighter-ja.po」のファイルは削除しても良いですが、このディレクトリにバックアップ用のディレクトリ(例:backup)を作り、そちらに移動させましょう。

日本語化できました。

 

 

3.「Crayon Syntax Highlighter」の設定

日本語化できましたので、「Crayon Syntax Highlighter」の設定について見ておきましょう。

 

①「テーマ」:表示の設定。②「フォント」:コードのフォント、サイズの設定。

③「サイズ」:コードを表示させる枠の大きさの設定。

④「ツールバー」:コードにカーソルを当てたときのツールバーの表示設定。

⑤「行」:コードを表示する行について色や行番号の表示を設定。

⑥「コード」:表示とその制限の設定。

⑦「タグ」:「Crayonsとして<pre>タグをキャプチャ」はチェックを入れておく。

⑧「タグエディタ」:表示がおかしくなる場合があるので、チェックを外した方が良い。

4.実際の使用

①投稿の編集画面でタブを「ビジュアル」→「テキスト」へ変更します。

②メニューボタンの中から【crayon】をクリックします。

 

③「Crayon Syntax Highlighter」のメニューが表示されます。

タイトル欄にタイトルを入力し、プログラム言語はDefaultのままでかまいません。

④コード欄にコードを入力し、右上の【挿入】をクリックします。

⑤コードが追加されます。

ABOUT ME
komiya
komiya
中小企業で事務の仕事をしています。ホームページ、アフィリエイトの初心者です。コミュニケーションが不得手です。これまで、コーチングやアドラー心理学の講座などコミュニケーションを改善しようと色々受講しましたが、職場ではうまく行かず、むしろ悪化させてしまいました。目標を切り替えて自分1人で、できることをしようと考え、Webスクールに通いこのホームページを作りました。社会人として働いていますが、精神的にはひきこもりです。こんな私ですが、どうかよろしくお願いします。