プログラミングeメモ

始まりは自分用メモから。

WordPressにシンタックスハイライト「Crayon Syntax Highlighte」を導入

time 2015/11/12

WordPressにシンタックスハイライト「Crayon Syntax Highlighte」を導入

ブログを立ち上げたので、これからの投稿を楽にしていくためにまずはシンタックスハイライトをなるべく「簡単」にしてくれて、使いやすいプラグインを導入してみようと思います。

sponsored link

このプラグインのいい所とあまり良くない所

シンタックスハイライト系のプラグインを色々と試しているわけではないので他のプラグインとの比較にはならないですが、自分視点でいいと思った所と微妙だった所を上げてみます。

良かった所

  • 設定したらかなり理想(個人的な)に近づいた!
  • パフォーマンスも気にしてくれているみたい(実数値を図ったわけではないです、設定項目から。)
  • 投稿画面からボタン1つでコードを書き始められる。
  • 言語の種類を自動判別してくれる!(明示的にも言語を指定できる)
  • タダで使えて無料だしその上さらに上金額が0円!(しつこい?w)

っとまだまだありますが、ざっとこんな感じ。

あまり良くない所

・アイコンの意味が初見でよく分からない、それだけです。
よくコピペする人なら全然問題ないと思います!
それに気が向いたらカスタマイズしてやるし!

WordPressのプラグインで「syntax highlighte」を検索

まずはWordpressのプラグイン->新規追加から「syntax highlighte」で検索、で検索結果がこちら。
Syntax HighlightでのWordpressプラグイン(公式)の検索結果
190件と結構ありますが、目当てっぽいのとか言うまでもなく★満点の子を迷わず選択しました。(安易w)

Crayon Syntax Highlighteの導入と設定

さくっとインストール

プラグインインストール画面

さくっと有効化

プラグイン有効化画面

Let’s try

設定画面でサンプルの確認
Crayon Syntax Highlighteの設定画面
サンプルで設定画面にハイライトの結果が出ていたのでwktkしながらマウスをポイントしてみると・・・
ハイライトサンプル
あれ、もしかして俺の嫌いなやつじゃ?w
なんでかって言うと、

  • コードにマウスが乗ると邪魔な上のやつ(コントロールパネル?)が出て来る
  • アイコン表示だから初見だとどう操作したら何が出来るかわからない(私はもう慣れているのですが、アニメgifではわざとやってますw)

そんなこと言っても設定次第ですよね?

Crayon Syntax Highlighteの設定を弄ってみる。

まずは、テーマ

デフォルトでなんと!47このテーマが用意されていました!
個人的には
テーマ「Cisco Router」のサンプル
こんなの結構好きです。
・・・が、見づらい。
色々あって結構迷ったのですが、
テーマ「Sublime Text」
テーマ「Sublime Text」を使ってみようと思いました。

The設定

「シュッ」っと出て来るツールバー

とにかく自分的にマウスを載せると上から「シュッ」っと出て来るあれが嫌いなので項目を探してみました。
あった、すぐにw
ツールバーの表示設定の画像

プレーンテキストモードのマウスイベントを無効に

さてお次は・・・これ!ダブルクリックするとプレーンテキストに変わっちゃうやつ!!!
ダブルクリックのあれ
実はこれも超キライでした。
なんかコピペしたい気分になった時にサクッとググッて気持ちよ~くコピペしようとダブルクリックするとプレーンテキストモードに勝手に変わってしまうorz
そんな体験を幾度と無くしてきました。
「ダブルクリックすると画面が変わるなんて聞いてねーよ・・・」
「俺のダブルクリック分の体力返せよ・・・」
なんて思いながらしぶしぶコピペを再開していました。(コピペさせていただいた方々、ごめんなさい)
ダブルクリックしなければいいんですが、文字を選択する時はダブルクリック+ドラッグで選択すると、いつもいつも俺の気持ちを凄く理解してくれている感じに選択できているのでやめられません。
っと前置きが長くなりましたが、ダブルクリック無効にしました。
ダブルクリック無効

TAB->Spaceの変換機能を有効化

他には、タブをスペースに変換してくれる機能にチェックを入れる(ONに)*なんとなく
タブをスペースへ変換

スクリプトの自動読み込み機能の有効化とアニメーションを無効に

あとは、ハイライトが必要じゃない時に自動で読み込みを制御してくれる超ベンリな機能があるみたいなのでONにし、アニメーションもいらないので無効に(この辺はパフォーマンスの向上を期待して)
アニメーションのOFFと読み込みの自動制御のON

スクロールバーの表示を常に表示へ

スクロールバーを常に表示に
別に、隠す必要無いよね?

行の折り返しを有効化

スクロールとか基本的にしたくない人なので、折り返しを有効化しました。
行の折り返しの有効化
スマートフォンで見てもそんなに見づらくなかったので見やすくなると信じて。
スマートフォンで行の折り返しの具合を確認
これは利用する人がボタンを押せば(知らないと分かりづらい)行の折り返しは解除できるので。

[重要]スクリプトタグのインクルードをフッターへ

あとは、ハイライトのスクリプトをフッターで読み込んでくれるチェックがあったのでそれもONに(Google PageSpeed Insightsで1画面に収まる範囲のレンダリングを邪魔しているソースファイルがあると怒られるので。)
スクリプトタグのフッター読み込みを有効化に
アイコンの件は設定が無いっぽいので、気が向いた時にでもカスタムしてみましょうかね。。。

実際に使ってみました。

結果!!↓!!

いい感じ!ちょっとSublime Textと認識が違う所があるけどまぁ、気にしない♪

更にエディタにEmmetとか入れられたら超便利なんだが、また調べてみるかぁ~

今回はここまでです。

最後に

ぶっちゃけこれが実質の初投稿となり、記事を書いている途中で色々とプラグインの導入をしました。
画像を投稿するのにコピペ出来る方が良かったので、「OnePress Image Elevator」と言うプラグインを入れました。
無料の方でも全然使えそうな感じでしたが、有料でもバカみたいに高くなければ基本的にすぐに買っちゃうので、OnePress Image Elevatorは有料の方を導入しました。
ほんとならこの辺も記事にしたらメモ残せるんですが、まぁ細かい設定とかいらなかったので特に記事にはしません。
導入で参考にさせて頂いたサイトがあるので、これを見ている方が導入する際には是非とも御覧ください。
「OnePress Image Elevator」導入の際の参考サイト:WordPressにコピペで画像を挿入できるプラグイン「OnePress Image Elevator」の使い方と設定まとめ

sponsored link

down

コメントする




プロフィール

とみ

とみ

1985年生まれのおっさんです。 5年前ぐらいから色々とプログラミングの仕事したり工事(水道とかエアコンとか大工とか)したりして食ってます。 何か質問とか文句とかがあれば
tomi@e-archi.net
へ連絡いただければと思います!

最近のコメント

    

    sponsored link