로그인
회원가입
Loading...
Loading...

Board

게시판

NotePad++ SASS코드 하이라이팅 (scss), 검은바탕(VibRant Ink 스타일 테마)

개인적으로 웹작업의 대부분을 NotePad++ 로 처리하고 있으며, 주로 사용하는 테마는 검은 바탕의 Vibrant Ink 를 사용한다. 이 검은바탕의 테마가 흰바탕 테마들보다 훨씬 눈이 편하다고 생각하므로 추천한다.



사용법은 notepad++ 메뉴에서 설정->스타일 설정에 들어가서 최상단의 '테마'에서 'Vibrant Ink'를 선택하면 적용된다.



좀더 사용하기 쉽게 하려면 글꼴 스타일에서 글꼴 크기를 16 정도로 올리고, 바로 아래 실렉트 박스중 '전역 글꼴 크기 사용'에 체크를 한다면, 가로 1920픽셀의 데스크탑 화면에서 가독성이 좋다.

지금까지는 SASS 스타일 중 하나인 *.scss 파일들을 css 형식으로 인식하도록 '설정' -> '스타일 설정'에서 언어중 css에 추가 적인 확장자로 scss 를 입력하여 사용하였다. 이런 방법은 실제 내용은 php 코드이지만 확장자는 다른것(예:tnc)일 경우등에 매우 유용하므로 팁으로 먼저 정보를 공유한다.



위 이미지 처럼 좌측에서 원하는 언어를 선택후 최하단에 있는 사용자 확장자에 .을 빼고 확장자만 쓰면 된다. 두개 이상이 있을 경우는 스페이스로 구분해서 입력할수 있다.

---

어쨋거나 css 하이라이팅으로는 scss 주석과 변수 문법등의 하이라이팅이 되지 않으므로 불편하다.

따라서 이를 해결하기 위해 본인이 겪은바를 토대로 NotePad++의 Vibrant Ink 테마(검은바탕)에서 scss 파일 하이라이팅이 제대로 나타나도록 하는 방법을 공유하고자 한다.

먼저 구글링을 통해 scss 하이라이팅용 xml 파일 두개를 아래 링크에서 발견하였다.
https://github.com/marvinlabs/notepad-plus-plus-scss-syntax-highlighting

두개중 아래 링크 주소의 다크버전을 클릭해서 .XML 로 저장하거나, 우클릭으로 링크를 다른이름으로 저장한다.
https://raw.githubusercontent.com/marvinlabs/notepad-plus-plus-scss-syntax-highlighting/master/marvinlabs_userDefinedLang_darktheme_SCSS.xml

노트패드를 실행후 언어메뉴의 아래쪽에 보이는 언어정의를 클릭해서 아래 화면이 나오면...
가져오기 버튼으로 방금 받은 xml 파일을 지정해서 임포트 하자.



제대로 임포트 되었다면, 아래 처럼 사용자정의 언어에서 SCSS-Dark를 선택할수 있다.



일단, 노트패드++을 종료후 재실행 하고, SASS 소스코드인 scss 확장자 파일을 불러온후
언어 메뉴 하단을 보면 새로 영입한 SCSS-Dark를 선택하여 하이라이팅을 확인할수 있는데...



조금 문제들이 보인다. 어두운바탕용 하이라이팅을 불러왔는데, 몇몇 구분자나 키워드의 바탕색이 흰색으로 표시된다. 잘 살펴 보니 젤 눈에 띄는것 하나는 스타일 시트의 기본 구분자인 중괄호 { } 의 바탕이 흰색이다. 고쳐보자 !!!

언어메뉴에서 언어정의.. 를 눌러 최상단에서 사용자 언어를 SCSS-Dark 를 선택하면 화면중에 접기스타일 섹션이 아래 그림처럼 보인다. 스타일러 버튼을 눌러 보자.



아래 그림처럼 폰트의 배경색이 흰색으로 되어 있는것이 보인다. 색상을 클릭해서 검은색을 선택하자.



나머지는 어디에서 정의내린건지 찾기가 어려웠다. 언어정의탭에서 이런 저런 키워드들을 보았지만 안보인다. 어디 숨었나 했더니... '기본스타일'이 범인이었다.



눌러서 보면 글자색이 검정이고, 배경색이 흰색이다. 둘다 변경해서 글자색을 흰색으로, 배경색을 검정으로 바꾸어주자.



결과화면을 보니 적당해 보인다 !!



이렇게 수정한 언어 하이라이팅 정의 파일을 첨부하니 바로 사용하면 되겠다.
(* 언어정의 메뉴에서 해당 SCSS-Dark 테마를 내보내기 버튼으로 xml 파일을 만들수 있다.)

첨부파일 : darktheme_SCSS_edit_by_firstmcu.xml


COMMENTS