옵시디언 css 스니펫 사용방법 / property 확인, cssclasses 추가 방법

옵시디언에서는 css 스니펫을 사용해 옵시디언을 내가 원하는 스타일로 바꿔 사용할 수 있다. 

특정페이지에만 적용되는 css 스니펫을 사용할 수도 있다

스니펫 설정방법(요약) 

• "(내가 설정한 볼트위치)/.obsidian/snippets"  폴더에 위에서 맘에 드는 .css 파일을 넣고
• setting >apperance > css snippets 에서 해당 css 파일의 옵션을 켠뒤 
• css 적용을 원하는 특정페이지에서 ctrl p > add file property > 항목명에 cssclasses, 내용에 내가 설정해놓은 이름을 치면된다

설정방법 

1단계 : 스니펫 snippet 폴더 만들기 

• 설정 setting > 테마 appearance > css snippet > 폴더 클릭 

폴더 모양을 클릭하면 "(내가 설정한 볼트위치)/.obsidian/snippets" 폴더가 생김 

 

.snippet 폴더가 안보이는 경우

폴더이름이 "."으로 시작하는 경우 "숨긴 항목"을 체크해줘야 폴더가 보인다  

 

2단계 : snippet 폴더에 .css 파일 넣기 

예시로 아래는 하이라이트 색상을 바꾸는 css snippet 이다 

css 파일 이름은 어떤 것이라도 상관 없다 

.theme-light {
  --text-highlight-bg: #FFD452;
}
.theme-dark {
  --text-highlight-bg: #fff3a3a6;
}

hightlight color.css

0.00MB

 

 

 

이 파일 다운받은뒤을   "(내가 설정한 볼트위치)/.obsidian/snippets" 폴더에 넣는다 

3단계 : 특정 css snippet 의 기능 켜기 

마지막으로 남은것은 설정해서 해당 css snippet 의 기능을 켜주는 것이다 

처음에 css snippet 기능을 쓰기 시작할 때는 이 부분을 놓치고는 왜 안되는지 코드에 문제가 있는 줄알고 한참 고민할 때도 있었다. 

스니펫으로 할 수 있는 것 - 특정페이지에만 스타일 적용하기  

크게 두가지 css 설정을 할 수 있다. 

1. 모든 페이지에 적용되는 css 설정   

2. 특정페이지에만 적용되는 css  설정 

 

아래 코드와 같이 css snippet 을 작성하면 모든 페이지에 적용된다 

.theme-light {
  --text-highlight-bg: #FFD452;
}
.theme-dark {
  --text-highlight-bg: #fff3a3a6;
}

 

아래 두번째 코드와 같이 css snippet 을 작성하면 문서property의 cssclasses 에 'highlight_green'이라는 태그가 있어야 이 스니펫이 작동한다

.theme-light .highlight_green  {
  --text-highlight-bg: #a8c373 !important;
}
.theme-dark .highlight_green  {
  --text-highlight-bg: #a8c373 !important;
}

적용 전 후 

속성(property)에 csslasses 추가 방법

방법1 : 속성보기 "Visible" 

visible 상태이면 상단에 프로퍼티 정보가 항상 떠 있게 할수 있다. 

• setting > editor > properties in document > visible 
• `ctrl p` 로 커맨드 팔레트 열기 > "add file property" 하거나 // 문서 맨 위에서 "---" 치기

방법2 : 속성보기 "Hidden "  / 속성은 사이드탭에서 보기

hidden 상태이면 상단에 프로퍼티 정보가 소스모드일때만 보인다.  

 

그 대신 Ctrl P(커맨드 팔레트)를 켜서 "Show file properties"를 하면 우측사이드 탭에서 볼수있게 할수 있다.

(코어 플러그인-  "Properties view" 켜져있어야함)

(+) CSS 활용예시 

https://orangecake.tistory.com/9

옵시디언 헤더(H1~H6) 색상변경, 단축키 설정, 사이드바에서 목차 확인

 

(+) CSS Variables 공식문서 

snippet을 만들 때 사용할 수 있는 css variables (css 변수?) 에 관한 공식 문서 

https://docs.obsidian.md/Reference/CSS+variables/CSS+variables

CSS variables - Developer Documentation