CSSコードをサイトに表示させるなら Crayon-Syntax-Highlighter【プラグイン】

サイトのデザインをカスタマイズするときなどに使う HTML や CSS
これらのソースコードを サイトで紹介するときなどに使用する画面
Crayon-Syntax-Highlighter というプラグインをごあんないしていきます。

画面もカッコよく表示することができますし
コピペもしやすいのでぜひ利用したいところですね。

Highlighter とは 蛍光ペン という意味で コードの種類ごとに
色分けされることで とても見やすい画面になることが特徴です。

Crayon-Syntax-Highlighter はカラフルでポップなものから
モノトーンのシックでカッコいいものまで たくさんの テーマ があり
ご自分のサイトのイメージにあった画面を設定することができます。

使い方はかんたんで WordPress をお使いの方はプラグインを
インストールするだけなので さっそく始めてみましょう。

Crayon-Syntax-Highlighter テーマの一例

まずはサンプル画像でイメージを見てみましょう。
上部のカッコに書かれている文字がテーマの名前です。

Crayon-Syntax-Highlighter-デザインサンプル画像-1c-Kod

Crayon-Syntax-Highlighter-デザインサンプル画像-809finest

Crayon-Syntax-Highlighter-デザインサンプル画像-Ado

Crayon-Syntax-Highlighter-デザインサンプル画像-Amity

Crayon-Syntax-Highlighter-デザインサンプル画像-capacitacionti

Crayon-Syntax-Highlighter-デザインサンプル画像-Cg-cookie

Crayon-Syntax-Highlighter-デザインサンプル画像-Coy

Crayon-Syntax-Highlighter-デザインサンプル画像-Dark-terminal

Crayon-Syntax-Highlighter-デザインサンプル画像-Epicgeeks

いかがでしょうか。
気に入ったデザインのテーマはありましたでしょうか?

ここに挙げたテーマは一例で またこれらをカスタマイズすることで
よりオリジナルなテーマにすることができます。

テーマのカスタマイズは Font や 文字サイズと 言語(language)選択
ツールバーやラインなどの 外観のイメージなどで多様に変化します。

分かりやすく こちらのテーマ Flatui Light でみてみます。
Crayon-Stock-Theme-Flatui-Light-カスタマイズ前のイメージ画像
こちらが何もカスタマイズされていない状態のシンプルなコード表示になります。

Crayon-Stock-Theme-Flatui-Light-カスタマイズ後のイメージ画像
外観のカスタマイズでイメージが変わるのがお分かりいただけたと思います。

プラグインのインストール

プラグインのインストールは  ダッシュボード画面からプラグインを開きます。
新規追加 のボタンをクリックしたら 検索BOXに Crayon と入力して検索してみましょう。
プラグイン-crayon-Syntax-Highlighter の画像
似たようなプラグインも多数表示されますが
少し下の方にこちらのプラグインがあるので探してみてください。
crayon-Syntax-Highlighter-プラグイン詳細画面
詳細画面はこんな感じです。
ここでは この私が今使用しているバージョンではテストされていませんと
表示されていますが、ほぼ 正常に使用できています。

行に対して文字がずれてしまうという現象が起こりましたが
コードを書き換えることで改善されましたので
問題なくご利用して頂けると思います。

文字のズレに関しましてはこちらでご紹介していますので
合わせてご覧くださいませ。
Crayon Syntax Highlighter – 行番号とコードがずれて表示されてしまう

プラグインの 今すぐインストール をクリックし
無事インストールできましたら 有効 にしましょう。

Settings

セッティングでは 必要なポイントをいくつか ごあんないしていきます。

セッティング画面の表示の仕方-1
Setting画面の開け方はインストール済み プラグインの欄の
Crayon-Syntax-Highlighter にあります Settings を押していただくか

セッティング画面の表示の仕方-2
ダッシュボード画面の項目 設定から Crayon の項目をクリックします。

日本語に変換する方法

セッティング画面は英語表記になっています。
日本語に変換の方法は2種類あり お使いのパソコンによっては
マウスの右クリックで 日本語に翻訳 させることができます。

マウスを使って翻訳する方法
こちらで翻訳ができない場合 FTPファイルを編集して翻訳させます。

英語表記のままでも十分利用できますので
変換が難しい方はこのままセッティングに進んで頂いても構いません。

 Xserver  – FTPファイルの編集

今回、 Xserver の FTPファイルと FTPソフトの FFFTP の2種類で解説していきます。
どちらもほぼ同じ方法ですが わかりやすく図にしてみました。

関連記事はこちら

FTPの設定・FFFTPのダウンロードに関してはこちらの記事にまとめています。
関連記事:FFFTP-のダウンロードと Xserver での FTPソフトの設定

Xserver-ファイル管理選択画面
Xserver はログイン後のサーバー画面でファイル管理 を選択します。

WebFTP ファイルの画面の中にあります 今回編集したい
ご自分のサイトのファイルをクリックします。
WebFTP-ファイルの編集画面
図のように 編集したいサイト(今回の場合、eureka45.xsrv.jp)ファイルから
順に選択して頂き plugins のファイルまで進みます。
plugins のファイルの中にこちらの2つのファイルがあります。
crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po
この二つのファイルにチェックを入れてファイルを削除します。

WebFTP-ファイルの削除の仕方
ファイルを削除しましたら完了です。

FFFTPソフトの編集の場合

FFFTPソフトの実行の仕方
FFFTP のアイコンをクリック または
スタートアイコンから FFFTP を選択して実行します。

FFFTP-プラグイン日本語化の手順1
ホスト一覧から 編集したいホストを選択し接続をクリックします。

FFFTP-プラグイン日本語化の手順2
先ほどと同じ要領で 編集したいアドレスをクリックし
順にフォルダを開いていきます。

plugins のファイルまで進み こちらの2つのファイルを削除します。
crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po

削除できましたら完了ですのでFFFTPを終了します。

Theme (テーマ)

ストックテーマを選択します。
白いボックスからテーマを選択してみましょう。
Crayon-Settings-Themeの選択とプレビュー画面

プレビュー画面下の change the fallback language
ランゲージ(言語)の変更画面へ移動できます。
言語を変更することによって コードの表示される色がかわります。
基本的には現在の Default のままでいいと思います。

プレビュー画面下のチェックボックス
Enable Live Preview リアルタイムのプレビュー画面を有効にする
テーマのイメージや カスタマイズしたイメージを確認しながら設定していくことができます。

Toolbar

各設定の名称について分かりやすく表示してみました。
Crayon-画面名称を分かりやすく図解

それでは外観の設定について解説していきます。
外観のポイントは ツールバーの設定になります。
チェックを入れていない項目もありますが  こちらはお好みですので
ご自由に選択してみてください。
Crayon-Syntax-Highlighter-Setting解説-toolbar
Display the Toolbar  ツールバーの表示の仕方について
On mouseOver   マウスオーバーを選択した場合、1~3の設定をします。Crayon-Settings画面-マウスオーバーのイメージ画像

ツールバーが表示される時、1段目の文章に重なって表示(オーバーレイ)するのか
1段目に重ならないように1段下がって表示(プッシュダウン)させるか
Toolbar-Overlayのイメージ画像

1で オーバーレイを選択した場合、
マウスのシングルクリックでツールバーを表示させたり、隠したりできる機能

Line

Crayon-Syntax-Highlighter-Setting解説-line

Crayon-カスタマイズーストライプのイメージ画像
コード画面をストライプ状にする
選択するテーマによってこちらの機能が無い場合もあります。

重要な行のマーキングを有効にする
こちらは投稿画面でマーキングを設定した場合その行に色がついて表示されます。

は行範囲の指定です。こちらはチェックなしで大丈夫です。

4 5 行番号の表示について
Crayon-Tag-Line-numberの画像

6  7 長文のコードの場合の表示のしかた
折り返しタグのイメージ画像
Wrap lines by default  デフォルトで行を折り返す
7  Enable line warp toggling 行折り返しの有効化
長文のコードの場合  Toolbar にタグが表示され スライドバーが出現します。

コード全体が見やすいのは折り返し表示ですね。
どちらも選択しない場合、Toolbar にタグは表示されずにスライドバーが出現します。

Code

コードについては こちらの6項目 ツールバーに表示されるタグについての設定です。
タグのクリックで ON  OFF を切り替えることができます。
Crayon-Syntax-Highlighter-Setting解説-code

1 2 コードの表示
はこちらのハイライトなしの状態の設定
コードタグをクリックした時のイメージ画像

4 コピー機能について
コピーをクリックした時のイメージ画像
コピーのタグをクリックし全体選択されたら コピー&ペーストします。

記事作成 エディタ画面での使いかた

Crayon投稿画面での使いかた-投稿エディタ画面
投稿のエディタ画面 右上にありますコードのマーク <> 
crayon-syntax-highlighter の入力画面になります。こちらをクリックします。

Crayon投稿画面での使いかた-コード入力画面
ポイントはタイトルとマークするライン

マークするラインは先ほどの Line の項目の 2番
重要な行のマーキングを有効にする
チェックを付けている場合に 利用できる機能です。

1行ごとの設定は ,(カンマ)で区切り 数行の場合はマーキングしたい行
例えば 1-3 や 2-5 のようにハイフンをいれて記述します。

特に必要なければ 空白のままで大丈夫です。
コードの入力を済ませたら add (更新)をクリックして完了です。

画面下にテーマからコードまでのカスタマイズ設定画面がありますが
こちらの画面だけ、設定を変更したいときに使用します。

プラグイン