vdeep

*

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

[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サイトを構築する際に役立つかと思います。参考になれば幸いです。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - Emacs

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

Emacsにyasnippetを導入&スニペットの登録方法

こんにちは、okutani(@okutani_t)です。yasnippetを利用 …

CentOS7に最新のEmacsを導入する方法

こんにちは、okutani(@okutani_t)です。需要があるかどうか分かり …

Emacs Caskでパッケージ管理をしてみよう

こんにちは、okutani(@okutani_t)です。本記事ではEmacsのパ …

Emacsでhttp.elを使ってGET・POST通信のテストを行う

こんにちは、okutani(@okutani_t)です。最近、サーバー通信周りを …

[Mac]HomebrewでEmacs導入&エイリアス設定で起動速度UP

こんにちは、okutani(@okutani_t)です。今回はMacにHomeb …

EmacsでSSH接続!『tramp』を使ってみよう

こんにちは、okutaniです。Emacsには、ローカルのEmacsからサーバー …

[Emacs]init-loader.elで設定ファイルを分割管理してみよう

こんにちは、okutani(@okutani_t)です。Emacsではemacs …

[Emacs] web-modeにyasnippetの既存スニペットを適応させる

EmacsでWebサイト構築の際に便利な「web-mode」。特にHTMLにPH …

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