[CSS Snippet] Live Preview 모드에서 헤딩 레벨 표시

옵시디언 Live Preview 모드에서 헤딩 레벨을 표시해주는 CSS snippet입니다.

예시

CSS 코드

.is-live-preview div:not(.HyperMD-header.HyperMD-header-1.cm-line.cm-active) > span.cm-header.cm-header-1::before,
.is-live-preview div:not(.HyperMD-header.HyperMD-header-2.cm-line.cm-active) > span.cm-header.cm-header-2::before,
.is-live-preview div:not(.HyperMD-header.HyperMD-header-3.cm-line.cm-active) > span.cm-header.cm-header-3::before,
.is-live-preview div:not(.HyperMD-header.HyperMD-header-4.cm-line.cm-active) > span.cm-header.cm-header-4::before,
.is-live-preview div:not(.HyperMD-header.HyperMD-header-5.cm-line.cm-active) > span.cm-header.cm-header-5::before,
.is-live-preview div:not(.HyperMD-header.HyperMD-header-6.cm-line.cm-active) > span.cm-header.cm-header-6::before{  
  color: #6b6d6f;  
  margin-right: 0px;  
  font-size: 0.8rem;  
  margin-right: 5px;  
  font-weight: normal;  
}  


.is-live-preview div:not(.HyperMD-header.HyperMD-header-1.cm-line.cm-active) > span.cm-header.cm-header-1::before{  
  content: 'H1';  
}

.is-live-preview div:not(.HyperMD-header.HyperMD-header-2.cm-line.cm-active) > span.cm-header.cm-header-2::before{  
  content: 'H2';  
}  

.is-live-preview div:not(.HyperMD-header.HyperMD-header-3.cm-line.cm-active) > span.cm-header.cm-header-3::before{  
  content: 'H3';  
}  

.is-live-preview div:not(.HyperMD-header.HyperMD-header-4.cm-line.cm-active) > span.cm-header.cm-header-4::before{  
  content: 'H4';  
}  

.is-live-preview div:not(.HyperMD-header.HyperMD-header-5.cm-line.cm-active) > span.cm-header.cm-header-5::before{  
  content: 'H5';  
}  

.is-live-preview div:not(.HyperMD-header.HyperMD-header-6.cm-line.cm-active) > span.cm-header.cm-header-6::before{  
  content: 'H6';  
}

관련 플러그인

헤딩 옆에 헤딩 레벨을 표시하는 Lapel 플러그인

---