[Emacs] カラーコードを表示できる「rainbow-mode」を使ってみた
2017/01/31
こんにちは、okutani(@okutani_t)です。私は普段Emacsを使ってプログラミングをしています。Webサイトを構築する際に、ちょこちょこカラーコードを使うことがあります。
カラーコードが頭にすっと入ってくる人はいいかもしれませんが、16進数で表示されたコードを見てすぐ何色か分かると便利ですよね。
Emacsでは、rainbow-mode.elを使うとカラーコードに対応した色をマーカーのように表示してくれます。
導入と設定はかんたんなので、Emacsユーザーの方はぜひ試してみてください。
スポンサーリンク
rainbow-mode.elのインストール
package.elを使ってインストールしていきます。下記を実行しましょう。
M-x package-list-packages
rainbow-modeを見つけたら、i → xでインストールしましょう。
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でファイルを開くと、次のようにカラーコードに色がついていることが確認できます。
ぱっと見てどのカラーコードがどんな色か分かるのは良いですね。
ちょっとしたtipsでしたが、Webサイトを構築する際に役立つかと思います。参考になれば幸いです。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
