ワードプレスの記事内にソースコードを表示させるプラグイン「Crayon Syntax Highlighter」のインストールと使い方!

WRITER
 
この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

ワードプレスの記事内にソースコートを表示させたい時、そのままコピペするとうまく表示されないことがあります。

そんな時はワードプレスのプラグイン「Crayon Syntax Highlighter」が便利です。

綺麗に表示できるので見やすいんですよ。

それではさっそく「Crayon Syntax Highlighter」の設定と使い方を紹介しますね!

 

ワードプレスのプラグイン「Crayon Syntax Highlighter」のインストールと使い方

「Crayon Syntax Highlighter」をインストール

まずは「Crayon Syntax Highlighter」をインストールしましょう。

左のメニューから「プラグイン」→「新規追加」をクリックします。

 

すると、プラグインを追加する画面が表示されます。

右の検索エリアに「Crayon Syntax Highlighter」と入力すると、下のエリアに検索結果が表示されます。

そこに「Crayon Syntax Highlighter」が表示されているので、「今すぐインストール」をクリックします。

するとインストールが始まります。

インストールが終了すると、ボタンが「有効化」に変わりますのでクリックして、プラグインを有効にします。

 

有効になると、左メニューの「投稿」→「新規追加」で表示されるエディタにボタンが追加されています。


「ビジュアル」エディタの場合は、「<>」が追加されています。

「テキスト」エディタの場合は、「crayon」が追加されています。


インストールしただけですと、それらをクリックして表示される画面が英語表記になっています。

日本語表記にしたい場合は、こちらを参考にしてくださいね。

Crayon Syntax Highlighterを日本語化する方法は?

「Crayon Syntax Highlighter」の使い方

新規投稿画面でビジュアルエディタなら「<>」、テキストエディタなら「crayon」をクリックします。

すると以下のような画面が表示されます。

設定できる項目は沢山ありますが、基本はデフォルトのままでも使えます。

私はデフォルトのまま使っています。

その上で、入力している項目は主に3つです。

  1. タイトル:好きなタイトルを入力します。(未入力でもOK)
  2. プログラム言語:言語が分かっている場合は、該当の言語を選択します。分からないORなければ「Default」を選択します。
  3. コード:この欄にコードを入力します。

そして、入力が終わったら右上にある「挿入」ボタンをクリックすると、コードが挿入されます。

挿入されたコードをプレビューで見てみると、このように表示されています。

表示方法は先ほどの画面で変更できるので、色々試してみてくださいね!

まとめ

Crayon Syntax Highlighterのインストール方法と使い方を紹介しました。

これを使うと記事中のソースコードが綺麗に表示されるので、ぜひ試してみてくださいね。

この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。

Copyright© トラベラーズサロン , 2018 All Rights Reserved.