カテゴリー: Windows

投稿日:

Mermaidの図形を確実にPDF出力する

VSCodeのMarkdownPDFからMermaidの図形をPDF出力できない場合の対処方法

  1. MarkdownPDFからHTMLファイルを出力
  2. 出力されたHTMLファイルをFirefoxで開く
  3. デベロッパーモードに移行 Ctrl + Shift + i
  4. スタイルエディター / スタイルシートのインポート（アイコン）
  5. CSSファイル指定 D:\_your_directry_\markdown-pdf.css
  6. ブラウザからPDF印刷
投稿日:

VS Code セッティング

VS Codeのセッティング は、setting.json ファイルに記載する。
markdown-pdf のヘッダーやフッターそして別ファイルのスタイルシートを用意している。
//  setting.json
{
    "editor.tabSize": 2,
    "markdown-preview-enhanced.previewTheme": "github-dark.css",
    "markdown-pdf.highlightStyle": "github.css",
    "editor.fastScrollSensitivity": 10,
    "window.zoomLevel": 0,
    "editor.fontFamily": "'Source Han Code JP Light','Source Han Code JP Normal','Source Han Code JP Regular','Source Code Pro'",
    "markdown-pdf.margin.top": "0.8cm",
    "markdown-pdf.margin.bottom": "1.7cm",
    "markdown-pdf.displayHeaderFooter": true,
    "markdown-pdf.headerTemplate": "<div></div>",
    "markdown-pdf.footerTemplate": "<div style=\"font-family: 'Source Han Code JP Normal','源ノ角ゴシック Code JP','メイリオ'; position: relative; border-top: 1px solid black; margin: 0.5cm; font-size: 9px; width: 100%;\"><div style=\"position: absolute; width: 100%; top: 0.2cm; text-align: center;\"><span class='pageNumber'></span> / <span class='totalPages'></span></div><div style=\"position: absolute; right: 0; top: 0.2cm;\">** Corporation</div></div>",
    "markdown-pdf.styles": ["E:/_user/markdown-pdf.css"]
}
//  markdown-pdf.css
/* @import url("https://newcss.net/new.min.css");  */

body {
  font-family: 'Source Han Code JP Normal','源ノ角ゴシック Code JP','メイリオ';
  font-size: 10pt;
}

h1,h2,h3,h4,h5,h6,p,table {
  margin-top: 20px ;
}

h1,h2,h3,h4,h5 {
  font-size: 14pt;
}

h1 {
  border-bottom: 1px solid #666;
}

h2 {
  padding: 0.1rem 0.4rem;
  border-left: 10px solid #666;
}

h3  {
  text-align: left;
}

h4  {
  text-align: center;
}

h5 {
  position: relative;
  padding: 20px;
  text-align: center;
}

h5:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #666;
  margin-bottom: 10px;
}


h6 {
  font-size: 10pt;
  text-align: right;
  font-weight: normal;
}

p {
  margin-left: 5px;
}