Quartz layout의 left, right column 스크롤 안되는 현상

Quartz의 RecentNotes 컴포넌트를 layout에 추가해봤다. 좌/우 칼럼의 컨텐츠가 스크롤 안돼서 매우 답답하다. Inspect로 보면 .page > #quartz-body .sidebar 클래스가 position:fixed다. 임시로 position을 제거해보니 좀 더 자연스럽다.

스타일 수정

어디를 수정해야할지 훑어보다가 /quartz/styles/base.scss파일에 .sidebar 클래스가 있어서 아래처럼 커멘트 처리 했다. Upstream이 바뀌면 conflict 발생할 것이다. 더 나은 방법이 있는지 구글 검색 해봤지만 “quartz”라는 키워드로는 검색이 쉽지 않다.

/quartz/styles/base.scss

   & .sidebar {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      top: 0;
      width: $sidePanelWidth;
      margin-top: $topSpacing;
      box-sizing: border-box;
      padding: 0 4rem;
      /* position: fixed; */
      @media all and (max-width: $fullPageWidth) {
        position: initial;
        flex-direction: row;

수정 후

npx quartz sync

해보니 변경한 left, right sidebar 스타일이 적용되었다. 이후 search 하단의 여백도 조절했다.

/quarts/components/styles/search.scss

@use "../../styles/variables.scss" as *;
 
.search {
  min-width: fit-content;
  max-width: 14rem;
  // flex-grow: 0.3;

마무리

• Quartz의 syntax highlight는 어떤 spec을 쓰는가?
• 라인을 강조하는 {1,2,5-9} 문법은 에디터 상의 라인 값이다. showLineNumbers{}에서 지정한 시작 라인 넘버를 따르지 않는다.