CSS로 자신의 원자 테마를 구축하십시오

이 21 세기의 "커스텀 텍스트 편집기"는 전 세계 수천 명의 개발자들에게 첫 번째 선택이되었습니다. 확장하고 사용자 정의하기 쉽으면 인기가 있습니다. 개발자는 확장 패키지 및 테마를 공개하여 Atom 커뮤니티와 새로운 기능을 공유합니다. 이 기사를 읽은 후에는 자신의 Atom Grammar 테마를 게시 할 수 있습니다. Atom Customization Journey를 시작하는 훌륭한 첫 단계입니다!

키 포인트의 짧은 검토

Atom은 개발자가 CSS를 사용하여 자체 구문 테마를 생성하고 공유 할 수있는 사용자 정의 가능한 텍스트 편집기입니다. 구문 테마를 만들면 먼저 Atom Text 편집기를 다운로드 한 다음 자동 생성 기능을 사용하여 구문 테마 패키지를 만듭니다. Atom은 변수, 중첩 스타일 및 연산자와 같은 함수를 포함하여 스타일에 적은 (CSS의 슈퍼 세트)를 사용합니다. 테마를 변경 한 후 원자 창을 다시로드하여 효과를보십시오.

테마가 생성되고 개선 된 후 APM (Atom Package Manager)을 통해 Atom 커뮤니티와 공유 할 수 있습니다.

문법 테마 란 무엇입니까?
• 구문 테마는 편집기의 텍스트/코드 영역을 스타일링하는 데 사용됩니다. 인터페이스 테마는 Atom 텍스트 편집기 (예 : 사이드 바, 상태 표시 줄, 탭 등)의 다른 측면을 설정하는 데 사용됩니다. 이 기사는 문법 주제의 생성에만 초점을 맞추고 CSS에 대한 기본 지식 만 가지고 있습니다.
• 초보자 안내서
간단히 Atom Text 편집기를 다운로드하고 시작하십시오! Atom은 덜 사용하는데, 이는 변수와 같은 편리한 기능을 갖춘 CSS의 슈퍼 세트입니다.
• 원자 문법 테마 패키지
를 생성합니다 문법 테마 만들기는 지루한 작업 이었지만 이제 Atom은 강력한 자동 생성 기능을 제공합니다.

Atom을 열고 CMD Shift P를 누르십시오 (Windows 용 Ctrl Shift P를 사용).

<.> 입력 생성. "패키지 생성기 : 구문 테마 생성"옵션을 선택하십시오.

Atom은 패키지를 저장할 위치를 선택하라는 메시지가 표시되면 원하는대로 선택할 수 있습니다.

가방을 이름으로 지정하십시오

Atom은 생성 된 패키지를 프로젝트로 열고 편집을 시작할 수 있습니다. Atom은 패키지 이름이 "-syntax"로 끝나고 소문자와 하이픈을 사용하여 이름을 지정할 것을 권장합니다. 예를 들어, 나는 내 패키지 라는 이름을 지정하여 파란색 테마로 설정했습니다. 패키지 구조 자동으로 생성 된 패키지 구조는 명확하고 이해하기 쉽습니다.

메인 스타일 시트는

에 있습니다.

기본 스타일은 에 있으며 색상 정의는 에 있습니다.

파일은 패키지의 이름, 설명 및 기타 메타 데이터를 정의하는 데 사용됩니다. 파일은 주제를 Markdown 형식으로 설명합니다. 주제를 게시하면이 readme가 다운로드 페이지에 표시됩니다.

코드 예

Atom의 렌더링 엔진은 크롬을 기반으로합니다 (Electron을 이해하면 작동 방식에 대한 심층적 인 이해를 제공 함). 따라서 스타일 설정에 CSS를 사용할 수 있습니다. Atom은 덜 사용하는데, 이는 변수 및 중첩 된 수입과 같은 편리한 기능이 있습니다.

변경 효과를 확인하려면 원자를 다시로드하십시오 (CMD Alt Ctrl L 또는 "View"& Gt; "Developer"& gt; "Reload"). Atom 설정 (CMD,) & gt; "테마"에서 편집기 구문 테마를 새로 만든 테마로 설정하십시오.

테마를 파란색으로 설정하십시오

파일을 엽니 다 ( & gt; ). 라는 이름의 변수를 볼 수 있습니다. 진한 파란색으로 변경하십시오. Reload Atom (CMD Alt Ctrl L 또는 "View"& gt; "Developer"& gt; "Reload"). 텍스트 영역의 배경색이 변경되어야합니다. 자세한 코드 설명

import colors.less. CSS와 유사하게, 덜 변수 (styles 편집기 배경색은 다음 코드로 정의됩니다. colors.less @very-dark-gray 정의 #1d1f21 : #1d1f33 는

에 정의되어 있으므로 스타일 시트 조직 스타일 시트 변수가 구성되는 방법은 개인 선호도에 따라 다릅니다. Atom의 자동 생성 템플릿은 의 구문 변수를 사용하여 동일한 색상의 항목을 그룹화하고 각 변수에 에서 값을 할당하는 것이 좋습니다. 그러나 색상은

에서 직접 정의 할 수 있습니다. index.less 고급 스타일 base.less 변수 및 수입 외에도 다른 기능이 적습니다. base.less 중첩 스타일 & 운영자 @ 중첩 스타일

중첩 스타일이 적습니다. 예를 들면 :
이것은 다음과 같습니다

<code class="language-less">@import "syntax-variables";

atom-text-editor, :host {
  background-color: @syntax-background-color;
}</code>

& 운영자 @syntax-background-color syntax-variables.less

& 운영자는 상위 선택기를 단순화합니다.

<code class="language-less">@import "colors";

// ...

@syntax-background-color: @very-dark-gray;</code>

파란색 변수 이름

모든 변수 이름을 진한 파란색으로 설정하고 호버링 할 때 밑줄을 추가합니다. Atom은 코드 편집기의 모든 변수에 @very-dark-gray 클래스를 자동으로 추가합니다. 그러므로 우리는 colors.less 클래스의 스타일을 수정해야합니다. colors.less @very-dark-gray 현재 줄 번호

현재 줄 번호를 파란색으로 설정하십시오

in 를 추가하십시오. 이 색상을 : 요약

간단한 예제와 CSS 기본 사항을 사용하여 새로운 원자 구문 테마를 만들었습니다. APM (Atom Package Manager)을 통해 주제를 지속적으로 개선하고 세계와 공유 할 수 있습니다.

base.less 리소스 syntax-variables.less base.less

색상 작동 함수는 입니다 Atom 테마를 게시 Atom 사용자 설명서
2. faq
(원래 텍스트의 FAQ 섹션은 여기에서 생략됩니다.이 질문들은 주제의 의사 원리 목표와 일치하지 않으며 더 길기 때문에 생략됩니다.) .

위 내용은 CSS로 자신의 원자 테마를 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!