옵시디언 - 기본(Default) 테마에서 미니멀(Minimal) 테마처럼 wide, max 클래스 쓰기

며칠 전에 다음과 같은 글을 올렸습니다.

Obsidian 노트 글 너비를 100%로 만들기 (full-width) : 네이버 카페
https://cafe.naver.com/obsidianary/4017 

 

그 글의 댓글을 통해 미니멀 테마의 wide와 max 클래스에 대해 알게 되었습니다.

( 다시 한번 Obsidian 옵시디언 사용자 모임 : 네이버 카페 "아읓" 님에게 감사 )

페이지에 클래스(cssclass: wide 나 max)를 추가하면
이미 테마에 넣어진 CSS 스타일을 사용하여 글의 너비를 조금씩 늘려 주더군요.

 

이것을 기본 테마(Default Theme)에서도 쓸 수 있으면 좋겠다 싶어 만들어 봤습니다.

그래서 테마를 바꾸더라도 cssclass 설정이 되어 있으니 그 너비가 같아 좋았습니다.

 

설정하기

다음 두 가지만 설정하면 됩니다.

1. 노트의 frontmatter에 cssclass 항목 추가

cssclass: wide
또는
cssclass: max

2. "Settings ＞ Appearance ＞ CSS Snippets"에 설정

다음 코드를 my_style.css에 추가합니다.

my_style.css 대신에 자신이 지금 쓰고 있는 파일(css)에 넣어도 됩니다.

 

여러분들의 많은 의견 바랍니다.

 

참고

더 늘리기

wide나 max 보다 더 너비를 늘리려면 제가 올린 다음 페이지를 보시면 됩니다.

 

옵시디언 노트 글 너비 100% 만들기 - 읽기 쉬운 행 길이(Readable line length) 설정을 특정 페이지만 사용 안 하도록(기본과 미니멀 테마 둘 다에 적용)

https://eoureo.tistory.com/entry/옵시디언-노트-글-너비-100-만들기-Readable-line-length-설정을-사용-안하도록

옵시디언 노트 글 너비 100% 만들기 - 읽기 쉬운 행 길이(Readable line length) 설정을 특정 페이지만 사

 

 

어떻게 만들었나

 

다음은 제가 코드를 만들 때 살펴본 내용입니다.

 

Developer Tools에서 탭 안의 노트 구조를  살펴보니 다음과 같습니다.

<div class="view-content"> 
  <div class="markdown-source-view"> ( ☜ Editing View, cssclass가 들어가는 곳 )
    <div class="cm-editor"> 
      <div class="cm-scroller"> 
        <div class="cm-sizer"> 
          <div class="inline-title"> 
          <div class="cm-contentContainer"> 
            <div class="cm-content"> 
              <div class="cm-line"> ( ☜ 노트의 한 줄에 해당한다.  여기에서 Live Preview / Source Mode에 따라 내용이 바뀐다.)
              <div class="cm-line">  
  <div class="markdown-reading-view"> ( ☜ Reading View )
    <div class="markdown-preview-view"> ( ☜ cssclass가 들어가는 곳 )
      <div class="markdown-preview-sizer markdown-preview-section"> 
        <div class="data-tag-name="h2" class="h2" data-heading="My Heading 2">  ( ☜ 헤딩 )
          <h2>
        <div class="data-tag-name="p" class="el-p">  ( ☜ 일반 줄 )
          <p>
        <div class="data-tag-name="pre" class="el-pre code-block-wrap">  ( ☜ 코드 블럭 )
          <pre>

너비 설정 값은 div.markdown-source-view와 div.markdown-preview-view에 넣어 주고

너비 스타일은 "편집 보기(Editing View)"에서는 div.cm-size, div.cm-content, div.cm-line에 넣고
"읽기 보기(Reading View)"에서는 div.markdown-preview-sizer.markdown-preview-section, div.markdown-preview-sizer.markdown-preview-section ＞ div에 넣어 주네요.

 

너비에 관련해서는 다음과 같은 스타일이 미니멀 테마에서 쓰입니다.

body {
    --max-width: 88%;
    --folding-offset: 10px;
    --file-line-width: 700px;
    
    --line-width: 40rem;
    
    --line-width-wide: calc(var(--line-width) + 12.5%);
    --line-width-adaptive: var(--line-width);
}

/* .cm-content, .cm-sizer */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content, .markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer {
    max-width: 100%;
}

/* .cm-line */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content>.image-embed,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content>img:not([width]),
.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout>.callout,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-html-embed,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-line,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-line.HyperMD-codeblock,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-line.HyperMD-quote,
.markdown-source-view.mod-cm6.is-readable-line-width .embedded-backlinks,
.markdown-source-view.mod-cm6.is-readable-line-width .internal-embed,
.markdown-source-view.mod-cm6.is-readable-line-width table {
    width: calc(var(--line-width-adaptive) - var(--folding-offset));
    max-width: calc(var(--max-width) - var(--folding-offset));
    margin-right: auto;
    margin-left: max(calc(50% + var(--folding-offset) - var(--line-width-adaptive)/ 2),calc(50% + var(--folding-offset) - var(--max-width)/ 2))!important;
}

.markdown-source-view.mod-cm6.is-readable-line-width .cm-line:not(.HyperMD-table-row) {
    max-width: calc(var(--max-width) - var(--folding-offset));
}

.contextual-typography .markdown-preview-view.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-top: 0;
}

.contextual-typography .markdown-preview-view.is-readable-line-width .markdown-preview-sizer>div {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width);
    width: var(--line-width-adaptive);
}

 

cssclass: wide를 하면 이것이 쓰입니다.

.markdown-preview-view.wide, .markdown-source-view.wide {
    --line-width-adaptive: var(--line-width-wide);
}

 

cssclass: max를 하면 이것이 쓰입니다.

.markdown-preview-view.max,
.markdown-source-view.max {
    --line-width-adaptive: 300em;
    --line-width-wide: 300em;
}

300em은 엄청난 크기입니다.
1em을 16px로 본다면 4800px이니 FHD급 해상도(1920x1080)의 모니터가 두 개 반 옆으로 놓여야 하는 볼 수 있겠네요.

그렇게 해놓고 max-width로 화면에 맞게 설정을 해 주네요.

 

이러한 스타일을 골라내어서
기본 테마(Default Theme)에서 쓸 수 있도록 했습니다.