English version is available here

Atom 편집기 에서 구문 색칠(신택스 하이라이트, 구문 컬러링, syntax highlight, syntax coloring)을 원하는 설정으로 바꾸려면 어떻게 해야 할까요?

상당히 전부터 색을 커스터마이즈하고 싶었습니다만, 알기 쉬운 정보가 어디에도 발견되지 않고, 왕생했습니다. 참고가 된 것은 이쪽. h tps : // s t c ゔ ぇ rf ぉ w. 코m/쿠에 s치온 s/44721230/

최근 버전(v1.13.0)(현재 1.18.0)에서 꽤 stylecs.less 문법이 바뀌었다 같고, 넷에서 발견되는 것도 낡은 정보가 많은 것 같습니다.

절차

Atom 메뉴 > Stylesheet...를 선택하면 styles.less라는 파일이 열립니다. 이 아래의 여백에 사용자 지정 설정을 CSS로 씁니다. 이번에 시작해서 공부했는데 less 이라는 것은 CSS를 보다 직관적으로 쓸 수 있는 CSS 전처리 언어 로 {}

색을 변경하고 싶은 언어의 파일을 Atom으로 열고, 색 지정을 하고 싶은 요소의 문자에 커서를 놓고, Ctrl + Alt + Shift + P (Windows), ⌘ + ⌥ + P (macOS)를 동시에 누르면, Scopes at Cursor 라는 배너가 오른쪽 상단에 표시됩니다. 메뉴에서 동일한 작업을 수행하려면 Packages > Command Palette > Toggle 다음에 나타나는 Command Palette에 log cursor scope를 입력하고 Editor : Log Cursor Scope를 선택하십시오.

예를 들어, MATLAB의 주석 부분에서 Scopes at Cursor를 보면 이와 같이 표시됩니다.

source.matlab

meta.function.matlab

comment.line.percentage.matlab

이것을 그대로 바보 정직하게 색 지정하려면 다음과 같이 씁니다.

   // 色指定
   atom-text-editor.editor {
     .syntax--source.syntax--matlab {
       .syntax--meta.syntax--function.syntax--matlab {
         .syntax--comment.syntax--line.syntax--percentage.syntax--matlab {
           color: #ff0000;
         } 
       }
     }
   }

포인트로서는, 이런 느낌입니다.

atom-text-editor.editor 로 시작

하위 레벨에서는 .를 선행해야합니다

하위 레벨에서는 . 다음에 syntax--를 일일이 삽입한다

MATLAB의 색상 재현

위의 요령으로, MATLAB의 에디터의 배색을 Atom으로 재현했습니다.

결과 비교

Atom에서 표시한 MATLAB 코드

이곳은 MATLAB 본래의 컬러 설정

CSS

아래 예제에서는 MATLAB과 함께 octave에 대한 구문 강조(구문 색 구성표)도 동시에 지정합니다.

// MATLAB
/*
Atom styles.less file CSS for syntax coloring of MATLAB language.
*/
atom-text-editor.editor {
  .syntax--source.syntax--matlab, .syntax--source.syntax--octave {
    .syntax--meta.syntax--variable.syntax--other.syntax--valid.syntax--matlab {
      color: #000000; //black
    }

    .syntax--variable.syntax--other.syntax--valid.syntax--octave {
      color: #000000; //black
    }

    .syntax--constant.syntax--language,
    .syntax--constant.syntax--numeric {
      color: #000000; //black
    }

    // Strings
    .syntax--string.syntax--quoted.syntax--single,
    .syntax--constant.syntax--character.syntax--escape,
    .syntax--punctuation.syntax--definition.syntax--string.syntax--end,
    .syntax--punctuation.syntax--definition.syntax--string.syntax--begin {
      color: #A020F0; // red
    }



    // keywords
    //.syntax--storage.syntax--type.syntax--function.syntax--matlab,
    .syntax--storage.syntax--type,
    .syntax--keyword.syntax--control {
      color: #0000FF; //blue
      font-weight: normal;
    }

    // Comments %, %%
    .syntax--comment.syntax--line.syntax--percentage,
    .syntax--comment.syntax--line.syntax--double-percentage {
        color: #228B22; // green
        font-style: normal;

        .syntax--punctuation.syntax--definition.syntax--comment {
          color: #228B22; // green
          font-style: normal;
        }

        .syntax--storage.syntax--type.syntax--class.syntax--note {
          color: #228B22; // green
          font-style: normal;
        }

        .syntax--storage.syntax--type.syntax--class.syntax--todo {
          color: #228B22; // green
          font-style: normal;
        }

        .syntax--meta.syntax--cell {
          color: #228B22; // green ... not working
          font-style: normal;
        }

        .syntax--markup.syntax--underline.syntax--link {
          color: #228B22; // green
        }
    }

    // Parentheses
    .syntax--meta.syntax--parens {
      color: #000000;
    }

    // function
    .syntax--meta.syntax--function.syntax--matlab {
      .syntax--meta.syntax--arguments.syntax--function.syntax--matlab,
      .syntax--entity.syntax--name.syntax--function.syntax--matlab,
      .syntax--variable.syntax--parameter.syntax--output.syntax--function.syntax--matlab {
        color: #000000; //black
        .syntax--variable.syntax--parameter.syntax--input.syntax--matlab {
          color: #000000; //black
        }
      }
    }

    .syntax--meta.syntax--function.syntax--without-arguments.syntax--octave {
      .syntax--entity.syntax--name.syntax--function.syntax--octave {
        color: #000000; //black
      }
    }

    .syntax--support.syntax--function.syntax--octave {
      color: #000000; //black
    }


    // classdef
    .syntax--meta.syntax--class.syntax--matlab {
      .syntax--storage.syntax--type.syntax--function.syntax--matlab {
        color: #0000FF; //blue
      }

      .syntax--entity.syntax--name.syntax--section.syntax--class.syntax--matlab,
      .syntax--meta.syntax--function.syntax--matlab,
      .syntax--meta.syntax--methods.syntax--matlab {
        color: #000000; //black
      }

    }
  }
}