Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@htomine

Operator MonoをAtomでカッコよく使うためのカスタムCSSを紹介

TL;DR

Operator Mono を Atomで使うときに、Syntax Highlightの特定の箇所をItalicで表示するように指定するカスタムCSSを紹介します。
紹介したいのはこのGistなので、時間がない人はこのURLを見るとすべて解決です。
https://gist.github.com/brandondurham/3828ac42766f9f187c8e#file-styles-less

What's Operator

OperatorはHoefler & Co.からリリースされている等幅フォントです。
技術者がエディタで使うことも意識されており、公式サイトのキャプチャではAtomで使っているところが紹介されています。

image.png
Image from Introducing Operator

上記のようになかなかイカス書体で非常にかっこよいんですが、その辺りの良さは以下の記事によく紹介されているので公式と合わせてぜひ御覧ください。

ちなみに今回題材にしている Operator Mono は公式で199ドルとなっています。

カスタムCSSの紹介

さて、OperatorのItalic書体は筆記体のような特徴的なものですが、これがカワイカッコイイポイントとなっているので是非こんな感じでハイライトさせたいですよね。
上記のキャプチャのように、Syntax Highlightの特定の箇所(コメント部分や、JSのthisとかclassNameとか)をItalic表示するためには、AtomではカスタムCSSを記述する必要があります。

基本的に書き方は自由ですが、以下のGistに様々な環境でのコードが紹介されているので、ここを漁るとだいたいいい感じに設定できます。というわけで冒頭に書いたとおりこのURL1行紹介すれば十分なんですが!

その中から私は、以下のSnippetを利用させてもらっています。

atom-workspace,
atom-text-editor {
  font-family: "Operator Mono";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}
atom-panel.tool-panel {
  font-size: 0.88em;
}
.entity.other.attribute-name {
  font-style: italic;
}
atom-text-editor::shadow{
  .entity.other.attribute-name {
    font-style: italic;
  }
  .comment {
    font-style: italic;
  }
}

from: https://gist.github.com/brandondurham/3828ac42766f9f187c8e#gistcomment-1903227

適用方法

Settingsを開き (Cmd + ,)、Open Config Folder をクリックします。

image.png

style.less ファイルが開くので、上記のコードを貼るなどします。

image.png

Done! なはず。
うまく適用されない場合は、利用しているテーマを見直すなどしてみてください。

ちなみに

公式のキャプチャで使われているテーマは Oceanic Next というものです。
あのキャプチャを再現したい!という方はこちらもどうぞ。
https://atom.io/themes/oceanic-next

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?