VNote로 Markdown을 PDF로 변환시 세부 설정

VNote 툴로 Markdown 파일을 PDF 파일로 export 할 때, 내가 설정한 사항들을 기록한다.

VNote

VNote는 오픈소스 마크다운 툴로, 마크다운 렌더링시 Mermaid, PlantUML도 제대로 나오고, 테마도 여러가지를 선택할 수 있고, 각각의 테마도 쉽게 설정이 가능하다. 특히 마크다운 파일을 PDF로 export 시에도 쉽게 설정을 변경할 수 있어서, 나는 이 경우에 가끔 사용하고 있다.

여기서는 추후 참조를 위하여 내가 PDF export를 위해 수정한 사항들을 기록해 둔다.

VNote 테마 설정 파일

PDF export 시 rendering style을 고치려면 %AppData%\VNote\VNote\themes\ 경로에서 (VNote 버전에 따라서 경로는 조금씩 다를 수 있음) 해당 css 파일을 수정하면 된다.
예를 들어 나는 rendering style을 Vue-light web.css로 선택했고, syntax highlighting style을 Vue-light highlight.css로 선택했는데, 이 경우 각각의 설정 파일들은 다음과 같다.

• Rendering style 설정 파일: %AppData%\VNote\VNote\themes\vue-light\web.css
• Syntax highlighting style 설정 파일: %AppData%\VNote\VNote\themes\vue-light\highlight.css

이 글도 이 파일들을 기본으로 하여 수정한 내용들이다.

web.css 수정 사항

• code 영역, block quote 관련하여 수정한 사항

  code {
      font-family: Consolas, Monaco, "Andale Mono", Monospace, "Courier New", "YaHei Consolas Hybrid";
      color: #e96900;
      padding: 0 4px;
      margin: 4px 0;
      border-radius: 2px;
      background-color: #f0f0f0;
      word-break: break-word;
  }
  
  blockquote {
      color: #444444;
      border-left: .5em solid #539fd1;
      padding: 0.5em 0.5em;
      background-color: #f0f3f5;
      margin-left: 0;
  }
  
  blockquote p {
      color: #444444;
      margin: 0;
  }
  

• 밑줄 설정

  u {
      text-underline-offset: 0.17em;
      text-decoration-skip-ink: none;
      text-decoration-color: #0099FF;
  }
  

• PDF export 시 kbd 엘리먼트를 표시

  kbd {
      background-color: #eee;
      border-radius: 2px;
      border: 1px solid #b4b4b4;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 0 0 0 rgba(255, 255, 255, .7) inset;
      color: #333;
      display: inline-block;
      font-size: 0.9em;
      line-height: 1;
      padding: 1px;
      white-space: nowrap;
  }
  

highlight.css 수정 사항

pre[class*="language-"] {
    padding: 0.2em;
    margin: -0.8em 0;
    overflow: auto;
    border-radius: 4px;
}

li pre[class*="language-"],
ul pre[class*="language-"],
ol pre[class*="language-"] {
    margin: 0.2em 0;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background:#f0eae6 !important;
}

맺음말

VNote에서 마크다운을 export 할 때 위와 같은 설정을 통하여 만족스러운 품질의 PDF 파일을 얻을 수 있었다.