A certain engineer "COMPLEX"

開発メモ その151 Visual Studio CodeのMarkdown機能を強化

Introduction


仕事ではVisual Studio Codeを使ってMarkdownを書いています。拡張機能のmarkdown-pdfにはお世話になっております。

Markdown converter for Visual Studio Code. Contribute to yzane/vscode-markdown-pdf development by creating an account on GitHub.

最近、mermaidというガントチャートやフローチャートをテキストで記述できるライブラリが気になっており、これがVisual Studio Codeで使えると聞いて興奮しています。
しかし、markdown-pdfがこれに対応していません。

では、これに対応しているpdf変換というと、Markdown Preview EnhancedというAtomでも有名な拡張になります。

しかし、これはこれで結構癖があります。
PDF出力に5種類の方法がありますが、これがまぁ微妙。

  • Chrome (Puppetter)
    • 一番まとも。ただし、Nodejsのインストールが必要。結果はHTML化してChromeからPDF化したのと変わらない感じ。
  • phantomjs
    • 開発が終了している。出力結果はそこそこ。
  • prince
    • 商用利用不可。また結果は微妙。有償の価値はない。
  • eBook
    • ためしてない
  • pandoc
    • cssを指定しても微妙。mermaidの結果は解釈できていない。

あと、

  • Alt textの解釈がおかしい
  • h1タグの直下に水平線が表示されない
  • コードハイライトの背景が白くなる
    • これは印刷オプションで背景を印刷しない、にしていることが要因
  • コードハイライトのブロックに境界線がない
  • 表の形式が古くさい
    • ただ、Githubも表の4隅の境界線がある。違いは1行おきに背景色が変化するところ。

が気になった問題。

良い点として、

  • 見出しのフォントが適度に太字
  • mermaidが使える
  • 改行するのに末尾に空白が不要

があります。

何はともあれ、気になった点を改善していきます。

Resolution


Alt text の解釈

諦める。使わなければ良い。仕事で使ったことはないからOK。

h1に水平線が表示されない

これはMarkdown Preview Enahancedのcssを修正することで対応。
Ctrl + Shift + Pを押下し、Markdown Preview Enhanced: Customize Cssを開きます。
そして下記のように修正を行います。


.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;

+ h1 {
+ padding-bottom: 0.3em;
+ line-height: 1.2;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ }
}

コードハイライトの背景が白くなる

前述の通り、印刷設定で背景が描画されないのが問題である。
対処として、PDFに出力するのではなく、htmlに出力し、ChromeでPDFに出力する際、背景を出力するようにすればOK

コードハイライトのブロックに境界線がない

これもMarkdown Preview Enahancedのcssを修正することで対応。
Ctrl + Shift + Pを押下し、Markdown Preview Enhanced: Customize Cssを開きます。
そして下記のように修正を行います。


.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;

h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}

+ pre[class*="language-"] {
+ border: 1px solid #ddd;
+ }
}

Conclusion


片方だけを使うというのは駄目かな。しばらくは両方使っていきます。

コメントを残す

メールアドレスが公開されることはありません。

%d人のブロガーが「いいね」をつけました。