옵시디언 쓰다가 되게 편하다고 생각 들어서 css 하나 공유합니다.

클로드한테 만들어달라 했구요. 기본 테마나 minimal테마를 사용하다보면 제목 수준이 h1인지, h2인지, h3인지 구분이 잘 안가더라구요. 아예 앞에 수준을 표기해주면 어떨까 싶어서 만들었습니다.

↑ 진짜 별거 없죠?

그래도 나름 고민해서 live preview 모드에서 제목 수준 표시가 중복되는 문제 고치느라 고민 많이 했습니다.

다음 내용을 snippets 폴더에 넣으시고(확장자명(*.css)) 활성화하시면 됩니다.

/* [공통 설정] 모든 헤딩 표시자의 기본 위치 및 크기 */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before,
.cm-line.HyperMD-header-1::before, .cm-line.HyperMD-header-2::before, .cm-line.HyperMD-header-3::before,
.cm-line.HyperMD-header-4::before, .cm-line.HyperMD-header-5::before, .cm-line.HyperMD-header-6::before {
  font-size: 0.65em;
  vertical-align: middle;
  margin-right: 6px;
}

/* [강조 그룹] H1, H2, H3 - 진하고 선명하게 표시 */
h1::before, .cm-line.HyperMD-header-1::before,
h2::before, .cm-line.HyperMD-header-2::before,
h3::before, .cm-line.HyperMD-header-3::before {
  font-weight: 800;
  opacity: 1;
}
/* [저채도 그룹] H4, H5, H6 - 차분한 회색 및 흐림 처리 */
h4::before, .cm-line.HyperMD-header-4::before,
h5::before, .cm-line.HyperMD-header-5::before,
h6::before, .cm-line.HyperMD-header-6::before {
  font-weight: normal;
  color: #888;
  opacity: 0.9;
}
/* [개별 색상 및 문구 설정] */
/* H1: 빨강 */
h1::before, .cm-line.HyperMD-header-1::before { content: "H1"; color: #ff4d4d; }
/* H2: 짙은 파랑 (보정됨) */
h2::before, .cm-line.HyperMD-header-2::before { content: "H2"; color: #2563eb; }
/* H3: 초록 */
h3::before, .cm-line.HyperMD-header-3::before { content: "H3"; color: #22c55e; }
/* H4, H5, H6: 문구만 설정 */
h4::before, .cm-line.HyperMD-header-4::before { content: "H4"; }
h5::before, .cm-line.HyperMD-header-5::before { content: "H5"; }
h6::before, .cm-line.HyperMD-header-6::before { content: "H6"; }