소개

VSCode + Markdown에서 문서를 때리면 어떤 항목을 쓰고 있는지 모르는 경우가 있겠지요(협조압력).
VSCode의 경우, EXPLORER Pane에 OUTLINE이 표시되므로 그것을 보면서 노력한다는 것도 있습니다만, 쓰고 있을 때는 Preview 보고 있으므로, Preview에서 대체로의 위치를 ​​알고 싶다.

자신은 Preview에 shd101wyy.markdown-preview-enhanced을 사용하고 있기 때문에이 CSS 확장을 빨리 설정하고 제목에 번호를 흔들어 보겠습니다.

절차

markdown-preview-enhanced 설치

필요에 따라 잘 설치.
어쩌면 디폴트의 previewer에 css 커스터마이즈 할 수 있을지도 모른다(미검증) 하지만, 자신은 shd101wyy.markdown-preview-enhanced 를 이용.

CSS 사용자 정의

Ctrl-Shift-p를 눌러 Command Palette를 표시하고 Markdown Preview Enhanced: Customize CSS를 실행하십시오.
그러면 style.css 가 열리므로 다음과 같은 css를 기술 ( /**以下の部分**/ 라고 쓰여 있는 장소).

이번에는 우선 h4까지를 설정. 내용은 ざっく 이하.

h1에서 chapter counter를 reset

h2 before에서 chapter를 inclement하고 content:以下略 로 출력.

이하 약

덧붙여 이 css의 내용은 나중에 같은 환경을 만들기 쉽게 하기 위해 적절히 갱신할 가능성이 있으므로 양해 바랍니다.

style.css

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Yu-Gothic-UI";
    font-size: 1.2em;
  }

  body {
    font-family: "Yu-Gothic-UI";
  }
  [class*="language"] {
    font-family: "MyricaM M";
  }
  .task-list-item-checkbox {
    font-family: "Yu-Gothic-UI";
    font-size: smaller;
  }
  /**以下の部分**/
  h1 {
    counter-reset: chapter;
    font-size: 1.8em;
    border-style: solid;
    border-width: 0 0 1px 0;
  }
  h2 {
    counter-reset: sub-chapter;
    font-size: 1.5em;
  }
  h3 {
    counter-reset: section;
  }

  h2::before {
    counter-increment: chapter;
    content: counter(chapter) ". ";
  }
  h3::before {
    counter-increment: sub-chapter;
    content: counter(chapter) "." counter(sub-chapter) ". ";
  }
  h4::before {
    counter-increment: section;
    content: "(" counter(section) ") ";
  }
}

결과

이런 느낌.