MarkdownからPDFを作成する - プログラミング素人のはてなブログ

Git管理するにはMarkdownは優れているがそのままでは一般には受け入れがたい

Gitに慣れてくると、なんでもかんでもGit管理したくなります。
Power PointやWordもGit管理はできますが、バイナリとして管理されるのでGitのメリットである（人間にとっての）差分がわかりません。
世の中的にはPower PointやWordはメジャーですが、もう一つ欠点として、Power PointやWordを（購入して）インストールしていないとみることが出来ません。
また、これらのVersionが違ったり、コンパチソフトウェアを使っているとスタイルが崩れることもあります。

ココナラで取引をしていて、納品形態としてドキュメントが必要なことがありますが、ある程度体裁を整えようとするとWordは（個人的に）めんどくさくて何かいい方法は無いか？と検討していました。（改ページが内容を追加するたびにずれたり、インデントの設定方法が分からなかったり。）
ちなみに、Version違いやコンパチソフトウェアでのスタイル崩れ、に対してはPower PointやWordにある基本機能でのPDF出力を使うこともできます。

そこでMarkdownをWordの代わりにすることが出来ないか検討しました。

最終的な出力は↓のようになります。
f:id:s51517765:20220130115002p:plain

まず、Visual Sutudio Codeの拡張機能として、Markdown All in OneとMarkdown Preview Enhancedをインストールします。
f:id:s51517765:20220130115544p:plain
【VSCode】Markdown PreviewをCSSで読みやすくする方法 | HABATAKIブログ@翔

あとは、style.cssを作成し、設定します。

「Ctrl + Shift + P」で検索窓を出します
「Markdown Preview Enhanced: Customize CSS」を入力してEnter
CSSを記述し保存

これで、VS Code上でのPreviewが可能になります。

また、Preview画面上で右クリックのメニューからPDFに出力ができます。
f:id:s51517765:20220130121407p:plain

上記参考サイトのcssを参考に設定すると、ブラウザ上では意図通りになりますが、PDFに出力するとスタイルが変わる、という状態になります。

  h2 {
    padding: 0.2em;
    background: #7db4e6;
    color: white;
    border-left: solid 5px #7db4e6; /*左線*/
  }

f:id:s51517765:20220130120757p:plain
これは、cssで「印刷で背景を有効化」オプションを追加することでPreviewとPDF出力結果を一致させることが出来ます。

  h2 {
    padding: 0.2em;
    background: #7db4e6;
    color: white;
    border-left: solid 5px #7db4e6; /*左線*/
    -webkit-print-color-adjust: exact; /*印刷で背景を有効化*/
  }