お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

WordPressのエディタのタグに色付けするプラグイン「WP Emmet」

WEBデザイン
最近まで、HTML Editor Syntax HighlighterというWordPress用のプラグインを使っていました。

こういうのを使い始めた一番の理由は、タグが色分けされて表示されると見やすいからというのはもちろんなんですが、自分の場合、最大の理由は、エディターの背景を黒くしたかったから。

明るい色だと目が疲れるんで(笑)

テーマの色を変更しても、エディタの中は白のままなんですよね・・・

まぁそんな動機でHTML Editor Syntax Highlighterを使い始めたわけですが、これが意外と便利で。

しかし、今ちょっと、PREのレイアウトが崩れる問題に悩まされていまして・・・

色々試してはいるのですが、解決できないのでとりあえずPREは使わない方向で対処しているのですが・・・

実は、PREを使い始めた理由は、HTML Editor Syntax Highlighterのせいだったんですよね。

HTML Editor Syntax Highlighterには自動インデント機能があって、これはこれで慣れると便利だったのですが、DIVで括った領域内では、改行すると自動インデントされてしまって地味にイラッとするんですよね。(HTML Editor Syntax Highlighterではインデントオフにできない)

でも、PREタグに関してはインデントされない(されたら反映されてしまいますからね)事が分かって、PREタグを使うようになった・・・(なんだかすべて動機が本末転倒)

しかし、PREで(行の高さを狭めると)レイアウトが崩れることが判明し、PREの使用を禁止にしようか、となったとき、エディターでDIVで書くとやっぱり自動インデントがウザーい

そこで解決策として、HTML Editor Syntax Highlighterを廃止し、背景が黒くできて、かつ、インデントがオフにできる別のプラグインを探したら、ありました(^^)

それが「WP Emmet」

WordPressの最新バージョンではテストされていない
日本語表示非対応

ということだったのですが、使ってみたら普通に使えましたし、設定も日本語表示されていました。

※最初、インストールして有効化しても何も起きない?やっぱりダメか?と思ったのですが

有効化したあと、さらに設定で「コードカラーリング」を有効化しなければいけなかったようです。

さらに、設定でテーマを選ぶ事ができるので、どれがどんな配色になるのかは試してみないと分からないのですが、背景が暗くなるやつを選んで、バッチリ。

インデント機能もオンオフできますし、なんかHTML Editor Syntax Highlighterより動作も軽い感じ?

しばらく使ってみたいと思います。

WP Emmet って、キーボードからタグの入力を補完してくれる機能があるのですね。

例えば、「a」と打って Tab キーを押すと、「」と表示されるのです。

ただ、日本語入力中には当然「a」ではなく「あ」になってしまう、半角英数に変換して確定してからTabを押す必要があるので、今ひとつ使いにくい(笑)

それと、CSSの補完はしてくれず、色分けも中途半端。

その編はHTML Editor Syntax Highlighterのほうが便利だったなぁ・・・(※色合いはHTML Editor Syntax Highlighterのほうが見やすかったです。)

でも、そもそもが、背景を黒くしたいというだけの話なので、しばらくこれで使ってみようと思います(^^;)

ダメでした、残念!

タグの挿入ボタンを自由に追加できるプラグイン「AddQuickTag」が、使えなくなってしまう・・・orz

使えないことはないのですが、ボタンを押すたびに開始タグと終了タグが両方打ち込まれてしまう・・・

常に使用する範囲を選択した状態で使えばよいのですが、開始タグを打って、中身を書いて、終了タグを打つ、という使い方はできないことに。

他にも細かい点で不具合がいくつかある模様

(保存するたびにいちいち「ブラウザー内のこの投稿の下書きが以下のバージョンと異なっているようです。」という警告がでるようになったりとか、テーマの編集画面のエディタのレイアウトが崩れたりとか)

やはり、メンテナンスされておらず、最新のWPに対応していないってことなんでしょうねぇ・・・

さて困ったな、どうしよう

WPのテキストエディタの背景を黒くしたいだけなのだから、別の方法を探すか・・・(^^;)

コメント