解説用のソースコードを綺麗に表示させることができるプラグイン「Crayon Syntax Highlighter」




Crayon Syntax Highlighterとは

Crayon Syntax Highlighterは、ワードプレスで作られたサイトにおいて、解説用のソースコードをキレイに表示させることができるプラグインです。(ビジュアルモードでも記事としてソースコードを公開できます)

ソースコードを公開しようとしているサイトでは、このプラグインを利用することにより、行番号を付け見やすく表示できますので、ソースコードを表示しているサイト運営者にとって重宝されているプラグインです。

これから「Crayon Syntax Highlighter」のインストール方法や設定方法について解説していきます。

Crayon Syntax Highlighterのインストール方法

ダッシュボードの画面を開いてください。

左メニューの【プラグイン】にマウスカーソルを合わせてください。

【新規追加】という項目が表示されます。

クリックすると、プラグインを追加の画面が出てきます。

画面の右上をご覧ください。

【プラグインの検索】という所があります。

ここに、Crayon Syntax Highlighterと入力してください。

入力すると自動で検索して表示します。

【今すぐインストール】をクリックし、【有効化】をクリックします。

クリックすると、Crayon Syntax Highlighterを使うことができます。

Crayon Syntax Highlighterの設定について

ダッシュボード画面の左メニューの【設定】にマウスカーソルを合わせCrayonをクリックします。

  • ①は、表示させるためのデザインです。お好みで設定してください。
  • ②は、プレビューです。
  • ③は、フォントの設定をします。フォントの種類などを設定します。お好みで設定してください。
  • ④は、上下の余白の設定です。お好みで設定してください。
  • ⑤は、ツールバーの表示設定です。ツールバーを常時設定しておいた方がいいので、このように設定しています。お好みで設定してください。

  • ⑥は、行の折り返しの設定です。折り返した方がいいため、クリックしてチェックを入れます。
  • ⑦は、コードのスクロールバーを表示させる設定です。クリックしてチェックを入れます。
  • ⑧は、プログラミング言語です。ウェブサイトに何のソースコードを表示させるかで変わります。お好みで設定してください。デフォルトでもいいです。
  • ⑨は、表示速度が遅くなる時にチェックします。見た目も変わりますので注意してください。

設定が完了した場合に、Save Changesをクリックします。

Crayon Syntax Highlighterの使い方について

実際に投稿します。

テキストモードでは赤枠のcrayonをクリックします。

ビジュアルモードは、赤枠の<>をクリックします。

クリックすると、コードの入力画面が表示されます。

  • Titleは、コードの名前を入力します。お好みで設定してください。
  • Languageは、プログラム言語の選択をします。お好みで設定してください。
  • Codeは、コードの入力をします。

記入し、右上の赤枠のAddをクリックします。

記事に埋め込むことができました。

では、実際のウェブサイトでの表示を見ます。

実際に表示されると、行に番号がつけられています。

以上、「Crayon Syntax Highlighter」の解説となります。

まとめ

いかがでしたでしょうか?

今回は、「Crayon Syntax Highlighter」のインストール方法や設定方法について解説しました。

Crayon Syntax Highlighter」はコードやプログラミングなどを紹介するときに、コードを綺麗に表示してくれるので、ユーザーがサイトを閲覧した場合に便利です。

仕様の解説などでコードを記述することがある場合は、ぜひ「Crayon Syntax Highlighter」を設定して使ってみてください!

スポンサーリンク





あなたの”学び”につながったらシェア!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

普段はIT企業でメディア運営やセミナー講師の仕事をしている"コーディングもできるWEBマーケター"。アラサーで2児の父。基本的になんでも自分でやりたい人。2015年3月までITスキルがほぼ0だったが、そこから自身がWEBデザインやプログラミングなどITスキルを学び、結果手取り月収が10万円以上アップした経験から、スキルアップを考えている方にはまずはITスキルを勉強することを強く推奨している。