vscode 마크다운 프리뷰 테마 커스터마이징 하기

Markdown Preview Enhanced라는 확장을 사용하면 테마를 커스터마이징할 수 있다.

설치 후 사용 방법은 기존과 똑같이 Ctrl+Shift+V 단축키로 실행할 수 있다.

그 외의 단축키들은 위 링크 참고

테마 커스터마이징 하기

테마는 기본적으로 프리뷰 화면에서 우측 하단 햄버거의 Preview Theme에서 선택할 수 있다.

이 선택한 테마 위에 css 파일로 덮어씌워주는 커스터마이징이 가능하다.

Command Palette (Ctrl+Shift+P) > Markdown Preview Enhanced: Customize CSS (Global) 검색 후 클릭

클릭하면 style.less 파일이 열리고 다음과 같은 블록이 나오게 되는데, 이 안에 css를 적어주면 커스터마이징이 가능하다.

.markdown-preview.markdown-preview {

}

자세한 내용은 문서 (shd101wyy.github.io/markdown-preview-enhanced) 참고

e.g.

Preview theme : Light > medium.css

/* style.less */
.markdown-preview.markdown-preview {
  @import url("https://fonts.googleapis.com/css2?family=Inconsolata&family=Ubuntu&family=Noto+Sans+KR&display=swap");

  * {
    font-size: 18px;
    font-family: "Ubuntu", "Noto Sans KR";
  }

  /* headers */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 400 !important;
    margin-bottom: 0.8rem;
  }

  h1 {
    font-size: 1.5em;
  }

  h2 {
    font-size: 1.4em;
  }

  h3 {
    font-size: 1.3em;
  }

  h4 {
    font-size: 1.1em;
    color: #333;
  }

  h1 strong,
  h2 strong,
  h3 strong,
  h4 strong,
  h5 strong,
  h6 strong,
  h1 code,
  h2 code,
  h3 code,
  h4 code {
    font-size: 1em;
  }

  /* general */

  a,
  p a {
    color: #00a3f5;
    text-decoration: none !important;
  }

  p {
    margin-bottom: 0.3em;
    margin-left: 5px;
  }

  code {
    font-family: "Inconsolata";
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.2em 0.35em;
  }

  p > code {
    font-size: 0.9em;
  }

  pre > code {
    background-color: transparent;
    font-weight: 400;
  }

  blockquote {
    padding-block: 0.5em;
    padding-right: 1em;
    margin-left: 0;
  }

  blockquote a {
    color: #08c;
    text-decoration: none;
  }

  blockquote p {
    margin: 0;
  }

  hr {
    margin: 1em 0;
  }

  ul {
    list-style-type: "-   ";
    margin-bottom: 1em;
  }

  ol li {
    padding-left: 5px;
  }
}