옵시디언 편집화면-읽기화면 동일한 줄간격으로 보기

적용 결과 

설정 전 

설정 후

설정방법 - 스니펫 적용 

아래 css 파일을 .snippet 폴더에 넣은뒤

스니펫을 활성화시켜주면 된다.

line height.css

0.00MB

 

/* 기본 줄간격 */
.cm-line,
.markdown-reading-view p {
    line-height: 1.6 !important; /* 폰트사이즈의 배수로 들어감  */
    margin-block-end: 0px !important;
    margin-block-start: 0px !important;
}

/* 리스트(li), 숫자(ol) 줄간격 */
.HyperMD-list-line-1,
.markdown-reading-view ul,
.markdown-reading-view ol {
    line-height: 1.7 !important; /* 폰트사이즈의 배수로 들어감  */
    margin-block-end: 0px !important;
    margin-block-start: 0px !important;
}

/* 헤더 */
.HyperMD-header-1,
.HyperMD-header-2,
.HyperMD-header-3,
.HyperMD-header-4,
.HyperMD-header-5,
.HyperMD-header-6,
h1,h2,h3,h4,h5,h6 {
    line-height: 1.7 !important; /* 폰트사이즈의 배수로 들어감  */
    padding-top: 0.5em !important;
    margin-block-end: 0px !important;
    margin-block-start: 0px !important;
}

 

스니펫 사용방법은아래 참고 

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

 

세가지 모드가 다르게 보이는 이유 

• 원본모드 (Source Mode) : 코드 에디터(CodeMirror 기반)의 기본 CSS가 적용되며, 텍스트 편집 효율성을 극대화하기 위해 줄 간격이 가장 좁고 일관되게 표시됨
• 라이브 프리뷰 모드 (Live Preview) : CodeMirror 기반의 코드 에디터지만, 최종 HTML 렌더링을 시뮬레이션하려는 특수 CSS가 적용됨. 줄 간격이 원 모드보다는 넓지만, 여전히 편집 효율을 위해 읽기 모드의 최종 HTML 렌더링과는 미세한 차이가 존재
• 읽기 모드 (Reading Mode) : 브라우저의 표준 HTML로 렌더링되며, 이 HTML에 가독성 최적화된 최종 CSS 규칙이 적용됨. 문서의 계층 구조(제목, 문단, 목록)에 따라 상하 여백 크게 적용되서 가장 넓게 보이는 경우가 많음

근데 나도 구글 찾아본거라 백퍼 이해한건 아님. 그냥 렌더링 되는 방식이 다르다 라고 이해가됨 

css snippet을 만든방법

세가지 모드를 병렬로 켜놓은 다음 

`ctrl shift I`를 눌러서 개발자모드를 켜고 "Computed"탭이 나오게 한다음 

요소를 눌러보면 어떤값이 달라서 다르게 보이는지 알수 있다. 

 

추가 참고 글

읽기모드에서 빈줄 없어짐. 해결방법 

https://orangecake.tistory.com/49

옵시디언 읽기모드에서 빈줄이 없지는 이유, 해결방법