Operator Mono를 Atom에서 멋지게 사용하기 위한 커스텀 CSS 소개

TL;DR

Operator Mono를 Atom에서 사용할 때 Syntax Highlight의 특정 부분을 Italic에서 표시하도록 지정하는 사용자 지정 CSS를 소개합니다.
소개하고 싶은 것은 이 Gist이므로, 시간이 없는 사람은 이 URL을 보면 모두 해결입니다.
h tps://의st.魏 튜 b. 작은 m/b 랜던 즈 r는 m/3828 아 C42766f9f187c8 그림

What's Operator

Operator는 Hoefler & Co.에서 출시된 등폭 글꼴입니다.
기술자가 에디터로 사용하는 것도 의식되고 있어 공식 사이트의 캡쳐에서는 Atom에서 사용하고 있는 곳이 소개되고 있습니다.


Image from Introducing Operator

상기와 같이 좀처럼 이카스 서체로 매우 멋집니다만, 그 근처의 장점은 이하의 기사에 잘 소개되고 있으므로 공식과 함께 꼭 봐 주세요.

발렌타인에게 오퍼레이터 모노를 주자 - Qiita

공식: Introducing Operator | News, Notes & Observations | Hoefler & Co.

공식: Download Operator Fonts | Hoefler & Co.

덧붙여서 이번 주제로 하고 있는 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: h tps://의st.魏 튜 b. 작은 m/b 랜던 즈 r는 m/3828 아 C42766f9f187c8 그림

적용 방법

Settings(Cmd + ,)를 열고 Open Config Folder를 클릭합니다.


style.less 파일이 열리므로 위의 코드를 붙입니다.



Done!
제대로 적용되지 않는 경우에는 사용 중인 테마를 검토해 보세요.

그건 그렇고

공식 캡처에 사용되는 테마는 Oceanic Next 라는 것입니다.
그 캡처를 재현하고 싶다! 라는 분은 이쪽도 부디.
htps : // 나중에 m. 이오 / 테메 s / 오세아 c- xt xt