iTermやemacsをQiitaっぽい配色にする

15291 ワード
iTerm2 Emacs Qiita Qiita テキストリンク

はじめに

Qiitaのコードブロックのシンタックスハイライト、綺麗ですよね。
AtomやVSCodeのカラーテーマは配布されているんですが、emacsやiTermのテーマは作ってる人も見つからない。
というわけで自前で用意してみます。

ちなみにこんなかんじになります。綺麗。

emacs

emacs24以上が対象です。
一からテーマを作るのは大変なので、既にあるテーマをカスタマイズすることにします。
今回はZenburnってテーマをベースにして 1、qiitaっぽい配色2 に変えてみます。

テーマを設置する

  1. ~/.emacs.d/themes ディレクトリに https://raw.githubusercontent.com/bbatsov/zenburn-emacs/master/zenburn-theme.el を置く

  2. ~/.emacs.d/init.el に以下を記載

    init.el
    (setq custom-theme-directory "~/.emacs.d/themes/")
(load-theme 'zenburn t)

配色を書き換える

  • ~/.emacs.d/zenburn-theme.el の (defvar zenburn-default-colors-alist 内を以下のように変更します 3
zenburn-theme.el
(defvar zenburn-default-colors-alist
  '(
    ("zenburn-fg+1"     . "#FFFFEF")
    ("zenburn-fg"       . "#DCDCCC")
    ("zenburn-fg-1"     . "#bfbfbf")
    ("zenburn-bg-2"     . "#000000")
    ("zenburn-bg-1"     . "#2B2B2B")
    ("zenburn-bg-05"    . "#383838")
    ("zenburn-bg"       . "#000000")
    ("zenburn-bg+05"    . "#494949")
    ("zenburn-bg+1"     . "#4F4F4F")
    ("zenburn-bg+2"     . "#5F5F5F")
    ("zenburn-bg+3"     . "#6F6F6F")
    ("zenburn-red+2"    . "#FF738A")
    ("zenburn-red+1"    . "#FF738A")
    ("zenburn-red"      . "#FF738A")
    ("zenburn-red-1"    . "#FF738A")
    ("zenburn-red-2"    . "#FF738A")
    ("zenburn-red-3"    . "#FF738A")
    ("zenburn-red-4"    . "#FF738A")
    ("zenburn-red-5"    . "#FF738A")
    ("zenburn-red-6"    . "#FF738A")
    ("zenburn-orange"   . "#FF738A")
    ("zenburn-yellow"   . "#FFDA09")
    ("zenburn-yellow-1" . "#FFDA09")
    ("zenburn-yellow-2" . "#FFDA09")
    ("zenburn-green-5"  . "#76DF28")
    ("zenburn-green-4"  . "#76DF28")
    ("zenburn-green-3"  . "#76DF28")
    ("zenburn-green-2"  . "#76DF28")
    ("zenburn-green-1"  . "#76DF28")
    ("zenburn-green"    . "#76DF28")
    ("zenburn-green+1"  . "#76DF28")
    ("zenburn-green+2"  . "#76DF28")
    ("zenburn-green+3"  . "#76DF28")
    ("zenburn-green+4"  . "#76DF28")
    ("zenburn-cyan"     . "#55d6c3")
    ("zenburn-blue+3"   . "#2BB2D6")
    ("zenburn-blue+2"   . "#2BB2D6")
    ("zenburn-blue+1"   . "#2BB2D6")
    ("zenburn-blue"     . "#2BB2D6")
    ("zenburn-blue-1"   . "#2BB2D6")
    ("zenburn-blue-2"   . "#2BB2D6")
    ("zenburn-blue-3"   . "#2BB2D6")
    ("zenburn-blue-4"   . "#2BB2D6")
    ("zenburn-blue-5"   . "#2BB2D6")
    ("zenburn-magenta"  . "#A980F5")
    ("comment"          . "#9cabaf")
    ("region"           . "#4a708b")
    )
  • ↑では、コメントや範囲選択の色としてcommentとregionを追加しています
  • あとはお好みですが、私は以下を変更しています
zenburn-theme.el
（変更前）
   `(font-lock-type-face ((t (:foreground ,zenburn-yellow-1))))
（変更後）
   `(font-lock-type-face ((t (:foreground ,zenburn-green-1))))
zenburn-theme.el
（変更前）
   `(font-lock-comment-face ((t (:foreground ,zenburn-comment))))
   `(font-lock-comment-delimiter-face ((t (:foreground ,zenburn-comment))))
（変更後）
   `(font-lock-comment-face ((t (:foreground ,comment))))
   `(font-lock-comment-delimiter-face ((t (:foreground ,comment))))
zenburn-theme.el
（変更前）
   `(region ((,class (:background ,zenburn-bg-1))
（変更後）
   `(region ((,class (:background ,region))
  • 私はrubyを書くときenhanced-ruby-modeを使っているので、その設定も追加します
zenburn-theme.el
;;;;; enh-ruby-mode
   `(enh-ruby-op-face ((t (:foreground ,red))))
   `(enh-ruby-string-delimiter-face ((t (:foreground ,blue))))

iTerm

  1. 変数で色を定義してあるテーマなら何でもいいですが今回はZenburn-themeを選びました ↩

  2. 私の環境では背景を透過にしているので、色は少し調整しています ↩

  3. zenburn-themeでは各色1~5まで濃度別に用意しているようですが、そこまでは対応しません ↩