Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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行紹介すれば十分なんですが!

https://gist.github.com/brandondurham/3828ac42766f9f187c8e#file-styles-less

その中から私は、以下の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 do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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