Obsidian :: Underline Heading 적용하기

Underline Heading

H1, H2와 같은 Heading 아래에 구분선을 자동으로 생성해 보자

필자는 H1, H2 와 같은 Heading 아래에 구분선이 있는게 깔끔하다고 생각한다.

Obsidian에서는 자동으로 구분선을 생성해 주지 않아 수동으로 --- 를 통해 구분선을 생성해서 사용중이었다. 이러면 사소한 문제가 발생하는데, GitHub 등 Heading 아래에 자동으로 구분선을 생성해 주는 다른 Markdown 뷰어를 통해 문서를 볼 경우, 자동으로 생성되는 구분선괴 ---를 통해 수동으로 만든 구분선이 이중으로 표시되는 문제가 있다.

이 문제는 간단한 CSS Snippets 적용을 통해 해결할 수 있다.

StyleSheets

/* .obsidian/snippets/UnderlineHeading.css */
 
.HyperMD-header-1::after, h1,
.HyperMD-header-2::after, h2 {
	display: block;
	content: "";
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--background-modifier-border);
	margin-bottom: 0.5em;
}

해당 CSS를 저장하고, 설정의 CSS Snippets에서 활성화해 주면 끝이다.

---

References

• Help with CSS snippet - underline headings

관련 글

• Quartz :: Underline Heading 적용하기