[CSS Snippet] 단락 앞과 뒤의 간격을 사용자 정의

단락 앞과 뒤의 간격을 Style Settings으로 정의하는 Css snippet입니다.

 

이 스니펫은 Things 테마의 단락조절부분만 떼내온 것으로 편집모드에서 단락을 조절할 수 있습니다. Style Settings 에서 조절할 수 있다는 장점이 있습니다.

예시

Css Snippet

body {
    --paragraph-margin-top:10px;
    --paragraph-margin-bottom:5px;
}

div:not(.HyperMD-header,.HyperMD-list-line).cm-line {
    padding-top:var(--paragraph-margin-top) !important;
    padding-bottom:var(--paragraph-margin-bottom) !important;
}

div:not(.HyperMD-header,.HyperMD-list-line).cm-line:has(.cm-fold-indicator) {
    padding-top:unset !important;
    padding-bottom:unset !important;
}
div:not(.HyperMD-header,.HyperMD-list-line).cm-line:has(.cm-hmd-frontmatter) {
    padding-top:unset !important;
    padding-bottom:unset !important;
}

/* @settings
name: 단락 간격 조정 (Things Theme optimize)
id: things-style-optimize
settings:
    -
        id: paragraph-margin-top
        title: 단락 앞 간격
        type: variable-text
        default: 5px
    -
        id: paragraph-margin-bottom
        title: 단락 뒤 간격
        type: variable-text
        default: 5px    
*/

관련 글

옵시디언 기초: 폰트와 가독성 향상

테마의 설정을 바꿔주는 Style Settings 플러그인

---