vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです

[Emacs] カラーコードを表示できる「rainbow-mode」を使ってみた

      2017/01/31

LINEで送る
Pocket

こんにちは、okutani(@okutani_t)です。私は普段Emacsを使ってプログラミングをしています。Webサイトを構築する際に、ちょこちょこカラーコードを使うことがあります。

カラーコードが頭にすっと入ってくる人はいいかもしれませんが、16進数で表示されたコードを見てすぐ何色か分かると便利ですよね。

Emacsでは、rainbow-mode.elを使うとカラーコードに対応した色をマーカーのように表示してくれます。

導入と設定はかんたんなので、Emacsユーザーの方はぜひ試してみてください。

スポンサーリンク

rainbow-mode.elのインストール

package.elを使ってインストールしていきます。下記を実行しましょう。

M-x package-list-packages

rainbow-mode

rainbow-modeを見つけたら、ixでインストールしましょう。

rainbow-modeの設定

次のようにinit.elに書いておけば、記述したmodeに対してrainbow-modeがhookされます。

(require 'rainbow-mode)
(add-hook 'css-mode-hook 'rainbow-mode)
(add-hook 'less-mode-hook 'rainbow-mode)
(add-hook 'web-mode-hook 'rainbow-mode)
(add-hook 'html-mode-hook 'rainbow-mode)

では、rainbow-modeでカラーコードに色がついているか確認してみましょう。

カラーコードに色がついているか確認

less-modeでファイルを開くと、次のようにカラーコードに色がついていることが確認できます。

rainbow-mode2

ぱっと見てどのカラーコードがどんな色か分かるのは良いですね。

ちょっとしたtipsでしたが、Webサイトを構築する際に役立つかと思います。参考になれば幸いです。

LINEで送る
Pocket

okutani (okutani_t) のヒトコト
Emacsはこういうことがかんたんにできて凄いですね。ぱっとみて、どんな色かすぐ確認できれば作業効率も上がります。ぜひ使ってみてください。

 - Emacs

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。